SkillBridge Frontend 🎓

SkillBridge is a full-stack tutoring platform where students can discover expert tutors, book lesson slots, and pay securely via Stripe. This repository contains the Next.js frontend powering the user interface.

🔗 Live Site: https://skillbridge-frontend-plum.vercel.app 🔗 Backend Repo: skillbridge-backend

🛠️ Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript
Styling	Tailwind CSS v4
UI Components	shadcn/ui (Radix UI primitives)
Forms	TanStack React Form + Zod v4 validation
Authentication	Better Auth (client SDK with session cookies)
State/Fetching	Next.js Server Actions + Server Components
Animations	Framer Motion
Smooth Scroll	Lenis
Charts	Recharts (Bar + Area charts)
Notifications	Sonner (toasts) + SweetAlert2 (modals)
Carousel	Embla Carousel
Theming	next-themes (one-click light/dark toggle)
Runtime	Bun
Deployment	Vercel

📸 Screenshots

Homepage

Student Dashboard

✨ Key Features

Public Tutor Discovery — Browse, search, and filter tutors by name, category, rating, and hourly rate with a sticky sidebar filter panel.
Rich Tutor Detail Pages — Full tutor profile with cover image, skills/tags, availability schedule, reviews, and a "Related Tutors" recommendation section.
Role-Based Dashboards — Three parallel dashboard layouts using Next.js parallel routes: @student, @tutor, and @admin, each with tailored views.
Analytics Charts — Visual dashboard statistics using Recharts AreaCharts and BarCharts, populated from live /stats backend endpoints.
Booking System — Students browse tutor availability and book time slots with confirmation modals and real-time status updates.
Stripe Checkout — Seamless payment flow with redirect to Stripe Checkout (EUR) and a dedicated payment success page with transaction details.
Edge Middleware Auth — Server-side route protection that validates sessions and enforces role-based access before pages load.
Redirect Chain Preservation — Login/Register flows preserve the user's intended destination across authentication steps (including the register → login → destination chain).
Demo Login Buttons — One-click credential fill for Student, Tutor, and Admin demo accounts on the login page.
Dynamic Subjects Navbar — The "Subjects" dropdown in the navbar is populated dynamically from the categories API at render time, linking directly to filtered tutor listings.
Floating AI Chatbot (Bridget) — A premium floating chatbot widget visible on all public and dashboard pages, ready for OpenRouter AI integration.
Dark / Light Mode — Full one-click theme toggle powered by next-themes and the ModeToggle component.
Responsive Design — Fully responsive layout with a collapsible sidebar, mobile sheet navigation, and adaptive grid layouts.
Micro-Animations — Premium hover effects on tutor cards (lift + image zoom), smooth transitions, and interactive filter states powered by Framer Motion.
Dynamic Avatars — Integrates the DiceBear API to automatically generate unique, deterministic, and highly colorful vector avatars for students and tutors who do not upload a custom profile picture.
About & Contact Pages — Fully designed pages with core values, team section, contact form, and support information.

📁 Project Structure

src/
├── app/
│   ├── (auth)/                 # Login & Register pages
│   │   ├── login/
│   │   └── register/
│   ├── (public)/               # Public pages (homepage, tutors, tutor details)
│   │   ├── page.tsx            # Homepage (8-section landing page)
│   │   ├── about/              # About Us page
│   │   ├── contact/            # Contact page
│   │   └── tutors/
│   ├── (dashboard)/            # Protected dashboard (parallel routes)
│   │   ├── @admin/             # Admin dashboard views
│   │   ├── @student/           # Student dashboard views
│   │   ├── @tutor/             # Tutor dashboard views
│   │   └── layout.tsx          # Shared sidebar layout
│   ├── globals.css
│   ├── layout.tsx              # Root layout (fonts, providers, metadata)
│   └── not-found.tsx           # Custom 404 page
├── actions/                    # Next.js Server Actions
├── components/
│   ├── layout/                 # App sidebar, navbar, footer, mode toggle, FloatingChat
│   ├── modules/                # Feature-specific components
│   │   ├── authentication/     # Login/Register forms (with demo login buttons)
│   │   ├── dashboard/          # Dashboard components (per-role, with charts)
│   │   ├── home/               # Homepage sections (hero, stats, categories, tutors, etc.)
│   │   ├── shared/             # Shared components (profile card, logo)
│   │   └── tutors/             # Tutor cards, filters, grid, detail page
│   └── ui/                     # shadcn/ui primitives
├── constants/                  # Role enums, booking statuses
├── hooks/                      # Custom React hooks
├── lib/                        # Auth client, utilities
├── middleware.ts               # Edge middleware (route protection)
├── providers/                  # Theme & context providers
├── routes/                     # Role-based route definitions
├── services/                   # API service layer (tutor, booking, payment, etc.)
└── types/                      # TypeScript type definitions

