Rebuilding a classic (first post)

First post alert!

Can anyone remember that website How many people paid $1 to find out how many people paid $1?

I can! Simple idea, simple execution, great practice!

---

As totally legit pro full stack developers, we need to keep our wits about us. The web platform changes daily and we need to learn the latest techs, have side projects, read up on frameworks, try creating things and just expand our horizons by flexing a little.

NB: legit don't try to learn everything though you will burn yourself out and it's not worth it.

For me, I have been way to focused on my day job for the last 10 years. Doing great work, learning and growing but not spending time on personal projects that benefit me.

So I decided to learn the first link on one of the many frontend email newsletters I get straight to my junk box. https://nextjs.org/ it is.

For those that don't know, where you been? For those that do know, wow this is really cool eh? React on the server, static generation, server side generation as well as the client side and serverless functions to boot. I really think this has legs.

Coming up with something to build

I had ran through NextJS's great getting started guide and even the great https://react2025.com/ by Lee Robinson (who works at Vercel / NextJS), this left me wanting more.

I had to think of something to build. Normally my side projects don't fare well but if I keep the project simple then there was no chance of it entering the pile of half started, half baked projects in my Git folder (132 side projects and counting. 1 launched)

I chose to recreate the HMPP1DTSHMPP1D website as it was as simple as it can get. A single page and integrate with a payment provider of my choice. Take a payment, track that against a database and ensure the end user can see a results page but not keep refreshing it.

https://whopaid.validatethis.co.uk/

Building

So this started off really simple and then grew over time as I thought of things to add in. Below is a list of things I can think of without this becoming a break down of how I fully built it.

General

• NextJS
• React
• Focusing on SEO title / descriptions
• Ajax page navigation to keep the site fast
• Adding Web Manifest files and all icons to go along with it
• Adding robots.txt and generating a sitemap.xml file with all the alternative languages
• Adding all code to Gitlab and adding Vercel integration for auto deployments, auto versioning and auto tracking page changes (vercel is ace)
• Adding in Core Vitals tracking with Vercel so every commit gets tracked and a score given to me
• Adding error logging with LogFlare
• Converting the whole site to TypeScript / TSX

Main page

• Replicating the site but rebuilding with TailwindCSS (if you haven't tried this yet I really recommend)
• Adding Schema / Structured data to the page for HowTo guide so that Google will pick up the steps and show them in search results as well
• Adding Social Share and integrating navigator.share() API
• Implementing PayPal and listening for its call backs
• Implementing states when PayPal returns so the user can't double pay

Results page

• Connection and reading data from server side to a MySQL database
• Adding 1 time access to the results page by server side generation of the page
• Adding fun count up animation and taking care to add the , at the correct thousands mark
• Adding fun animation at the end of it all

About

• Simple about page with introduction text

Contact

• Implementing react-hook-forms
• Implementing form states and validation
• Integrating with SendGrid for sending emails (emails are templated out in their admin and we trigger with data)
• Adding fun placeholder messages for each form input
• Adding fun thanks for contacting message / animations

API's

• Implementing a serverless API to validate the recent PayPal payment token
• If tokens are valid then set local session to give access to the results page
• Record the purchase against a MySQL database, implementing different keys for local development and live so I don't accidentally increase the number of paid live members

Site translations

• Implementing next-i18next to help handle site wide translations
• Making this accessible in 4 different languages by replacing all text across the site
• Adding static json files with translations, updating all react components to reference translation keys

I am sure there was even more I did that I didn't list but when you have been coding for so long, you kinda automatically assume everyone else in the room knows more than you or just as much as you.

If you are new to all this and would like to chat about any of the things I did above then feel free to drop some comments. Or would a write up / guide be more your sort of thing?

Anyway... that is my first post for now, right of the brain straight to page, no filter, no rewrites.... raw! Hope it interests some of you

A A ron!