Toast App

What's this all about?

The project is a result of the frontend task assigned by the Toast app. It's a React app, designed pixel perfect in accordance with the given figma design viewable with ease in any mobile device.

How it stands out?

1. Highly scalable folder structure.
2. Modular code, more components.
3. Animations using framer-motion.
4. Implementation of Barrels in ReactJs.
5. Up to date version control with git
6. Proper segregation of components and pages in the application.

Tech stack

1. ReactJs
2. TailwindCss
3. React-Redux
4. Framer motion
5. Reduxjs toolkit

Early preview

Directory Structure

├── netlify.toml
├── package.json
├── package-lock.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── assets
│   │   ├── banner.png
│   │   └── cafe.png
│   ├── components
│   │   ├── CurrentOrder.jsx
│   │   ├── DishCard.jsx
│   │   ├── Footer.jsx
│   │   ├── index.js
│   │   ├── MainDishCard.jsx
│   │   ├── Nav.jsx
│   │   └── PreviousOrder.jsx
│   ├── data
│   │   ├── dishes.js
│   │   └── index.js
│   ├── features
│   │   ├── dishSlice.js
│   │   ├── index.js
│   │   └── ordersSlice.js
│   ├── helpers
│   │   ├── index.js
│   │   └── orderhelpers.js
│   ├── index.css
│   ├── index.js
│   ├── pages
│   │   ├── Beverages.jsx
│   │   ├── Desserts.jsx
│   │   ├── index.js
│   │   ├── Main.jsx
│   │   ├── PlaceOrder.jsx
│   │   └── Special.jsx
│   ├── routes
│   │   ├── Endpoints.jsx
│   │   └── index.js
│   └── store
│       └── index.js
├── tailwind.config.js

10 directories, 41 files

---