🍔 Burger Builder 🛠

A React+Redux App for Building/Customizing a Burger with Meat, Bacon, Cheese & Salad. Live Here.

Read about installation and other details here

Read about deployment details here

💷 Design Overview 📝

The app's layout and component structure (react) has been designed at draw.io, and the basic design can be found here.

NOTE: There can be more additions into the design, over iterations of the Application.

💻 Development Workflow 🌊⌚

Layout, Component & State Design: View

Implementing the Core Functionality of the App — <BurgerBuilder/> 🍔🛠 Component

1. Creating a <Layout /> Component: Commit Details
2. Initiating the implementation of <BurgerBuilder /> Container: Commit Details
3. Concept Art of the Burger using CSS: Code @CodePen
4. Adding Dynamic <BurgerIngredient /> Component: Commit Details
5. Adding PropType Validation for <BurgerIngredient />: Commit Details
6. Implementation of the <Burger /> Component: Commit Details
7. Outputting <BurgerIngredients /> Dynamically: Commit Details
8. Calculating the <BurgerIngredient /> Sum Dynamically using reduce(): Commit Details
9. Adding the <BuildControl /> & <BuildControls /> Component: Commit Details
10. Outputting Multiple <BuildControl /> components using the <BuildControls /> Component: Commit Details
11. Connecting state to each <BuildControl /> & <BuildControls /> Component
    1. Adding Ingredients Dynamically — Connecting onClick handler to the More button: Commit Details
    2. Removing Ingredients Safely — Connecting onClick handler to the Less button: Commit Details
12. Displaying & Updating the totalPrice in the <Burger /> Component: Commit Details
13. Implementing and adding the <OrderButton />: Commit Details
14. Creating the <OrderSummary /> Modal Component: Commit Details
15. Showing/Hiding the <OrderSummary /> Modal Component w. Animation: Commit Details
16. Implementing a <Backdrop /> Component: Commit Details
17. Adding a Custom Button <StyledButton /> Component: Commit Details
18. Implementing the Functionality of the <StyledButton /> Component: Commit Details

Implementing the <Toolbar /> & <SideDrawer /> Components ⚡

1. Adding a <Toolbar /> Component: Commit Details
2. Using & Adding a <Logo /> in our Application: Commit Details
3. Adding Reusable <NavigationItem /> inside <NavigationItems />: Commit Details
4. Creating a Responsive <SideDrawer /> Component: Commit Details
5. Working on Responsive Adjustments for the <SideDrawer /> Component: Commit Details
6. Responsive Adjustments on <NavigationItem /> & <NavigationItems /> Components for the <SideDrawer /> Component: Commit Details
7. Reusing the <Backdrop /> Component for the <SideDrawer /> Component: Commit Details
8. Adding a <DrawerToggle /> Component to toggle the <SideDrawer /> Component: Commit Details
9. Adding a Hamburger Icon for the <DrawerToggle /> Component: Commit Details

Improvements & Changes Before Addition of Routing & API Calls ⚡

1. Improving the Overall Application using shouldComponentUpdate() for <Modal /> Component & Removing unnecessary .styled.jsx files: Commit Details
2. Responsive Styling Changes in the <Layout />, <BuildControls /> & <BurgerBuilder /> Components && Adding <Wrapper /> UI Component to Make Use of CSS Grid: Commit Details

🖥 Creating a Backend Firebase 🔥 & GETting/POSTing Data from/to the Server ☁

Firebase Common API Endpoint: https://burger-builder-ram.firebaseio.com/

1. Creating a Firebase Realtime Database: Firebase DOCS
2. Creating the axios instance to access our DB: Commit Details
3. Sending a POST Request using axios.post(): Commit Details
4. Displaying a Spinner while sending a POST Request: Commit Details
5. Handling Errors Globally using the <Modal /> Component inside the <withErrorHandler /> Closure HOC: Commit Details
6. Retrieving Data from the Firebase Backend & Resetting Error Handler inside withErrorHandler Closure HOC inside the constructor() lifecycle method: Commit Details
7. De-allocating Previously Allocated Interceptors to Different Respective Components using axios.interceptors.request/response.eject(axiosInstance): Commit Details
8. Resetting the <BurgerBuilder /> Component to show in App.js: Commit Details

🔀 Adding Routing using react-router 🔀

API Endpoint to fetch Orders: https://burger-builder-ram.firebaseio.com/orders.json

1. Building the <Checkout /> & <CheckoutSummary /> Components: Commit Details
2. Setting Up Routing & Routes npm i --save react-router-dom: Commit Details
3. Navigating to the Checkout Page: Commit Details
4. Navigating Back & To Next Page: Commit Details
5. Passing ingredients data via Query Params using URLSearchParams() & encodeURIComponent() methods: Commit Details
6. Navigating to the <ContactData /> Component: Commit Details
7. Order Submission & Passing Data Between Pages using withRouter() HOC: Commit Details
8. Adding a <Order /> Component inside <Orders /> Container (Page): Commit Details
9. Implementing Navigation Links using <NavLink /> Component: Commit Details
10. Fetching Orders from the Firebase Backend: Commit Details
11. Outputting the Orders: Commit Details

