I taught myself to program to build [redacted], a comparison website for phone contracts in the UK.
Front end: plain JavaScript
Back end: Node.js
Host: $10 DigitalOcean droplet
Web server: Nginx
SSL: Let's Encrypt with certbot
Proxy: Cloudflare
Database: Postgres
Caching: Redis
Indexing: MeiliSearch
I wanted to learn JavaScript and understand the fundamentals, so I used vanilla JavaScript for the front end without any framework (React, Vue, etc).
Initially, the comparison engine was slow, so I learnt about indexing and added MeiliSearch to the stack.
I try to keep it as simple as possible and only add what I need.
I plan on migrating to Next.js eventually - not because I need to, but because I think it will be a good learning experience. However, that's not my priority right now, and is probably an excuse for marketing/content procrastination!
Obviously you speak about the tech stack you use here, but your UX is absolutely perfect. I just used your product and got exactly what I wanted without even thinking. My brain didn't second-guess myself once. I didn't read anything superfluous - in fact I don't think I read anything at all. The search box and images of the phones did it all for me, and the autocomplete for search was perfect. I loved that only after I searched did it give me the option to refine (like size of model)
I usually use comparethemarket or something similar when shopping around, and it's a bit of a pain - though I only realised how much of a pain since using yours.
I don't know how much conscious thought and work you put into the UX - as you mainly talk about the tech - but it's great. Well done!
I come from a design background. I didn't like the UI/UX of similar comparison sites, so my aim was to improve upon what's already out there. Glad to see someone noticed!
I went and tried out the site due to this comment, and wow you're right! It's a very nice user experience. Nothing more or less than exactly what's needed for the purpose. All nice and snappy too. I wish webshops used UX like this.
Just so you know, on Firefox 92.0b7 the phone images won't load. Apparently the network request works fine, but when trying to view the image directly Firefox says that "The image <...> cannot be displayed because it contains errors.".
Thanks, I couldn't reproduce it with the stable build but I did with 92.0b7. Seems to be related to avif images and a bug in libheif. Trying to fix now.
Thank you. I do get an affiliate fee for each sale. Most retailers provide csv feeds when you join their affiliate program. Parsing and organising the data can be quite difficult as there is no uniform structure and most retailers provide bad/incomplete data. There are a lot of weird edge cases I need to work around.
Some ad blockers are very aggressive at blocking affiliate links. uBlock Origin blocks all track.webgains.com links and even closes the tab if there's a redirect, which is probably what is happening with the first link. I'm adding a feature that will call an ajax request first, and if it's blocked then I will simply redirect to an untracked link. Unfortunately I will lose potential commission this way, but at least the website will still work for everyone. It should hopefully work if you disable your adblocker.
As for the Metrofone link, it's just a redirect on their part. I did a curl request to check this:
> GET /pclick.php?p=29805977293&a=119158&m=6506 HTTP/1.1
> Host: www.awin1.com
> GET /basket/add/contract/iphone-12-5g-128gb-black/three-100gb-new-24-month-14.00/free-delivery?source=awin&awc=6506_1629914525_c508aa142e90213248adbdee4b995550&utm_source=[redacted]&utm_medium=AWIN&utm_campaign=[redacted] HTTP/2
> Host: www.metrofone.co.uk
> GET /contract-phone-deals/iphone-12-5g-128gb-black?basketRedirect=true HTTP/2
There are a lot of weird edge cases I need to work around.
This sounds like a potentially more valuable product to me. Any time I find myself doing integration work like that in an e-commerce setting I think "hm, could this be the Stripe of X".
Yep, I've definitely thought about it. There's only one other company in the UK that does this. They supply their feed/API as a service to nearly all the big comparison sites.
Front end: plain JavaScript
Back end: Node.js
Host: $10 DigitalOcean droplet
Web server: Nginx
SSL: Let's Encrypt with certbot
Proxy: Cloudflare
Database: Postgres
Caching: Redis
Indexing: MeiliSearch
I wanted to learn JavaScript and understand the fundamentals, so I used vanilla JavaScript for the front end without any framework (React, Vue, etc).
Initially, the comparison engine was slow, so I learnt about indexing and added MeiliSearch to the stack.
I try to keep it as simple as possible and only add what I need.
I plan on migrating to Next.js eventually - not because I need to, but because I think it will be a good learning experience. However, that's not my priority right now, and is probably an excuse for marketing/content procrastination!