MyDelivery is a fullstack delivery website built using Next.js, TypeScript, Tailwind CSS, and tRPC. This project is fully responsive, ensuring an optimal user experience across various devices. Additionally, it supports both dark mode and light mode themes for a visually appealing interface. The project also includes an admin dashboard powered by Payload CMS for managing content.
This application is designed with flexibility in mind, making it easy for restaurants and similar businesses to customize and adapt it to their specific needs.
You can view the live version of the MyDelivery frontend here:
- 🌐 Responsive Design: Optimized for both mobile and desktop devices.
- 🌙 Dark & Light Mode: Toggle between dark and light themes.
- 🛠️ Tech Stack:
- Frontend: Next.js, Tailwind CSS, TypeScript
- Backend: tRPC for API handling
- Styling: Tailwind CSS
- CMS: Payload CMS for admin dashboard
- 🚀 Fast & Lightweight: Developed with performance and user experience in mind.
- 🔄 Easily Customizable: Simple to modify for restaurants and similar businesses.
| Light Mode (Desktop) | Dark Mode (Desktop) |
|---|---|
 |
 |
| Explore Menu (Desktop) | Explore Menu (Mobile) |
|---|---|
 |
 |
 |
 |
| Item Detail (Desktop) | Item Detail (Mobile) |
|---|---|
 |
 |
| Cart (Mobile) | Checkout (Desktop) |
|---|---|
 |
 |
| Orders (Desktop) | Orders (Mobile) |
|---|---|
 |
 |
| Profile (Desktop) | Profile (Mobile) |
|---|---|
 |
 |
The admin panel can be accessed by navigating to /admin.
| Admin Page |
|---|
 |
| Sign Up (Desktop) | Sign In (Desktop) |
|---|---|
 |
 |
To run this project locally, follow these steps:
- Clone the repository:
git clone https://github.com/thiagobmi/mydelivery.git- Navigate to the project directory:
cd mydelivery- Install dependencies using Yarn:
yarn install- Set up MongoDB:
- Go to MongoDB Atlas and create a free account.
- Follow the steps to create a new cluster. Once the cluster is set up, click "Connect" and select "Connect your application."
- Copy the connection string provided (e.g., mongodb+srv://:@cluster0.mongodb.net/myFirstDatabase?retryWrites=true&w=majority).
- Replace the <YOUR_MONGO_URL> placeholder in the
.envfile with this connection string, ensuring you add your username, password, and database name.
MONGO_URL=mongodb+srv://<username>:<password>@cluster0.mongodb.net/myFirstDatabase?retryWrites=true&w=majority
- Start the development server:
yarn dev- Open http://localhost:3000 in your browser to see the application.
Feel free to fork the repository and make improvements! Pull requests are welcome.