Technigo bootcamp: Final project idea to final product 💻

Last week was the final week and graduation of the Technigo bootcamp 🎉 and for the last four weeks of the bootcamp I've been building my final project, a Digital organiser 📆 Check it out here!

I'm really proud of what I built and that I made it happen considering that I only started my frontend developer journey last August. I thought that I'd share with you parts of the process I went through from idea to final product and some reflections on what I learnt along the way.

First steps - Idea generation and sketching out the application

First things first. I had to come up with the idea for my application. I knew that it was important to really test what I had learnt throughout the bootcamp and maybe learn a few new things along the way. I also wanted to create an application that I could use and one that I could continue to develop after I had achieved my MVP. So I decided on a digital organiser. 

To get up and running I decided to sketch out my application. I used a Figma board to do this and it helped me to plan my application as well as visualise it to a certain level. On my Figma board I included the following areas:

• The general flow of the application from frontend to backend and backend to frontend.
• What components and pages I would need and the function of each components e.g. Add, edit or delete a task or show a list of the users tasks for the week etc 
• A rough sketch of how the mongoose model would look and what API endpoints I would need.
• Some rough styling which I visualised in mobile view as that was the view that we needed to start with and adapt as the screen gets bigger.

Despite doing this rough sketch I realised during the process of building my application that I hadn't considered some aspects of it. For example that I needed a few more endpoints than what I had planned and I under estimated what role Redux would play. This was an interesting learning curve for me as a new developer and something that I will remember for future projects. 

Backend

Once I had a rough sketch of my project I thought that it was a good idea to start building the backend including the Mongoose model and the RESTful API endpoints.

The Mongoose model I built is for a user. It has three objects, one for username, one for password and one for access token. And for each user I want them to be able to add schedule tasks and notes. So I added to the users model, two array's, one for the user's schedule tasks and one for the users notes. These arrays have their own properties that are updated depending on the action.

I found this model structure to make more sense when I was building my API endpoints. I could see in MongoDB Atlas, where the local database was stored, what to think about when writing my API endpoints in order to access the users details or schedule tasks and notes.

Also I tested out my API endpoints in Postman to make sure that they were working based on the code that I had implemented. This helped me to debug my endpoints whilst building them.

Frontend

Once the majority of the backend was set up I started to build the frontend. I decided to go page by page, building each page and it's components at a time.

This took some time and during this process I realised which and how many redux stores I would need. I settled on four in the end. With each store doing the fetches to the different API endpoints and also handling the data returned in the JSON response. 

The Redux store was also used to help with handling the global state scope of the application. For example if the access token in present in the user store then the schedule page will be navigated to using React-Router history. 

Using Redux in this way makes handling the state a lot easier when you're building your application as it can be access from anywhere in the application. Plus you don't have to be passing local state via props to different components which can get a bit much after a while.

It was a lot of fun to figure out how to handle the state globally like this and also make the overall flow of my application work nicely and without any bugs. 

When I had everything flowing as intended I got to work on the styling, which I still think is the most enjoyable part! I did my styling mobile first and when I was satisfied with the general styling e.g. colours, font, border, widths, buttons, hovers etc I went on to change the responsive design based on tablet and desktop views. All of the styling and responsive design was created using styled components. 

I also had to implement the toggle button that toggles between two different colour themes. To do this I used the redux store and depending on if the toggle was checked or not it would update the user redux store with a "checked" or "unchecked" string. This initial state was accessed in Home.js using useSelector and in the ThemeProvider the different themes would be toggled between if one was true or not. During this process of styling and showing/hiding different colour schemes I really learnt a lot about React, using the global state and styled components. 

It's crazy to think that I built this whole application from scratch ⭐. Of course I got some help and support along the way. But that this was my idea which started as just that and it's grown into a fully fledged application that people can use! I really hope that now when I start applying for jobs that employers will see how much I can do and how much I have a passion for frontend development. Fingers crossed for the next phase in my frontend developer journey 🤞