Skip to content

Latest commit

 

History

History
178 lines (141 loc) · 21.3 KB

README.md

File metadata and controls

178 lines (141 loc) · 21.3 KB

🍔 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