🌟 The Vibrant Generation Portal

A comprehensive digital platform for youth development, empowering teenagers through faith-based leadership, technical skills, and community engagement.

📖 Overview

The Vibrant Generation Portal is a full-stack application designed to serve as both a public-facing website and a private learning management system (LMS). It provides a seamless experience for members to learn, interact, and grow.

Key Features

• Learning Management: Interactive courses with video/text lessons and progress tracking.
• Certificates: Automated PDF certificate generation upon course completion.
• Payment Integration: Secure course purchase and donation system via Paystack and Flutterwave.
• Community Forum: A space for members to discuss, share ideas, and support each other.
• Member Portal: Personalized dashboard with stats, enrolled courses, and achievements.
• Tutor Dashboard: Comprehensive interface for instructors to create and manage courses, track student progress, and view performance analytics.
• Public Website: Information about programmes, mission, and a donation system.
• Admin Dashboard: Platform-wide analytics and integrated Content Management System (CMS) for managing convener info, galleries, and videos.
• CMS Management: Dynamic control over website content including program photos and video showcases.

---

🏗️ Architecture

The project follows a modern full-stack architecture using React (Vite) for the frontend and Express (Node.js) for the backend.

Tech Stack

• Frontend: React 19, Tailwind CSS, Zustand (State Management), React Query (Data Fetching), Lucide Icons.
• Backend: Express.js, Sequelize ORM, JWT Authentication, Bcrypt.
• Database: SQLite (Development/Preview) / MySQL (Local Production).

Directory Structure

├── server/             # Backend source code
│   ├── server.ts       # Express entry point
│   └── src/            # Models, Routes, and Database config
├── src/                # Frontend source code
│   ├── components/     # Reusable UI and Layout components
│   ├── pages/          # Website and Portal pages
│   ├── services/       # API client and services
│   └── store/          # Global state (Zustand)
├── public/             # Static assets
└── docs/               # Documentation (see below)

---

📚 Documentation

For detailed information, please refer to the following files:

• Local Setup Guide: Steps to run the app on Windows with MySQL.
• Database Schema: MySQL table definitions and relationships.
• Project Progress: Current status and roadmap.
• Environment Variables: Required configuration keys.

---

🚀 Getting Started

Online Preview

The application is configured for immediate preview in AI Studio using an internal SQLite database.

Local Development

1. Run node setup.js to install dependencies and create a .env file.
2. Configure your MySQL database as per README_LOCAL.md.
3. Run npm run dev to start the development server.

---

🔑 Demo Credentials

• Admin: admin@vibrantgen.org / admin123
• Tutor: tutor@vibrantgen.org / tutor123
• Student: student@vibrantgen.org / student123

---

Built with ❤️ for The Vibrant Generation.