Ashpez - Food Delivery Application

Fullstack food ordering application build with Payload CMS and Next 14.
This application supports both user-facing features for ordering food and an admin panel for restaurant management. The application is fully responsive, ensuring optimal usability on mobile devices.

Website

User panel: Ashpez Client
Admin panel: Ashpez Admin

Admin Accounts

• Login: guest1@gmail.ru
• Password: guest123

Technology Stack 🛠️

Frontend 💻

• Next.js 14: with app router and i18n (upgraded to 15).
• ShadCN: Styled with ShadCN components for consistent and aesthetic design.
• GraphQL: Integrated with GraphQL for efficient and flexible querying of data from the backend.
• TanStack Query: for client-side data fetching and caching.
• Jotai: Managed with Jotai for flexible and simple state handling.
• Zod: Validation library with Zod in pair with react-hook-form
• I18N: Implemented using next-intl to support multilingual user interfaces.
• Responsive - Full Responsive Desktop First Web App with custom sidebar and menu drawer component for mobile devices.
• A11Y - Keyboard control over all interactive elements
• Seo Friendly

Backend and Database ⚙️🗄️

• Payload CMS: for flexible and scalable data management.
• MongoDB: A NoSQL database for efficient data storage and retrieval.

Features ✨

Client side features 🖥️

• Registration and Login: Users can create an account or log in to access personalized features.
• Order Foods: Browse, select, and order food from restaurants.
• Order Tracking: Real-time updates on the status of placed orders.
• Order Amount: Display of the total cost of an order.
• Order History: A dedicated profile page for users to view their past or current orders.
• City Selection: Choose the delivery city for location-specific offerings. (planned)
• Feedback Submission: Users can send feedback to improve services or rate their experience. (rate planned)

Admin Panel Features 🛡️

• Multivendor Support: Allows multiple restaurants to list, manage, and sell products on a single platform.

• The admin panel provides role-based access, supporting the following roles:

  • Admin (admin): full access to all featuers and settings.
  • Restaurant Owner (author): control the restaurant, dishes and orders for his own restaurants
  • Guest (guest): viewing purposes only.

How it works 🌀

1. Admin Creates Restaurant Owners (Authors):

• The first admin user creates restaurant owners by adding their login credentials (email and password) in the Customers schema.

2. Admin Creates Restaurants:

   • The admin sets up the restaurant profile, including its information and images.
   • The admin assigns access to the newly created restaurant owner, linking them to their respective user (Customer).

3. Restaurant Owner Access:

   • The restaurant owner logs in to the admin panel using the provided credentials.
   • They can view and manage only their assigned restaurant.

4. Managing Restaurant Information:

   • The restaurant owner can update the restaurant's profile, description, images etc (except the name of the Restaurant).
   • They can create, edit, or delete dishes associated with their restaurant.
   • The created dishes need to be added to the restaurant's menu.

5. Order Management:

   • The restaurant owner can view orders placed by customers for their restaurant.
   • They can update the order statuses, which will reflect directly in the user profiles.

Getting Started 🚀

Follow these steps to set up and run the application locally:

Requirements 📋

1. Node.js: Ensure you have Node.js (version 18 or higher) installed.
2. MongoDB: Set up a MongoDB instance.
3. Environment variables: Set up DATABASE_URI and PAYLOAD_SECRET .

for more information visit Payload MongoDB setup section

Installation 📦

1. Clone the repository:

   git clone https://github.com/ethsdev/food-delivery-payload.git

2. Navigate to the project directory:

   cd food-delivery-payload

3. Install dependencies for both frontend and backend:

   npm install

Running the Application ⚙️

4. Start the appliaction with admin panel:

   npm run dev

5. Open http://localhost:3000 to see the application in action.

6. Open http://localhost:3000/admin. Register your first user with admin role and see the Payload CMS admin panel in action.