Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ashishkk22/pizza-app-mern-microfrontend-ts

A web app for pizza outlet with admin panel.
https://github.com/ashishkk22/pizza-app-mern-microfrontend-ts

expressjs imagekit mantine-ui microfrontend mongodb nodemailer react react-hot-toast react-query redux typescript

Last synced: 2 days ago
JSON representation

A web app for pizza outlet with admin panel.

Awesome Lists containing this project

README

        


Pizza Delivery Web App (Micro-Frontend) - MERN


### Demo Link

- Main App : https://d91vylvrr1oaq.cloudfront.net/
- Admin Panel : https://d1v43ctua56grx.cloudfront.net/

### Signup Page

![Screenshot from 2023-06-05 12-14-02](https://github.com/ashishkk22/pizza-app-mern-microfrontend-ts/assets/83124264/a01d557e-0334-4236-babe-75020a5202b2)

### Home Page

![Screenshot from 2023-06-05 12-14-34](https://github.com/ashishkk22/pizza-app-mern-microfrontend-ts/assets/83124264/1bf5f510-b335-48e9-be82-b17a21803f0b)

### Admin Panel

![image](https://github.com/ashishkk22/pizza-app-mern-microfrontend-ts/assets/83124264/ee697c47-c636-4612-9b50-dfb665289b6e)


### :space_invader: Tech Stack

Client

Server

Database

### Nx Graph

![graph (1)](https://github.com/ashishkk22/pizza-app-mern-microfrontend-ts/assets/83124264/f632a761-0caf-4b13-ad42-2ba7f9353f2b)

### :dart: Features

- Basic signup and login functionalities with email OTP-based authentication.
- An admin panel allows administrators to manage coupons, products, and categories.
- Admins can accept orders and update their status.
- Image uploads are supported using ImageKit.
- Users can view their order history, receive live updates, and manage multiple addresse

### 📁 Project Structure

The project is using nx monorepo.

- **`apps`**: contains micro frontend apps with its host.
- **`lib`**: contains shared UI , react query client and redux store between micro fontend apps.

![image](https://github.com/ashishkk22/pizza-app-mern-microfrontend-ts/assets/83124264/5d7cc732-3801-4946-996f-dcfe9d8ffedc)

### :key: Environment Variables

To run this project, you will need to add the following environment variables to your .env file. you can refer .env.example file for the references.

Variables
`NX_PORT_API`
`NX_MONGODB_URL`
`NX_IMAGE_KIT_URL`
`NX_IMAGE_KIT_PUBLIC_KEY`
`NX_IMAGE_KIT_PRIVATE_KEY`
`NX_EXPIRE_OTP`
`NX_GMAIL_PASS`
`NX_GMAIL_USER`
`NX_JWT_COOKIE_EXPIRES`
`NX_JWT_EXPIRE`
`NX_JWT_SECRET`
`NX_CLIENT_HOST`
`NX_CLIENT_ADMIN`

## :toolbox: Getting Started

### System Requirements

- git v2.13 or greater
- nodejs `14 || 16 || 18`
- npm v8.16.0 or greater

All of these must be available in your `PATH`. To verify things are set up
properly, you can run this:

```shell
git --version
node --version
npm --version
```

### :bangbang: Prerequisites

This project uses pnpm as package manager

```bash
npm install --global pnpm
```

### :running: Run Locally

Clone the project

```bash
https://github.com/ashishkk22/pizza-app-mern-microfrontend-ts.git
```

Go to the project directory

```bash
cd pizza-app-mern-microfrontend
```

Install dependencies and add the required environment variables in the .env (reference .env.example)

```bash
pnpm install
```

To start the host app in development run.

```bash
pnpm nx serve host --devRemotes="cart,shop,auth"
```

To start the admin app in development run.

```bash
pnpm nx serve admin --devRemotes="auth"
```

To start the server in development run

```bash
nx serve api
```

## :handshake: Contact

Ashish Kachhadiya - [email protected]