Skip to content

Build a burger and place an order. Written with React.

Notifications You must be signed in to change notification settings

juliatan/burger-builder

Repository files navigation

Burger Builder

This fun project was developed primarily for me to practice React, React Router, React Redux and testing with Jest and Enzyme. It allows users to dynamically customise a burger and place an order. This order is saved to a Firebase database and can be retrieved on-demand. There's a live version of the app here.

Requirements

  • Some of the libraries imported and used:
    • react
    • react-router-dom
    • react-redux
    • axios
    • enzyme
    • eslint
    • prettier

App features

  • Navbar and side drawer for navigation.
  • Saves orders to Firebase database via Axios. Orders can subsequently be retrieved.
  • Axios interceptors to handle errors on app-wide basis via a higher order component withErrorHandler.
  • Routing within SPA with React Router.
  • State management with Redux.
  • User authentication with Firebase.
  • Lazy loading higher order component asyncComponent that allows us to lazy load any component.

Getting started

  • Install Node.js and Yarn if you don't already have them installed.
  • In this directory, run yarn install.
  • You'll need to create your own file called axios-orders.js in the /src folder. See below for the code to be included.
  • You'll also need to create a .env file in the root folder. See below for the code to be included.
  • Start the React server in terminal with yarn start.
  • Run tests with yarn test.

axios-orders.js file

import axios from 'axios';

const instance = axios.create({
  baseURL: 'INSERT YOUR FIREBASE DATABASE URL HERE',
});

export default instance;

.env file

REACT_APP_FIREBASE_API_KEY = INSERT_YOUR_FIREBASE_API_KEY

Testing suite

  • Wrote a few practice tests with Enzyme and Jest (see auth reducer, BurgerBuilder component and NavigationItems component).

Releases

No releases published

Packages

No packages published