This is the client-side repository for SavorySync, a food management and e-commerce platform. The application provides users with the ability to explore, purchase, and manage food items. It also supports authentication and theme customization.
-
Navbar:
- Website name/logo.
- Navigation links: Home, All Foods, Gallery.
- Conditional login/logout button.
- Profile dropdown with links to "My Foods", "Add Food", and "My Orders" (only for logged-in users).
- Theme toggle button (light/dark mode).
-
Main Section:
- Displays different pages based on routes.
-
Footer:
- Contains relevant information and an eye-catching design.
- Login Page:
- Email and password-based authentication.
- Social login (Google/GitHub).
- Redirect link to the Register page.
- Register Page:
- Fields: Name, Email, Photo URL, Password.
- Password validation: must include an uppercase letter, a lowercase letter, and be at least 6 characters long.
- Displays error messages or toast alerts for validation issues.
- Toast/Sweet Alert:
- Displays success messages on login or registration.
-
Home Page:
- Banner Section:
- Contains a title, a short description, and a button linking to the All Foods page.
- Top Foods Section:
- Displays six top-selling food items with a details button (redirects to the Single Food Page).
- A "See All" button redirects to the All Foods page.
- Extra Sections:
- Two additional attractive sections to enhance user engagement.
- Banner Section:
-
All Foods Page:
- Displays all food items stored in the database.
- Search functionality to filter foods by name.
- Each food card includes food details, quantity, and a "Details" button (redirects to the Single Food Page).
-
Single Food Page:
- Displays detailed information about a food item, including purchase count and a purchase button.
-
Gallery Page:
- Contains a gallery section with at least 10 static images.
- Clicking on an image opens a lightbox for an enlarged view.
-
Food Purchase Page:
- Form fields: Food Name, Price, Quantity, Buyer Name (read-only), Buyer Email (read-only), Buying Date (auto-generated).
- Stores the purchase information in the database.
- Displays a toast/sweet alert on successful purchase.
- Prevents purchase if the available quantity is zero or exceeds the available quantity.
-
My Foods Page:
- Displays all food items added by the logged-in user.
- Includes an update button to modify food details via a modal or a separate update page.
-
Add Food Page:
- Form fields: Food Name, Food Image, Food Category, Quantity, Price, Added By (name & email), Food Origin, Short Description.
- Stores the food item in the database and shows a toast/sweet alert on success.
-
My Orders Page:
- Displays all food items ordered by the logged-in user.
- Includes food details, buying date (formatted using Moment.js), and a delete button to remove orders.
-
JWT Authentication:
- Generates a JWT token on login and stores it on the client side.
- Verifies the token for private routes.
-
Theme Customization:
- Light/dark mode toggle with persistent theme settings stored locally.
- Food Quantity:
- Prevents purchase if the available quantity is zero or exceeds the available quantity.
- Prevents users from purchasing their own added food items.
- Search Functionality:
- Allows searching for foods by name on the All Foods page.
Here’s a list of the packages used in the project:
- axios: ^1.7.9
- firebase: ^11.0.2
- moment: ^2.30.1
- react: ^18.3.1
- react-dom: ^18.3.1
- react-hook-form: ^7.54.1
- react-icons: ^5.4.0
- react-modal-image: ^2.6.0
- react-router-dom: ^7.0.2
- react-toastify: ^11.0.2
- @eslint/js: ^9.15.0
- @types/react: ^18.3.12
- @types/react-dom: ^18.3.1
- @vitejs/plugin-react: ^4.3.4
- autoprefixer: ^10.4.20
- daisyui: ^4.12.20
- eslint: ^9.15.0
- eslint-plugin-react: ^7.37.2
- eslint-plugin-react-hooks: ^5.0.0
- eslint-plugin-react-refresh: ^0.4.14
- globals: ^15.12.0
- postcss: ^8.4.49
- tailwindcss: ^3.4.16
- vite: ^6.0.1