I wanted to share thoughts and hobby projects somewhere to support continuous learning and maybe help others learn things too. I could have gone for one of the usual blogging platforms, but that felt a bit boring. I wanted full control over the design and functionality so I could do daft stuff like this if I wanted to.
The best option was to build something from scratch, but I didn't have any experience with modern frontend development. The last time I properly sank any hours into it was around 2015 with a WordPress help site for a previous employer. Aside from Uni, the only other time was probably when I went all-in on customising MySpace profiles in the mid-00s.
There was a lot of buzz around the emerging agentic AI when I first started this project, too. I was curious to see how it got on with frontend development.
how it's made
part 1: the prototype
I started off with a prompt to agentic AI to see if I could generate a full website from scratch without writing a single line of code myself. It was impressive at first; a semi-functional Next.js website was created in a few minutes. However, whenever I wanted specific changes, I spent more time arguing with the LLM than I probably would have spent coding.
The result of this experiment was a basic website, 100% generated by agentic AI based only on my prompts. The screenshot below shows the last iteration before I got bored, with a special guest appearance from my cursor.
I took the time to read through every file that had been generated. This turned out to be a very useful exercise as I gained an understanding of how to structure a Next.js project.
It was time to give it a proper go.
part 2: the real thing
For the design, I wanted a simple layout where I could add some of my own pixel art and include hints of my early MySpace customisation days, like the 16x16 tiled background.
I used AI differently this time, to help with design considerations and as a pair programmer. I decided on a tech stack of Next.js with TypeScript, MDX and Tailwind CSS. I had a basic understanding of Next.js from the prototype, and the free CI/CD pipeline from Vercel seemed nice. I also liked the idea of using Markdown for the content as I know the syntax inside out.
After several months of patchy bursts of development whenever I wasn't too exhausted from work/life, I finally deployed v1.0 of the website. Initial test coverage was 0%. Some of the developers I've worked with over the years would be proud 🫠.
lessons learned
I've learned a lot about modern frontend development since I started this project. I really like the concept of the App Router used by Next.js, and the React component setup makes a lot of sense. I could probably put a half-decent static website together in a few hours now with the help of AI.
There were some challenges along the way, though.
the loop
At one point I was aimlessly going around in circles, refactoring the same classes over and over again as I wasn't sure what to focus on. This was down to a lack of proper planning — which is ironic, considering how much I bang on about it at work.
To get past this, I listed out the key things I wanted to include as part of the first real-life version. Creating a "good enough" list helped to get v1.0 finished. I'll do this at the start next time!
AI hallucinations
I ran into a few issues where the AI suggested approaches that would only work in older versions of Next.js, referencing the Pages Router instead of the new App Router.
This was on a day when I was being particularly lazy, so I kept copying and pasting the error message over and over again saying "fix this". It wasn't until I bothered to investigate the error myself that I realised what was happening.
next steps
I will probably spend a lot of time tinkering with the design until I'm completely happy with it. There are some things I haven't fully considered yet for the sake of getting v1.0 deployed, such as accessibility, but I'll get there.
I would like to eventually plug the website into some sort of backend API and build out a variety of automation frameworks with different tools. It would give me a chance to stay sharp with languages and tooling that I don't use daily at work.
If you have any feedback or if you find any issues, then let me know!