FollowPro

Modern SMM panel-style app: landing page, auth, and dashboard with a collapsible sidebar. Built with React, Vite, Tailwind CSS, React Router, Framer Motion, Lucide React, and MongoDB (Express backend).

Quick start

Frontend

npm install
npm run dev

Open http://localhost:5173.

Backend (optional)

1. Install MongoDB or use MongoDB Atlas.
2. From project root:

cd server
npm install

3. Create server/.env (optional):

PORT=5000
MONGODB_URI=mongodb://localhost:27017/followpro
CLIENT_URL=http://localhost:5173

4. Run the API:

npm run dev

The frontend currently uses demo login (any username/password logs you in). To use the real API, point your auth forms to http://localhost:5000/api/auth/login and /api/auth/register and store the returned user + token (e.g. JWT) in AuthContext.

Project structure

• src/ – React app
  • components/landing/ – Header, Hero, CTA, WhyUs, Services, StatsSection, Footer
  • components/auth/ – LoginForm, RegisterForm
  • components/dashboard/ – Sidebar (open/close), DashboardHeader, StatCard, OrderForm, ServiceDetails, DashboardLayout
  • context/AuthContext.jsx – auth state
  • pages/ – LandingPage, LoginPage, RegisterPage, DashboardPage
• server/ – Express + MongoDB (auth API)

Features

• Landing: Header, hero, stats, services, why us, CTA, footer
• Auth: Login & register pages (demo auth; ready to plug in your API)
• Dashboard: Collapsible sidebar (desktop + mobile), stat cards, order form placeholder, service details panel
• Routing: React Router with protected /dashboard routes

Tech stack

• React 19, Vite 7, Tailwind CSS 4
• React Router DOM, Framer Motion, Lucide React
• Express, Mongoose, MongoDB, bcryptjs (backend)

Moving this project to a new Git repository

If you want to push this code to a new remote repository (for example on GitHub):

# from project root
git init                    # if the folder isn't already a git repo
git add .
git commit -m "Initial import"
# create a new repo on GitHub and replace <YOUR-REMOTE-URL> below
git remote add origin <YOUR-REMOTE-URL>
git branch -M main
git push -u origin main

If you already have a git repo locally and just want to change remotes:

git remote remove origin
git remote add origin <YOUR-REMOTE-URL>
git push -u origin main

Deploying the frontend to Vercel

This repository is a Vite app. To deploy to Vercel:

• Option A — Vercel web dashboard (recommended):

  • Import the repo from GitHub/GitLab/Bitbucket.
  • Set Build Command: npm run build and Output Directory: dist.
  • Add an environment variable VITE_API_URL pointing to your backend API (e.g. https://api.example.com/api).

• Option B — Vercel CLI:

npm i -g vercel
vercel login
vercel --prod

Note: the frontend expects the API base at import.meta.env.VITE_API_URL.

Backend deployment

The server/ folder contains the Express API. Deploy it separately (Render, Railway, Heroku, or your VPS). Set the API URL as VITE_API_URL in Vercel.