🗺️ Page Routes

Public Routes

Route	Description
`/`	Homepage with 8 sections (Hero, Stats, Features...)
`/tutors`	Tutor directory with search, filters, and pagination
`/tutors/:id`	Individual tutor profile with availability & reviews
`/about`	About Us page with values and team
`/contact`	Contact page with form
`/login`	User login (with demo credential buttons)
`/register`	User registration

Protected Dashboard Routes

Route	Role	Description
`/dashboard`	All	Role-specific overview with charts
`/dashboard/profile`	All	Edit user profile
`/dashboard/bookings`	All	View bookings (role-filtered)
`/dashboard/create-booking`	Student	Book a tutor's availability slot
`/dashboard/payment/payment-success`	Student	Post-payment confirmation page
`/dashboard/tutor-profile`	Tutor	Manage tutor profile
`/dashboard/teaching-categories`	Tutor	Manage teaching categories
`/dashboard/availability`	Tutor	Create/delete availability slots
`/dashboard/manage-tutors`	Admin	Manage all tutors on the platform
`/dashboard/manage-users`	Admin	Manage all users (ban, role change)
`/dashboard/manage-categories`	Admin	CRUD for teaching categories

🤖 AI Chatbot — Bridget

A floating AI assistant widget (FloatingChat.tsx) is embedded in both the public and dashboard layouts. It features:

Animated open/close FAB button with pulse ring
Typing indicator (bouncing dots)
Suggested quick-reply questions on first open
Unread message badge when closed
Context-aware mock responses for tutors, subjects, booking, and pricing questions
Ready for OpenRouter AI integration — replace the getMockResponse() function with a live API call

✅ Getting Started

Prerequisites

Node.js v20+ (or Bun)
A running skillbridge-backend instance

1. Clone & Install

git clone https://github.com/Rezwan66/skillbridge-frontend.git
cd skillbridge-frontend
npm install

2. Configure Environment Variables

Create a .env file in the project root:

# BACKEND_URL=https://skillbridge-backend-phi.vercel.app
BACKEND_URL=http://localhost:5000
FRONTEND_URL=http://localhost:3000

# NEXT_PUBLIC_BACKEND=https://skillbridge-backend-phi.vercel.app
NEXT_PUBLIC_BACKEND=http://localhost:5000
NEXT_PUBLIC_FRONTEND=http://localhost:3000

# API_URL=https://skillbridge-backend-phi.vercel.app
API_URL=http://localhost:5000
# AUTH_URL=https://skillbridge-backend-phi.vercel.app/api/auth
AUTH_URL=http://localhost:5000/api/auth

NEXT_PUBLIC_BACKEND_URL=http://localhost:5000
# NEXT_PUBLIC_BACKEND_URL=https://skillbridge-backend-phi.vercel.app

3. Run the Development Server

npm run dev

The app will start at http://localhost:3000.

🧪 Useful Commands

Command	Description
`npm run dev`	Start development server with hot reload
`npm run build`	Build for production
`npm run start`	Start production server
`npm run lint`	Run ESLint

🔐 Authentication Flow

