Skip to content

README.md

Latest commit

 

History

History
148 lines (102 loc) · 6.55 KB

README.md

File metadata and controls

148 lines (102 loc) · 6.55 KB

🚀 LevelUp – Frontend

React TypeScript Vite Tailwind CSS License

The modern, responsive client for LevelUp, a platform that transforms academic tasks into an RPG-style adventure. Built with the latest web standards, this Single Page Application (SPA) provides students with a visually engaging interface to track progress, complete quests, and compete on global leaderboards.

✨ Key Features

🔐 Authentication & Security

  • Secure Access: Dedicated Login and Registration screens with client-side validation using React Hook Form.
  • JWT Management: Token-based authentication stored in LocalStorage with automated Axios interceptors for handling 401/403 errors.
  • Role-Based Access: Centralized AuthContext manages User vs. Admin roles, protecting routes and UI elements accordingly.

📊 Interactive Dashboard

  • Real-time Progression: Visualizes Level, Total XP, and Daily Streaks with animated progress bars and pulse effects.
  • Quest Engine: Manages daily tasks with three distinct states: PENDING, VERIFYING (with polling), and COMPLETED.
  • Visual Feedback: Integrated Confetti effects and Toast notifications celebrate level-ups, task submissions, and milestones.

🛡️ Reliable UX & Performance

  • Global Notifications: Centralized GlobalToast system for consistent success and error feedback across the entire app.
  • Error Resilience: ErrorBoundary components catch and handle runtime crashes gracefully, providing a fallback UI.
  • Optimized Loading: Route-based Code Splitting using React.lazy and Suspense ensures faster initial page loads.

🏆 Gamification UI

  • Achievement Gallery: A rich grid layout displaying locked and unlocked badges with detailed unlock conditions.
  • Global Leaderboard: A competitive table highlighting the user's rank against students from all other faculties.
  • Dynamic UI: Utilizes Lucide icons and Tailwind animations (float, slide-in, scale) for an immersive experience.

🛡️ Admin Dashboard

  • User Management: dedicated interface for Administrators to view all registered users.
  • CRUD Operations: Edit user stats (Level, XP, Streak), change roles, or delete users directly from the UI.

🛠️ Tech Stack

  • Framework: React 19 + TypeScript
  • Build Tool: Vite 7
  • Styling: Tailwind CSS v4 (Catppuccin Mocha Palette)
  • Routing: React Router DOM v7
  • State Management: React Context API & Custom Hooks
  • HTTP Client: Axios (with Global Interceptors)
  • Icons: Lucide React
  • Validation: React Hook Form

📸 Screenshots

Login Screen Student Dashboard
Login Screen Dashboard
Achievements Global Leaderboard
Achievements Leaderboard

🚀 Getting Started

1. Prerequisites

  • Node.js (LTS version)
  • LevelUp Backend running locally on port 8080 (Check the Backend Repo for setup).

2. Installation

# Clone the repository
git clone [https://github.com/l4aaa/LevelUP-frontend.git](https://github.com/l4aaa/LevelUP-frontend.git)
cd LevelUP-frontend

# Install dependencies
npm install

3. Configuration

The application is pre-configured to connect to http://localhost:8080/api via src/services/api.ts. If your backend runs elsewhere, update the baseURL in that file.

4. Development Server

Start the Vite development server:

npm run dev

The application will launch at http://localhost:5173.

📂 Project Structure

src/
├── components/      # Reusable UI components (Toast, Confetti, AchievementPopup)
├── constants/       # Global constants (API paths, Storage keys)
├── context/         # React Context for global Auth and Role state
├── pages/           # View components and Page-specific hooks
├── services/        # API services and Axios configuration
├── types/           # TypeScript interfaces (User, Task, DashboardData)
├── App.tsx          # Main routing and global providers
└── index.css        # Tailwind directives and custom animations

🎨 Theme & Styling

LevelUp uses the Catppuccin Mocha color palette for a soft, high-contrast dark mode experience.

  • Base: #1e1e2e (Background)
  • Mauve: #cba6f7 (Primary Accents)
  • Blue: #89b4fa (Secondary Accents)
  • Green: #a6e3a1 (Success States)
  • Peach: #fab387 (Warnings/Verifying)
  • Yellow: #f9e2af (Gold/Achievements)

🤝 Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingUI)
  3. Commit your changes (git commit -m 'Add some AmazingUI')
  4. Push to the branch (git push origin feature/AmazingUI)
  5. Open a Pull Request

📝 License

Distributed under the MIT License.