Table of Contents
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.
To get a local deployment up and running, please follow these simple example steps.
A latest version of npm is needed to install all necessary packages and run the project.
npm install npm@latest -g
Follow the steps below to get the project up and running:
- Clone the repo
git clone https://github.com/dimikmps/burger-builder.git
- Install NPM packages
npm install
- Serve locally
npm run start
- 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).
Dimitris Kampas - LinkedIn
Project Link: https://github.com/dimikmps/burger-builder