BurgerBuilder

A burger creation React app

Report Bug

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Roadmap
4. Contact
5. Acknowledgments

About The Project

The Burger Builder app enables users to craft personalized burgers by selecting from a variety of available ingredients. To begin, users must log in using valid credentials to access the ingredient list sourced from an external API. Ingredients can be added to the burger, stacking newly selected items on top of any existing ones. Individual ingredients can be removed by clicking on them. The app is designed to be fully responsive, ensuring a seamless user experience across different screen sizes.

Key Features:

• Authentication
  • User authentication via a secure login form with validation.
  • Integration with an external authentication API for token-based authentication.
  • Display of an informational modal when incorrect credentials are provided or upon any other authentication error.
• Burger Creation
  • Dynamic fetching of ingredients from an external API.
  • Utilization of API-provided images for dynamic representation.
  • Addition of new ingredients on top of existing ones within the burger.
  • Interactive removal of any selected ingredients.
• Responsive Design
  • Implementation of responsive layouts using media queries and custom grid systems.
  • Conditional rendering of UI elements tailored for large and small screens.
  • Utilization of dynamic styled components for enhanced UI customization.

(back to top)

Built With

• 
• 
• 

(back to top)

Getting Started

To get a local deployment up and running, please follow these simple example steps.

Prerequisites

A latest version of npm is needed to install all necessary packages and run the project.

npm install npm@latest -g

Installation & deployment

Follow the steps below to get the project up and running:

1. Clone the repo

   git clone https://github.com/dimikmps/burger-builder.git

2. Install NPM packages

   npm install

3. Serve locally

   npm run start

(back to top)

Roadmap

• API Integrations
  • Implement authentication via external API endpoint
  • Integrate ingredient retrieval from external API endpoint
• App Components
  • Add Content container component
  • Add Header component
  • Add Login form
  • Add Ingredient selection pane
  • Add Burger preview/managemement component
  • Add Error Modal for user login process feedback

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contact

Dimitris Kampas - LinkedIn

Project Link: https://github.com/dimikmps/burger-builder

(back to top)

Acknowledgments

• Img Shields
• GitHub Pages
• Best-README-file

(back to top)