AI-Powered Student Success Prediction Dashboard
EduPredict is an innovative AI-powered student success prediction platform with a fun comic book-inspired UI. It helps educators and institutions identify at-risk students early and take proactive measures to improve academic outcomes.
- 🎯 Predictive Analytics - AI-powered grade predictions based on attendance, assignments, and more
- 📊 Interactive Dashboards - Role-based dashboards for Students, Faculty, and Administrators
- 🎮 Gamification - XP system, levels, and achievements to motivate students
- 📖 Comic Strip Stories - Engaging visual narratives that explain academic journeys
- 🌙 Theme Modes - Light, Dark, and unique "Inked" comic book mode
- 🔔 Real-time Alerts - Smart notifications for at-risk students
- 📄 Report Generation - Downloadable performance reports
- 🎨 Comic Book Design - Fun, engaging UI with sticker badges, speech bubbles, and animations
| Technology | Purpose |
|---|---|
| React 18 | UI Framework |
| TypeScript | Type Safety |
| Vite | Build Tool & Dev Server |
| Tailwind CSS | Styling |
| Framer Motion | Animations |
| shadcn/ui | UI Components |
| React Router | Navigation |
| Recharts | Data Visualization |
| Lucide Icons | Iconography |
| Zod | Form Validation |
- Node.js 18+ and npm installed (install with nvm)
# Clone the repository
git clone https://github.com/VARA4u-tech/student-success-comic.git
# Navigate to the project directory
cd student-success-comic
# Install dependencies
npm install
# Start the development server
npm run devThe application will open at http://localhost:5173
src/
├── assets/ # Images and static assets
├── components/ # Reusable UI components
│ ├── ui/ # shadcn/ui components
│ ├── ComicButton.tsx
│ ├── ComicCard.tsx
│ ├── ComicStrip.tsx
│ ├── Navbar.tsx
│ ├── Footer.tsx
│ └── ...
├── context/ # React Context providers
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── pages/ # Page components
│ ├── LandingPage.tsx
│ ├── StudentDashboard.tsx
│ ├── FacultyDashboard.tsx
│ ├── AdminDashboard.tsx
│ └── ...
├── App.tsx # Main app with routing
├── index.css # Global styles & design system
└── main.tsx # Entry point
EduPredict uses a unique comic book-inspired design system with:
- Bold borders and comic-style shadows
- Vibrant color palette (Yellow, Red, Green, Blue accents)
- Custom fonts (Bangers for headings, Comic Neue for body text)
- Sticker badges and animated elements
- Halftone patterns and action backgrounds
- Landing Page - Hero section, features, testimonials
- About Page - Mission and values
- Help/FAQ Page - Common questions and support
- Contact Page - Contact form and information
- Student Dashboard - Personal performance, predictions, recommendations
- Faculty Dashboard - Class overview, student tracking
- Admin Dashboard - Institution-wide analytics, alerts
- Prediction Page - Interactive "What If" scenario analysis
- Reports Page - Downloadable analytics and charts
| Script | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
VARA4u-tech
- GitHub: @VARA4u-tech
Engineered & Deigned With 💡 By VARA for Education
🎓 Empowering Students, One Prediction at a Time! 🚀