Restaurant Ordering

My solo project - Restaurant Ordering app (from The Frontend Developer Career Path of Scrimba)
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
3. Roadmap
4. Issues and solutions
5. License
6. Contact
7. Acknowledgments

About The Project

My solo project - Restaurant Ordering app.

(back to top)

Built With

• 

• 

• 

• React Hooks

  • useState
  • useMemo
  • forwardRef

(back to top)

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Installation

Install packages

yarn

Launch at localhost in development mode

yarn dev

(back to top)

Roadmap

• Add/ remove cart items
• Use amount for duplicated items in order summary
• Complete order popup modal
• Click outside close modal using useRef
• Finish Order notification message
• Form verification
• Bug fixes
  • Fixed the position of order summary title and complete order button
  • Pop up modal is not correct centered
  • Deploy dist/output.css not found

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

(back to top)

Issues and solutions

Need to close modal when clicking outside of the modal while the modal is open

Solution

Forward ref in the child component use forwardRef

useEffect to track the mousedown event of the document, and has the dependency of modal opening state

clean up in mousedown event in useEffect

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Jen Chen

Project Link: https://github.com/yujhenchen/restaurant-ordering-react

(back to top)

Acknowledgments

• Scrimba
• forwardRef
• How to detect click outside in a React component

(back to top)