Nostalgia over my first ever webpage

I felt I was not ready to start

This project started originally as a university assignment for a course on web- and mobile interfaces. The focus of the course was responsivity and mobile first design. At the end of the course, we were hit with an assignment that went something along the lines of:

Design a responsive user interface and build the website. The website needs to be hosted somewhere online for ease of grading.

Honestly, I was a little stumped. Lucky for me, I had just finished a course on web development that focused on React but still, I had yet to even consider starting full-featured web project. My understanding of the optimal project structure and best practices in file management was horrible. I had no idea how to get my website online. I didn't even know how to use Git other than committing to local repositories. I was in for a ride.

Starting the project

We had no predetermined subject for the website. I decided to go the easy route and make a personal portfolio page. I opened up MS Paint (I still, years later prefer Paint for prototyping) and started drafting the basic views for my website. After a while of dragging rectangles around the canvas, I had designed a frontpage, a blog, a 3D Portfolio and a contact page. I was feeling confident and not long after, I had my create-react-app template set up and ready to go.

Technical decisions

The web development courses I had just finished happened to scratch the surface of a thing called "bootstrap". When battling with my navbar, I came across a react library called react-bootstrap. This was my first time installing a third party UI component library and I've gotta admit, the pace of development sped up drastically. I was slapping components here and there and they just worked. It was AMAZING. I used pretty much the default react-bootstrap components for the UI. The routing was made using react-router, since that was what my previous courses had taught me. The site was completely static. No backend, no database, no CDN... nothing. But I still had a working contact form! That's because When researching ways to host my site online, I came across a few threads suggesting a service called "Netlify". When I checked the features, there were a few that really stood out to me.

Why Netlify was the right choise

1. Easy deployment. I dodn't know Git very well, but I knew how to build my project using npm run build and drag and drop the build directory to netlify.
2. The contact form. All you had to do to start getting form submissions was to enable the forms feature and add the appropriate lines to your form-tags. Netlify handled the rest.
3. Custom domains. One thing I really wanted for my website was a custom domain with my own name. Netlify made it easy to set up, even if I didn't know anything about nameservers or DNS Records.

How I let the project-structure and quality collapse due to feature creep

Once I got excited about the rapid development and ease of adding the planned features, my ambitions grew by the day. I decided on a whim, that I wanted a language selection and filtering for my blog posts. I did no research and jumped right to implementing them with no planning whatsoever. It really didn't help, that my project structure was already suboptimal and messy. My "site.js" -file was literally over 1000 lines long with about 100 of them being imports. It was starting to become hard to find the components I wanted to edit. I ignored the mess and started passing my language strings as props to each component... That's when I had the brilliant idea of translating a few of my blog posts. I treated every post as their own component in a file called "blogposts.js". This took way too long. Translating each paragraph as their own string and putting them in the lang files was tedious and didn't feel like it was improving my site at all. My pace was getting slower and I realized that what I was doing was not originally planned. The deadline was approaching and I still had other areas to polish. I decided to stop and leave the translation as it was. This left the site in a weird state, where some places have translations and others dont.

What I learned

I learned the importance of a clean project structure. The relief of separate components that are named in a logical way really hits different after exploring the old site's source code. I also learned how to set up Netlify specific configurations like secured custom domains, forms, and the netlify.toml config. I learned the basics of deployment and build settings, scouring the forums for explanations of weird error codes and the importance of stepping away for an hour or two if a problem seems too daunting. I learned that while a UI library is cool, the default bootstrap components really lack any personality. Whenever I see the default bootstrap navbar, I get flashbacks of my spaghetti code. The biggest, and propably most productivity raising thing I learned was that unnecessary feature creep ruins projects. Sticking to the plan means the project has a clear goal. I've noticed that helping a lot with managing a project near the finish line.