Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johnmata0427/food-ordering-system
System Food Ordering at ESFOT faculty of EPN
https://github.com/johnmata0427/food-ordering-system
frontend react tailwindcss vite website
Last synced: about 1 month ago
JSON representation
System Food Ordering at ESFOT faculty of EPN
- Host: GitHub
- URL: https://github.com/johnmata0427/food-ordering-system
- Owner: JohnMata0427
- Created: 2024-07-17T21:06:04.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-01-02T22:40:42.000Z (about 2 months ago)
- Last Synced: 2025-01-02T23:27:44.813Z (about 2 months ago)
- Topics: frontend, react, tailwindcss, vite, website
- Language: JavaScript
- Homepage: https://pedidos-comida-esfot.vercel.app
- Size: 12.7 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
$\color{Apricot}{Food\ Ordering\ at\ ESFOT\ System}$
---
> [!IMPORTANT] > **Problematic Introduction**
>
> The lunchtime rush at ESFOT poses a significant operational challenge.
> The influx of students seeking to order their meals within a limited timeframe (11 AM to 2 PM) results in the formation of long queues.
> These extended wait times not only inconvenience students but also negatively impact their overall dining experience.
> Additionally, the manual ordering process, with its inherent limitations, can lead to inefficiencies and potential errors.
> The existing system struggles to accommodate the high volume of orders during peak hours, leading to delays and frustration among students.
---
### 👩🏻💻👨🏻💻 Multiplatform Website Preview
---
🥣 Sprint 0 - Development Environment Configuration
✅ Definition of requirements and Constraints
- The frontend has the following profiles: Cook and Student.
- There is a backend and a series of public and private APIs available for consumption.
- The Cook profile can:
- Register and log in.
- Manage their profile.
- Manage products.
- The Student profile can:
- Register and log in.
- Add products to the cart.
- Make purchases.
✅ Frontend Project Structure
> - **Tools**
>
> | Image | Name |
> |--------------------------------------------------------------|----------------------------|
> |  | Visual Studio Code |
> |  | Node.js |
> |  | PNPM (Recommendation) |
> |  | React |
> |  | Tailwind CSS |
> - **Project Initialization and Installation Dependencies**
>
> - Open the terminal and run the following command to create a new React app:
> ```
> npx create-react-app my-app
> ```
> - Navigate into your project directory:
> ```
> cd my-app
> ```
> - Install Tailwind CSS and other necessary dependencies:
> ```
> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p
> ```
> - Configure Tailwind by adding the following to your `tailwind.config.js`:
> ```javascript
> /** @type {import('tailwindcss').Config} */
> module.exports = {
> content: [
> "./src/**/*.{js,jsx,ts,tsx}",
> ],
> theme: {
> extend: {},
> },
> plugins: [],
> }
> ```
> - Add the Tailwind directives to your `src/index.css`:
> ```css
> @tailwind base;
> @tailwind components;
> @tailwind utilities;
> ```
> - **Project File Structure**
>
> - The basic structure of a React project is as follows:
> ```
> my-app/
> ├── node_modules/
> ├── public/
> ├── src/
> │ ├── assets/ # Static files (images, fonts)
> │ ├── components/ # Reusable components
> │ ├── pages/ # Pages or views
> │ ├── App.js # Main app component
> │ ├── index.js # Entry point
> │ ├── index.css # Global styles
> │ └── tailwind.config.js # Tailwind configuration
> ├── .gitignore # Git ignore file
> ├── package.json # Project dependencies
> └── README.md # Project documentation
> ```
✅ User Roles
- Chefs 👨🍳👩🍳
- Students 🧑🎓👩🎓
---
👨🍳 Sprint 1 - Chef Module
✅ Endpoint consumption to log in.
✅ Consumption of endpoint to list products.
✅ Endpoint consumption to add a product.
✅ Endpoint consumption to edit a product.
✅ Endpoint consumption to view order history.
---
👩🎓 Sprint 2 - Student Module
✅ Endpoint consumption to display products by category.
- Lunch Category
- Category Beverages
- Category Snacks
✅ Endpoint consumption for contact
---
🥤🍫 Sprint 3 - Deploy
▶️ Deploy
>
>
Deployment in Vercel
>
>
>
> 🌐 Vercel Deployment URL: https://pedidos-comida-esfot.vercel.app/
---