💷 Adding Contact Form & Form Handling 📝

1. Creating a Custom Dynamic <Input /> Component: Commit Details
2. Setting-up JS Config for the Form in <ContactData /> Component: Commit Details
3. Creating <Input /> Components Dynamically, based on the JS Config, inside the <ContactData /> Component: Commit Details
4. Adding a Drop Down Component for <ContactData /> Component inside <Input /> Component: Commit Details
5. Handling User Input: Commit Details
6. Handling Form Submission: Commit Details
7. Adding Custom Form Validation: Commit Details
8. Fixing a Common Validation Gotcha using Interpolation: Commit Details
9. Adding Validation Feedback for UI: Commit Details
10. Improving Visual Feedback: Commit Details
11. Handling Overall Form Validity: Commit Details
12. Fixing an Error Related to Drop Down Component's State in <ContactData />: Commit Details
13. Fixing a Minor Bug: Commit Details

Adding Redux ♻ To Our Project 🍔🛠

Dependency Installation: npm i --save redux react-redux

1. Setting Up Redux STORE, REDUCER & ACTIONs: Commit Details
2. Connecting the Redux STORE to the <App /> Component: Commit Details
3. Finishing the REDUCER for Ingredients: Commit Details
4. Connecting the <BurgerBuilder /> Container to Redux STORE: Commit Details
5. Working on the totalPrice's state in Redux STORE: Commit Details
6. Updating local UI state purchasable with simple logic && maintaining Redux & UI State separately: Commit Details
7. Adjusting <Checkout /> & <ContactData /> Components using Redux STORE: Commit Details

Adding ⚡ Advanced Redux ♻ To Our Project 🍔🛠

Dependency Installation: npm i --save redux-thunk

1. Installing the Redux Devtools: Commit Details
2. Preparing the Folder Structure to use ACTION CREATORS: Commit Details
3. Creating ACTION CREATORS for <BurgerBuilder /> Component: Commit Details
4. Setting Up redux-thunk & Redux DevTools to Execute Asynchronous Code: Commit Details
5. Fetching ingredients Asynchronously from the Firebase-Backend: Commit Details
6. Initializing ingredients in the <BurgerBuilder /> Component: Commit Details
7. Changing the Order of our ingredients Manually: Commit Details
8. Adding ACTIONS for Orders: Commit Details
9. Connecting <ContactData /> Container & Order ACTIONS: Commit Details
10. The Order REDUCER: Commit Details
11. Working on Order ACTIONS: Commit Details
12. Redirect in <ContactData /> to Improve UX: Commit Details
13. Combining REDUCERS in [./store/reducers/order.js] & [./store/reducers/burgerBuilder.js]: Commit Details
14. Handling Purchases & Updating the UI: Commit Details
15. Resetting the totalPrice after Purchases: Commit Details
16. Fetching Orders via Redux & Refactoring the REDUCERS using Custom Utility Function(s): Commit Details
17. Making a Leaner Switch Case by Refactoring Code in REDUCERS: Commit Details

Adding Authentication 🔐 to the 🍔🛠 Project

1. Adding an <Auth /> Container Form: Commit Details
2. Adding ACTION Creators for the Auth Form: Commit Details
3. Getting a Token from the Backend for Sign-Up: Commit Details
4. Adding Sign-In for Authorized Users: Commit Details
5. Storing the Response Token from Sign-In/Sign-Up: Commit Details
6. Adding a <Spinner /> UI Component for Sign-In & Showing Errors on the View: Commit Details
7. Logging Users Out: Commit Details
8. Accessing Protected Resources by Setting Up Rules in Firebase 🔥: Commit Details
9. Updating the UI Depending on auth State: Commit Details
10. Adding a Logout Link: Commit Details
11. Forwarding Unauthenticated Users: Commit Details
12. Redirecting the User to the Checkout Page (In case the User is New and has Built a Burger w/o Login/Signup): Commit Details
13. Persistent auth State with localStorage && Fixing Routing Errors using withRouter() from react-router: Commit Details
14. Guarding Routes: Commit Details
15. Displaying User Specific Orders: Commit Details

Improving & Fixing 🛠 the 🍔🛠 Project

1. Fixing the Redirect to the Front Page: Commit Details
2. Sharing the Validation Method into shared/utility.js: Commit Details
3. Using Environment Variables with the help of process.env.NODE_ENV: Commit Details
4. Removing console.log() statements: Commit Details
5. Adding Lazy Loading: Commit Details

Testing 🔬🧪 Our 🍔🛠 Project

Test Runner is Jest & JavaScript Testing Utility is Enzyme.

Installing Dependencies:

• npm install --save enzyme react-test-renderer enzyme-adapter-react-16
• npm install --save-dev jest

Note: If cra is used to create the react app, jest will be pre-installed.

1. Testing Functional Components using describe(), it() / test() & expect(): Commit Details
2. Testing Functional Components Continued: Commit Details
3. Using the enzyme's contains() method to test for a specific sub-component inside a component: Commit Details
4. Testing Containers: Commit Details
5. How to Test Redux: Commit Details