🎨 This repository contains the Frontend application for PlaniT. For backend implementation and full API documentation, see: https://github.com/trace-kadenyi/PlaniT-API

PlaniT — Full Stack Event Management System

PlaniT is a SaaS event management platform that gives organizations a clean, role-aware interface for managing events, vendors, budgets, and tasks — with real-time financial tracking, expense audit logs, and team collaboration built in. The UI supports both dark and light mode across all views.

---

🌍 Architecture Overview

PlaniT is split into two independent repositories, enabling separate development, deployment, and scaling:

Repository	Stack
Frontend (this repo)	React, Redux Toolkit, React Router, Tailwind CSS
Backend API	Node.js, Express.js, MongoDB, Mongoose, JWT

---

🧱 Tech Stack

Technology	Role
React	UI component library and rendering
Redux Toolkit	Global state management — auth, events, users, expenses
React Router	Client-side routing and protected route handling
Axios	HTTP client for all API communication
Tailwind CSS	Utility-first styling with dark/light mode support
Framer Motion	Page transitions and UI animations
Supabase	Expense receipt storage

---

✨ Features

• Role-based UI — components and actions render conditionally based on the authenticated user's role and permissions
• Dark & light mode — full theme support across all views
• Financial tracking — live budget vs. expense status per event with over-budget warnings
• Expense audit log — full history of expense mutations with user attribution
• Team management — invite, update roles, deactivate and reactivate users
• Archive & restore — soft deletion flow for events, clients, and vendors
• Protected routes — unauthenticated users are redirected; unauthorized roles see restricted views

---

🔐 Auth & State Management

Client-side Auth Flow

• JWT access token stored in memory; refresh token handled via httpOnly cookie
• Silent token renewal runs automatically via Axios interceptors on 401 responses
• Auth state is managed in a dedicated Redux slice and persisted across page refreshes via the refresh token flow
• Protected routes check auth state before rendering; unauthorized roles are redirected

State Structure

Redux Toolkit slices are organized by domain:

• authSlice — user session, role, and token state
• eventsSlice — event list, selected event, loading/error states
• expensesSlice — expenses per event, budget status, audit logs
• usersSlice — organization members and role management
• clientsSlice / vendorsSlice / tasksSlice — respective resource state

---

📸 Screenshots

Dashboard

Overview of active events, upcoming tasks, and key metrics at a glance.

Events Board

Browse, filter, archive, and manage all organization events.

Task Board

Track tasks tied to specific events with status updates.

Event Details

Deep-dive into a single event — linked clients, vendors, budget, and tasks in one view.

Budget & Expenses

Live budget tracking with running totals, remaining budget, and over-budget alerts.

Expense Audit Log

Full mutation history for expenses — who changed what and when.

Team Management

Invite team members, assign roles, and manage account status.

User Profile

Personal profile management with update history.

Client Directory

Searchable client directory with linked event history per client.

Vendor Directory

Manage vendors, view stats, and archive inactive records.

---

🛠 Local Development

Prerequisites

• Node.js v18+
• PlaniT backend API running locally on port 4000

Setup

git clone https://github.com/trace-kadenyi/PlaniT.git
cd PlaniT
npm install
npm run dev

Environment Variables

Create a .env file in the project root:

VITE_API_BASE_URL=http://localhost:4000
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

---

🧪 Roadmap

• Skeleton loading states for improved perceived performance
• Mobile-responsive layouts
• E2E test coverage with Cypress
• CI/CD pipeline (GitHub Actions)
• Real-time updates via WebSockets
• Role hierarchy expansion for more granular UI permissions
• Notification system for budget alerts and task deadlines

---

🧠 Engineering Philosophy

• Component-driven architecture with clear separation between UI and state logic
• Auth and permission checks co-located with routing, not scattered across components
• Financial validation enforced on the server — the UI reflects state, never trusts it
• Modular Redux slices designed to scale with new resource types
• Consistent UX patterns across all CRUD flows regardless of resource type

---

📎 Repositories

• Frontend: PlaniT
• Backend API: PlaniT-API

---

👤 Author

Tracey Kadenyi

📧 treykadenyi@gmail.com  •  💻 GitHub  •  🔗 LinkedIn  •  ✍🏽 Medium  •  🌐 Website

---

📄 License

This project is licensed under the MIT License.