This is part of a series of articles on what I learned from making a website for Monitor - a publication platform for poetry, innovative writing and criticism based in Manchester. This post details how I made the first version the website up to the point where we started selling our first book. To read the second part about how I added more products and basket functionality click here.
Coding tutorials often teach you how learn a new technology by showing you how to make a to-do list app or a similar app that demonstrates the best their tool has to offer. Although this is useful for getting to grips with new tech I found it difficult to stay motivated when taking these projects further once the tutorial has finished. I found what really drove me to take the project further and helped me take on board the lessons from the tutorial was solving my own real-world problems with the teachings from the tutorial.
I discovered this method of learning worked well for me when I was first learning web development. Around this time a friend was looking for a site for their new project: Monitor. It was just what I was looking for: the project was small, the workload would be manageable and the publications that Monitor had planned looked really exciting. Another crucial factor in my decision to take on this project was that Monitor is run by a friend of mine and we had a mutual interest in each other doing well. I’ve been developing the site since 2019, iterating on it and improving it when I find the time. I’ve learned a lot along the way.
Humble beginnings
I started the first version of the Monitor site before I’d started bootcamp or written any client side Javascript. I was keen to dig deeper on the fundamental languages of the web - HTML and CSS - as well as learning what was involved in getting a site live by way of hosting and DNS.
I had taken some of the HTML and CSS courses on FreeCodeCamp and thought it would be easy enough to throw a website up that just had one page for the book and an ‘about’ page. The workflow was a dream, there was no frontend framework or bundling, I was able run the HTML files straight in the browser with almost zero load time. Having a simple set up like this made it easy to focus on making the pages and not fiddling with config files.
I am lucky to have a great local hosting provider down the road from me - Zen. Getting the site live was as simple as buying a domain, renting some server space and FTP-ing my HTML and CSS files on to it. It took seconds to deploy so I was able to make changes and the client was able to see them very quickly, giving me short feedback cycles and making sure we stayed on the same page.
Of course we needed the ability to sell products which could have been complicated for a newbie so I used PayPal Buttons which allowed users to buy through Paypal. Once a customer had paid Monitor got the money straight into their Paypal account and email with address to post the book to.
I had the site ready to go but the printing of the books took much longer than we expected so there wasn’t any need for the site at this point and it never got deployed to the wider world.
Monitor 1.0
After Northcoders I was looking for a job and keen to put into practice what I’d learned at the bootcamp. It looked like the publication date for Monitor’s first book was nearing but with enough time for me to completely rebuild the site with React.
Without too much pain I had managed to rebuild the site in React and improve on what we already had. At this point though there was no data store, there was still only 1 book to sell so I could hard-code the copy and images.
Now I understand that using React to build a site as small of this is perhaps overkill but I wanted to learn how to use the framework better and so a small scale project like this was ideal. I managed to get my first developer job about a month after graduating from Northcoders so the time that I had to build the website dramatically decreased but what we had was good enough - it was selling books and it looked o-k 😅.
The next challenge for me was adding another book to the shop and all the state management involved in a shopping basket which lead me to make a number of bad decisions which will be discussed in the next part of this blog.