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

https://github.com/ratul544388/service-now-mern-stack

A platform where users become service providers, offer services, and manage bookings effortlessly via an intuitive admin dashboard for smooth service delivery.
https://github.com/ratul544388/service-now-mern-stack

javascript mongodb prisma shadcn tailwind tanstack-react-query

Last synced: 2 months ago
JSON representation

A platform where users become service providers, offer services, and manage bookings effortlessly via an intuitive admin dashboard for smooth service delivery.

Awesome Lists containing this project

README

          

# Service Now

A powerful full-stack MERN application where users can **create, search, and book a wide range of custom services** — from home cleaning to freelance gigs. The platform supports **service provider dashboards**, user authentication, media uploads, and rich UI interactions built with modern web technologies.

> **Note:** This is a multi-role project (users & service providers). Both frontend and backend are deployed separately.

---

## 🖥️ Live Demo

- 👉 **Frontend:** [https://service-now-mern-stack-djhc.vercel.app](https://service-now-mern-stack-djhc.vercel.app)
- 👉 **Backend:** [https://service-now-mern-stack.vercel.app](https://service-now-mern-stack.vercel.app)

---

## 🚀 Features

- 🌍 Explore and book a variety of user-created services
- 🧑‍💼 Service providers can add, update, or remove services
- 📊 Dashboard with insights: bookings, earnings, service stats
- 🔐 Secure authentication with sessions, JWT, and Google OAuth
- ☁️ Cloudinary integration for uploading service images
- 📅 Smart booking forms with date selection and validation
- 🌗 Light/dark mode toggle
- 📦 Full form validation with Zod + React Hook Form
- 💬 Modern UI with smooth animations (Framer Motion, GSAP)

---

## 🛠️ Tech Stack

**Frontend:**
- **React.js** + **Vite**
- **Tailwind CSS** + **Framer Motion**, **GSAP**
- **Zustand** (global state)
- **React Hook Form** + **Zod**
- **Radix UI** components
- **Cloudinary** (media upload)
- **TanStack React Query**
- **Firebase** (optional integration)

**Backend:**
- **Node.js** + **Express.js**
- **Prisma ORM**
- **MongoDB**
- **Passport.js** (Google OAuth)
- **JWT + Cookie Sessions**
- **Multer + Cloudinary**
- **dotenv** for environment config

---

## 📁 Project Structure

```

service-now-mern-stack/
├── frontend/ # React.js client with Vite
└── backend/ # Node.js API with Express & Prisma

````

---

## 🧑‍💻 Getting Started (Local Setup)

### 1. Clone the Repository

```bash
git clone https://github.com/ratul544388/service-now-mern-stack.git
cd service-now-mern-stack
````

### 2. Backend Setup

```bash
cd backend
npm install
npx prisma generate
npm run dev
```

Create a `.env` file in `/backend`:

```env
DATABASE_URL=your_mongodb_uri
JWT_SECRET=your_secret_key
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
```

### 3. Frontend Setup

```bash
cd ../frontend
npm install
npm run dev
```

You may need a `.env` in `/frontend` for:

```env
VITE_API_BASE_URL=http://localhost:5000
```

Visit: [http://localhost:5173](http://localhost:5173)

---

## ⚙️ Deployment

* Frontend: **Vercel** (React/Vite)
* Backend: **Vercel** (Serverless Express API)
* Cloud uploads via **Cloudinary**
* OAuth via **Google (Passport.js)**

---

## 📄 License

Licensed under the [MIT License](LICENSE).

---

## 👤 Author

**Ratul Hossain**
Full-Stack Web Developer
📍 Dhaka 1310, Bangladesh
📧 [ratul.hossain.dev@gmail.com](mailto:ratul.hossain.dev@gmail.com)
📞 +8801815555105

---

> ⭐ If you found this project helpful, please consider giving it a star on GitHub!