Users register with name, email, password, and role (Student or Tutor).
Login creates a session cookie via Better Auth.
Demo Login buttons on the login page auto-fill credentials for Student, Tutor, and Admin roles.
Edge Middleware intercepts all /dashboard/* routes, validates the session against the backend, and enforces role-based access.
Protected route redirects preserve the intended destination through ?redirectPath= query parameters — even across the Register → Login chain.

🚀 Deployment

Deploy to Vercel with zero configuration:

Push to GitHub
Import into Vercel
Set environment variables (point API_URL and AUTH_URL to your deployed backend)
Deploy

Check out the Next.js deployment docs for more details.

🛠️ Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript
Styling	Tailwind CSS v4
UI Components	shadcn/ui (Radix UI primitives)
Forms	TanStack React Form + Zod v4 validation
Authentication	Better Auth (client SDK with session cookies)
State/Fetching	Next.js Server Actions + Server Components
Notifications	Sonner (toasts) + SweetAlert2 (modals)
Carousel	Embla Carousel
Theming	next-themes (light/dark mode)
Runtime	Bun
Deployment	Vercel

📸 Screenshots

Homepage

Student Dashboard

✨ Key Features

Public Tutor Discovery — Browse, search, and filter tutors by name, category, rating, and hourly rate with a sticky sidebar filter panel.
Role-Based Dashboards — Three parallel dashboard layouts using Next.js parallel routes: @student, @tutor, and @admin, each with tailored views.
Booking System — Students browse tutor availability and book time slots with confirmation modals and real-time status updates.
Stripe Checkout — Seamless payment flow with redirect to Stripe Checkout (EUR) and a dedicated payment success page with transaction details.
Edge Middleware Auth — Server-side route protection that validates sessions and enforces role-based access before pages load.
Redirect Chain Preservation — Login/Register flows preserve the user's intended destination across authentication steps (including the register → login → destination chain).
Dark Mode — Full light/dark theme toggle powered by next-themes.
Responsive Design — Fully responsive layout with a collapsible sidebar, mobile sheet navigation, and adaptive grid layouts.
Micro-Animations — Premium hover effects on tutor cards (lift + image zoom), smooth transitions, and interactive filter states.
Dynamic Avatars — Integrates the DiceBear API to automatically generate unique, deterministic, and highly colorful vector avatars for students and tutors who do not upload a custom profile picture.

📁 Project Structure

src/
├── app/
│   ├── (auth)/                 # Login & Register pages
│   │   ├── login/
│   │   └── register/
│   ├── (public)/               # Public pages (homepage, tutors, tutor details)
│   │   ├── page.tsx            # Homepage
│   │   └── tutors/
│   ├── (dashboard)/            # Protected dashboard (parallel routes)
│   │   ├── @admin/             # Admin dashboard views
│   │   ├── @student/           # Student dashboard views
│   │   ├── @tutor/             # Tutor dashboard views
│   │   └── layout.tsx          # Shared sidebar layout
│   ├── globals.css
│   ├── layout.tsx              # Root layout (fonts, providers, metadata)
│   └── not-found.tsx           # Custom 404 page
├── actions/                    # Next.js Server Actions
├── components/
│   ├── layout/                 # App sidebar, navbar, footer, mode toggle
│   ├── modules/                # Feature-specific components
│   │   ├── authentication/     # Login/Register forms
│   │   ├── dashboard/          # Dashboard components (per-role)
│   │   ├── home/               # Homepage sections (hero, featured, marquee)
│   │   ├── shared/             # Shared components (profile card, logo)
│   │   └── tutors/             # Tutor cards, filters, grid
│   └── ui/                     # shadcn/ui primitives
├── constants/                  # Role enums, booking statuses
├── hooks/                      # Custom React hooks
├── lib/                        # Auth client, utilities
├── middleware.ts               # Edge middleware (route protection)
├── providers/                  # Theme & context providers
├── routes/                     # Role-based route definitions
├── services/                   # API service layer (tutor, booking, payment, etc.)
└── types/                      # TypeScript type definitions

🗺️ Page Routes

Public Routes

Route	Description
`/`	Homepage with featured tutors and testimonials
`/tutors`	Tutor directory with search and filters
`/tutors/:id`	Individual tutor profile with availabilities
`/login`	User login
`/register`	User registration

Protected Dashboard Routes

Route	Role	Description
`/dashboard`	All	Role-specific overview
`/dashboard/edit-profile`	All	Edit user profile
`/dashboard/bookings`	All	View bookings (role-filtered)
`/dashboard/create-booking`	Student	Book a tutor's availability slot
`/dashboard/payment/payment-success`	Student	Post-payment confirmation page
`/dashboard/tutor-profile`	Tutor	Manage tutor profile
`/dashboard/teaching-categories`	Tutor	Manage teaching categories
`/dashboard/availability`	Tutor	Create/delete availability slots
`/dashboard/manage-tutors`	Admin	Manage all tutors on the platform
`/dashboard/manage-users`	Admin	Manage all users (ban, role change)
`/dashboard/manage-categories`	Admin	CRUD for teaching categories

✅ Getting Started

Prerequisites

Node.js v20+ (or Bun)
A running skillbridge-backend instance

1. Clone & Install

git clone https://github.com/Rezwan66/skillbridge-frontend.git
cd skillbridge-frontend
npm install

2. Configure Environment Variables

Create a .env file in the project root:

# BACKEND_URL=https://skillbridge-backend-phi.vercel.app
BACKEND_URL=http://localhost:5000
FRONTEND_URL=http://localhost:3000

# NEXT_PUBLIC_BACKEND=https://skillbridge-backend-phi.vercel.app
NEXT_PUBLIC_BACKEND=http://localhost:5000
NEXT_PUBLIC_FRONTEND=http://localhost:3000

# API_URL=https://skillbridge-backend-phi.vercel.app
API_URL=http://localhost:5000
# AUTH_URL=https://skillbridge-backend-phi.vercel.app/api/auth
AUTH_URL=http://localhost:5000/api/auth

NEXT_PUBLIC_BACKEND_URL=http://localhost:5000
# NEXT_PUBLIC_BACKEND_URL=https://skillbridge-backend-phi.vercel.app

3. Run the Development Server

npm run dev

The app will start at http://localhost:3000.

🧪 Useful Commands

Command	Description
`npm run dev`	Start development server with hot reload
`npm run build`	Build for production
`npm run start`	Start production server
`npm run lint`	Run ESLint

🔐 Authentication Flow

Users register with name, email, password, and role (Student or Tutor).
Login creates a session cookie via Better Auth.
Edge Middleware intercepts all /dashboard/* routes, validates the session against the backend, and enforces role-based access.
Protected route redirects preserve the intended destination through ?redirectPath= query parameters — even across the Register → Login chain.

🚀 Deployment

Deploy to Vercel with zero configuration:

Push to GitHub
Import into Vercel
Set environment variables (point API_URL and AUTH_URL to your deployed backend)
Deploy

Check out the Next.js deployment docs for more details.

Name		Name	Last commit message	Last commit date
Latest commit History 57 Commits
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
1_screen.png		1_screen.png
2_screen.png		2_screen.png
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

SkillBridge Frontend 🎓

🛠️ Tech Stack

📸 Screenshots

Homepage

Student Dashboard

✨ Key Features

📁 Project Structure

🗺️ Page Routes

Public Routes

Protected Dashboard Routes

🤖 AI Chatbot — Bridget

✅ Getting Started

Prerequisites

1. Clone & Install

2. Configure Environment Variables

3. Run the Development Server

🧪 Useful Commands

🔐 Authentication Flow

🚀 Deployment

🛠️ Tech Stack

📸 Screenshots

Homepage

Student Dashboard

✨ Key Features

📁 Project Structure

🗺️ Page Routes

Public Routes

Protected Dashboard Routes

✅ Getting Started

Prerequisites

1. Clone & Install

2. Configure Environment Variables

3. Run the Development Server

🧪 Useful Commands

🔐 Authentication Flow

🚀 Deployment

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages