🗓️ Planora — Frontend

A role-based event-management platform built with Next.js

Users can discover events, request or confirm participation, submit reviews, and manage their profiles. Organizers can create events and manage participants, while administrators can manage the complete platform.

---

🔗 Live Application

Service	URL
Frontend	YOUR_VERCEL_FRONTEND_URL
Backend API	YOUR_RENDER_BACKEND_URL

---

✨ Main Features

Discovery & Public Responsive public homepage Light and dark modes Event search, filtering, sorting, and pagination Public, private, free, and paid event types Event details and related events Global loading, error, and 404 interfaces

Accounts & Roles Firebase email/password authentication Google authentication User, Organizer, and Administrator roles Editable user profiles Role-specific dashboards

Management & Data Event participation and approval workflow Reviews and ratings Dynamic analytics charts Organizer event CRUD Participant approval, rejection, and banning Administrator user, event, and review management Responsive tables and mobile navigation

---

🛠️ Technologies

Category	Stack
Framework	Next.js, React, TypeScript
Styling	Tailwind CSS
Auth	Firebase Authentication
Data & Forms	Axios, React Hook Form, Zod
UI & Visualization	Recharts, Sonner, Lucide React
Utilities	date-fns

---

🚀 Local Installation

1. Clone the repository

git clone YOUR_FRONTEND_REPOSITORY_URL
cd planora-client

2. Install packages

npm install

3. Create .env.local using .env.example

NEXT_PUBLIC_API_URL=http://localhost:5000/api/v1
NEXT_PUBLIC_SITE_URL=http://localhost:3000

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

4. Start the application

npm run dev

5. Open in your browser

http://localhost:3000

---

✅ Verification Commands

npm run typecheck
npm run build

Or run all checks at once:

npm run check

---

👤 Demo Accounts

Role	Email	Password
🛡️ Administrator	admin@planora.com	PlanoraAdmin123!
📋 Organizer	organizer@planora.com	PlanoraOrg123!
🙋 User	user@planora.com	PlanoraUser123!

---

🗺️ Main Routes

Public / /events /events/[slug] /about /contact /privacy /login /register

User Dashboard /dashboard /dashboard/profile /dashboard/joined-events /dashboard/reviews

Organizer & Admin /dashboard/events /dashboard/events/new /dashboard/events/[id]/edit /dashboard/events/[id]/participants /dashboard/admin/users /dashboard/admin/events /dashboard/admin/reviews

---

☁️ Deployment

• The frontend is configured for deployment on Vercel. Add all NEXT_PUBLIC_ environment variables to the Vercel project before deploying.
• The backend is deployed separately on Render and must allow the production Vercel domain through its CORS configuration.

---

📁 Repository Structure

src/
├── app/
├── components/
│   ├── auth/
│   ├── common/
│   ├── dashboard/
│   ├── events/
│   ├── home/
│   ├── layout/
│   ├── providers/
│   └── ui/
├── constants/
├── context/
├── hooks/
├── lib/
├── schemas/
└── types/

---

🎓 Academic Project

Planora was developed as a full-stack academic project demonstrating authentication, authorization, API integration, CRUD operations, role-based dashboards, responsive design, data visualization, and production deployment.