https://github.com/aggarwal-muskaan/food-order
🤯App focuses more on domain logic⚙
https://github.com/aggarwal-muskaan/food-order
context-api cssmodules-react firebase-database reactportals
Last synced: 3 months ago
JSON representation
🤯App focuses more on domain logic⚙
- Host: GitHub
- URL: https://github.com/aggarwal-muskaan/food-order
- Owner: aggarwal-muskaan
- Created: 2021-05-13T16:34:28.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-20T06:24:26.000Z (about 1 year ago)
- Last Synced: 2025-01-24T10:46:53.330Z (4 months ago)
- Topics: context-api, cssmodules-react, firebase-database, reactportals
- Language: JavaScript
- Homepage: https://getmunchies.netlify.app/
- Size: 609 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# order-munchies🌮
This is a project from the Udemy course by Maximilian Schwarzmüller.
It is a food delivery app that provides menu and takes user details.
The styles are completely copied from the course.
## Installation
This command clones the repo and installs all dependencies required to run the application.
```bash
git clone https://github.com/aggarwal-muskaan/food-order.git
cd [foldername]
npm install
```
## Demo
[Click here](https://getmunchies.netlify.app/) to see App in action.
## Takeaway for Me
1. **Firebase** : The realtime database for fetching meals & storing user information.
2. **CSS Modules** : It's like `.css` file only but styles are scoped to a particular component.
[Read more about CSS Modules](https://medium.com/@ralph1786/using-css-modules-in-react-app-c2079eadbb87)
3. **ForwardRefs** : I've learnt where to use Refs. [Click here](https://reactjs.org/docs/forwarding-refs.html) to know.
4. **Portals** : Before learning how to create one, I've always used third-party components for _overlays_.
It really important to know where do we need [Portals](https://reactjs.org/docs/portals.html).
5. **Fragment Tags** : We must use it more often to save our DOM from irrelevant nodes.😉
## Form-Validation
I've used [Formik](https://formik.org/) for validating user information while checkout.
## What's next to Learn?
- More about useMemo() & useCallback() hook for optimization.
- Next.js
### 🙌Build with CSS Modules & React.js🙌