Menu app

This app start as a solution to Alkemy react challenge project. But I decided to keep working on it by start creating it a backend with node express and mongoDB.

Note: This is just a practice project, I don't have a backend to save the dishes data, it only save the data in the frontend (localStorage). I only have a backend for auth

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The objective of the app is to be able to make a request to an API, to collect dishes, and to be able to add and delete those dishes from a menu, 2 of these dishes must be vegan, and 2 must be non-vegan, also be able to see the details of the menu, and the details of the dishes. I went a little further and added the option to be able to create multiple menus, delete them, and edit them if desired.

I create a Node Express API Rest with MongoDB to create a login/register authentication with JWT

The challenge

• View the optimal layout for the site depending on their device's screen size
• Use Boostrap
• Create a login
• Validation without libraries
• Only use Hooks (no redux)
• Get average price, healscore, and time of menu
• Filter dishes by types (vegan/non-vegan)
• Crud sistem for dishes
• Form to make API request, validate with use Formik
• Use of React router Dom
• Use of localStorage
• Create a Express Backend to register and login user
• Use mongoDB

Screenshot

Links

• Live Site URL: Go to live example

My process

Built with

• Flexbox
• CSS Grid
• Mobile-first workflow
• CSS Modules
• react-bootstrap
• CRA
• Yup
• Formik
• axios
• typescript
• node
• express
• mondoDB

Author

• Website - Mairon Romero
• Frontend Mentor - @MaironL