LeadDesk Mini

A full-stack Lead Management System built for the Digital Heroes Full Stack Developer Assignment.

Live Demo

• Frontend: https://lead-desk-mini-bice.vercel.app/
• Backend API: https://leaddesk-mini-lrw4.onrender.com

---

Features

Public Side

• Landing Page
• Loading States
• Lead Submission Form
• Client-side Validation
• Server-side Validation
• Success & Error Toasts
• Responsive UI

Admin Side

• Secure Admin Login
• JWT Authentication
• Protected Routes
• Lead Dashboard
• Search Leads
• Lead Status Management
• Logout

---

Tech Stack

Frontend

• React
• Vite
• Tailwind CSS
• Axios
• React Router
• React Hot Toast

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• MongoDB Atlas
• JWT
• bcrypt

---

Data Model

Lead

{
  name,
  email,
  budget,
  message,
  status,
  createdAt
}

Status Values

• New
• Contacted
• Closed

---

User

{
  name,
  email,
  password
}

Passwords are securely hashed using bcrypt before storing in MongoDB.

---

Authentication

The admin panel is protected using JSON Web Tokens (JWT).

Authentication flow:

1. Admin logs in.
2. Backend validates credentials.
3. JWT token is generated.
4. Token is stored in Local Storage.
5. Protected routes verify token before allowing access.
6. Logout removes the token.

Protected API requests include the JWT as a Bearer Token in the Authorization header.

---

Validation

Client-side

Name

• Minimum 2 characters
• Maximum 50 characters
• Only letters and spaces allowed

Email

• Valid email format

Message

• Minimum 10 characters
• Maximum 500 characters

Budget

• Required

---

Server-side

Server validates all incoming requests before saving data to MongoDB, ensuring invalid or malformed inputs are rejected.

---

Project Structure

LeadDesk-Mini
│
├── client
│   ├── src
│   ├── pages
│   ├── components
│   └── services
│
├── server
│   ├── controllers
│   ├── routes
│   ├── middleware
│   ├── models
│   └── config
│
├── screenshots
│   ├── home.png
│   ├── lead-form.png
│   ├── login.png
│   └── dashboard.png
│
└── README.md

Screenshots

Home Page

---

Lead Form

---

Login

---

Admin Dashboard

Deployment

Frontend deployed on Vercel

Backend deployed on Render

Database hosted on MongoDB Atlas

---

Environment Variables

Backend (.env)

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key

Frontend (.env)

VITE_API_URL=https://leaddesk-mini-lrw4.onrender.com/api

---

Installation

Clone the repository

git clone https://github.com/royalknight71/LeadDesk-Mini.git

Backend

cd server
npm install
npm run dev

Frontend

cd client
npm install
npm run dev

---

Test Credentials

Email

admin@digitalheroes.com

Password

Admin@123

---

Assignment Requirements Covered

• Public Landing Page
• Lead Form
• MongoDB Storage
• Admin Dashboard
• JWT Authentication
• Protected Routes
• Search Leads
• Status Toggle
• Deployment on Render
• Deployment on Vercel
• Responsive Design
• Client & Server Validation

---

Built for Digital Heroes Training Task