Coding Bootcamp Week 10/13: Building the Frontend and Why I Found it Hard
Who would have thought that I would find the frontend as complex as the backend?
Why I Found the Frontend Hard
I entered the frontend block of this bootcamp with the expectation that I’m gonna breeze through it, no sweat. I have been wrong about many things, and this is one of them.
When we finished with the backend block, I thought it was the most complicated thing I have ever learned. All these endpoints, error handling, observing the MVC architecture, keeping the code clean — they were all very new, and even though by the end of the block I was already quite used to them, it’s still admittedly the most complicated code I have ever written.
Cue in frontend.
I’m not gonna lie. Frontend is simple. It should be. But because I am a new developer with not much experience, I didn’t account for the frontend when I was creating my backend. There were lots of endpoints and features that I found I required in the frontend that my backend didn’t support.
So you can imagine just imagine what my screen looked like: my frontend and backend folder both opened in a single workspace in my VS Code, tabs for my backend API, tab for the frontend live server, Northcoders notes tab, and some more tabs for quick googling.
It was chaotic. I went on nchelp more than a few times, and most of the time, the solution to my issue is very simple. I had a mentor tell me that I’m overthinking and overcomplicating it WAY too much. I had been fussing about both the backend and frontend, that when a simple error presents itself, my brain just does this loading animation.
Long story short…
I didn’t finish my frontend this week. I spent too much time planning, making the wireframe, noting states and contexts, and visualising the layout, that I didn’t have enough time to actually build it, style it, nor deploy it.
I have become more of the user than the developer if I’m being honest, and I wanted all the features that can make the user experience pleasant that I forgot about one simple fact: I’m literally a newbie developer and I currently have limitations.
At the end of the day, I have accepted that I still have limitations as a student and my goal is to KNOW how to do these things, correctly and properly, in my own time, outside of the bootcamp, from here on out.
📌 Board Game Life App
Nevertheless, I would like to introduce my React app called Board Game Life!
If you’ve been reading my entries in this series, you would know that during the backend block, we were asked to pick from two choices: nc-games or nc-news. I picked nc-games and now we’re here.
The name Board Game Life is directly directly inspired by Board Game Geek and Nintendo Life!
As evident in my barebones app, I did not have enough time to style it, but I’m pretty happy that my JavaScript works!
I built the app following the user stories provided to us in the repo, and even added some extra features myself, like registering, and viewing the user’s own dashboard with the comments they have made.
As of writing, I’m currently working on the styling so I can finally deploy it before we dive deep into Project Phase.
I am planning on using vanilla CSS with the BEM naming convention. I have started exploring libraries such as Tailwind, Bootstrap, and MUI, but I thought of going for vanilla CSS for now.
Fingers crossed I will be able to implement these styling plans!
3 Weeks Left
I feel like I have been saying this all weekend: I can’t believe there’s only 3 weeks left. 10 weeks passed by so quick, and I am both sad that my Northcoders routine will be over soon, and happy that I will be released into the wild with a clear path ahead of me.
Here’s to the final block of my bootcamp experience. May the odds be ever in our favour!
Northcoders Bootcamp Series
- Week 1: Back to Basics (Not Really)
- Week 2: JavaScript Fundamentals + Brain Soup
- Week 3: More JavaScript Fundamentals + Recursions and Object-Oriented Programming
- Week 4: Async, Data Fetching, and Promises
- Week 5: First Week on Back-end
- Week 6: Second Week on Back-end
- Week 7: Final Week on Back-end
- Week 8: The DOM and ReactJS + Holiday Break!
- Week 9: New Year, New Tech
- Week 10: Building the Frontend and Why I Found it Hard ⬅ YOU ARE HERE.
