I already had a basic understanding of React as demonstrated by the website that you’re reading this on, which is built using Gatsby! In my excitement to get involved, I had never taken the time out to do any further reading or learning into all of the aspects of React. For this reason, I decided to take a Udemy course in an attempt to get a better understanding of what’s available to me when using React. This project was created throughout the duration of the Udemy course, where I’d keep learning something new and then put it into practice by implementing it.
What is the “Burger Builder”?
The burger builder is pretty self-explanatory, it’s an application that allows a user to build a custom burger from a set of ingredients. Once they have created a burger, they can “checkout” and then keep track of their previous orders.
Hooks or nah?
The Udemy course was created in a pre-React Hooks world, so this showed me how to deal with and create class-based components. As I’ve mostly only ever used React Hooks before I found this really helpful, and will hopefully help if I ever have to work with any legacy React apps.
Styling
Over the duration of the course I was shown a few ways to handle styles within React, including CSS Modules, Styled Components, and just a standard CSS file.
The course opted to use CSS modules, these are great as they allow all styles to be scoped locally. This means that I could create a separate CSS file for each component which made it really easy to manage. The setup that was required to get this working was a bit janky, but since the release of this Udemy course they have been added to “Create React App” by default.
Routing
React Router was used to handle routes within the App. I had used this briefly before but it was good to learn. Off the back of this I also learnt how to lazy load components that weren’t needed on load, and how to add protected routes once we had implemented Authentication.
Back-End
The ingredients and orders were all stored within a Firebase Realtime Database. This was my first time using Google’s Firebase platform, and it was really easy to use. To get started I just had to create a new project, then add a Realtime Database to my project and then I could simply read/write data using a simple HTTP request.
Once the project was completed, I could then host it on Firebase which was also a really simple process of installing the Firebase CLI and pushing the built project.
Authentication
Authentication was also handled through Firebase. Once I had added Authentication to the project, I was then able to add a Sign In/Sign Up process. With this in place I added functionality to require a user to be logged in before they could complete an order, as well as making the “Orders” page only accessible to users that are logged in.
Redux
Redux was a completely new concept to me before this project, and I never understood it’s use case. Initially, most functionality of the Burger Builder was built using ONLY React, I then learnt how to convert most of this functionality to Redux. Doing this really made me understand the purpose of Redux, and how much easier it can make certain processes.
This made it really clear that I can use Redux to store the state of the App, and then use it across multiple components without having to pass this data through using props or query parameters. For example, storing the current order’s ingredients or storing the logged in state/user info within the Redux store.
Testing
Towards the end of the project, I learnt how to do some basic Unit Testing. I added tests to multiple components/containers using Jest alongside Enzyme. I utilised these tools to test the output of multiple components and ensure that they are working as expected.
Requests
Axios was used to handle all HTTP requests within the appm, I have used Axios so it was mostly fairly familiar to me. This course did teach me all about Axios instances and Axios insterceptors though, which is pretty handy to know.
Axios instances allowed me to create a reusable instance which contained common base URLs, headers and other configuration options. This saved me having to add the base URL of the API every time I made a request.
Axios interceptors are methods which are triggered before the main method. These can either be on request or on response, and they act as a sort of “middleware” for every API call.
Where can I see this App?
Live App (won't be live forever, sorry!)
Technologies Used
- React
- React Router
- Redux
- Firebase
- CSS Modules
- Jest & Enzyme
- Axios
