Skip to content

Repository files navigation

🎓 AI-Powered Student Dashboard

Your Ultimate Productivity Companion for Academic Excellence

Live Demo React Tailwind CSS Firebase License: MIT

A modern, lightning-fast student productivity dashboard with AI-powered task management, real-time collaboration, and intelligent study planning.

FeaturesDemoTech StackInstallationScreenshotsContributing


Dashboard Preview


🌟 Why This Project?

Built for students who want to maximize productivity without the complexity. This dashboard combines cutting-edge AI technology with an intuitive interface to help you:

  • Organize tasks with smart AI breakdowns
  • 📝 Take quick notes with color-coded organization
  • 📚 Plan study sessions with hour tracking
  • 🤖 Chat with AI tutor powered by GPT-4o
  • 💬 Collaborate with friends via real-time messaging
  • 📊 Track progress with visual analytics

No login required100% FreeWorks OfflineLightning Fast


✨ Features

🎯 Core Features

📋 Smart Task Management

  • ✅ Create, edit, delete tasks instantly
  • 🎯 Mark tasks as complete
  • 🔄 Real-time updates
  • 💾 Auto-save to localStorage
  • 🎨 Beautiful UI with animations

🤖 AI Task Assistant

  • 🧠 Break down complex tasks
  • 📝 Generate step-by-step plans
  • ⚡ Instant AI suggestions
  • 🎓 Study-focused recommendations
  • 🔮 Smart task decomposition

📝 Quick Notes

  • 🎨 5 color themes
  • 🔍 Search functionality
  • 📅 Auto-dated entries
  • 💡 Sticky note design
  • ⚡ Instant save

📚 Study Planner

  • ⏰ Track study hours per subject
  • 📊 Weekly hour calculation
  • 🎯 Subject management
  • 📈 Visual progress tracking
  • 🗓️ Smart scheduling

💬 Real-Time Messaging

  • 👥 Private friend-to-friend chat
  • 🔒 Secure messaging
  • ⚡ Instant delivery
  • 📱 Mobile responsive
  • 🔔 Message notifications

🤝 Social Features

  • 🔍 Search users by email/name
  • 👋 Send friend requests
  • ✅ Accept/decline requests
  • 👥 Manage friend list
  • 🔗 Real-time updates

📊 Analytics Dashboard

  • 📈 Task completion rate
  • 📉 Progress visualization
  • 🎯 Study time breakdown
  • 📊 Performance metrics
  • 🏆 Achievement tracking

🎨 Modern UI/UX

  • 🌙 Dark/Light mode
  • 📱 Fully responsive
  • ⚡ Smooth animations
  • 🎯 Intuitive navigation
  • 💎 Premium design

🚀 Live Demo

No signup required! Start using immediately with localStorage persistence.


🛠️ Tech Stack

Frontend

  • React 19 - Latest React with concurrent features
  • Vite - Lightning-fast build tool
  • Tailwind CSS - Utility-first styling
  • Lucide React - Beautiful icon library
  • React Router - Client-side routing

Backend & Services

  • Firebase - Authentication & Firestore database
  • OpenAI GPT-4o - AI-powered task assistance
  • Vercel - Serverless deployment
  • LocalStorage - Offline data persistence

Features

  • PWA Support - Install as mobile/desktop app
  • Offline Mode - Works without internet
  • Real-time Sync - Live data updates
  • Responsive Design - Mobile-first approach

📸 Screenshots

🏠 Dashboard Home

Dashboard

🤖 AI Task Assistant

AI Assistant

💬 Real-Time Messaging

Messages

📊 Analytics

Analytics


⚡ Quick Start

Prerequisites

  • Node.js 18+ installed
  • npm or yarn package manager

Installation

# 1. Clone the repository
git clone https://github.com/ashariftikhar/AI-powered-Student-dashboard.git

# 2. Navigate to project directory
cd AI-powered-Student-dashboard

# 3. Install dependencies
npm install

# 4. Start development server
npm run dev

# 5. Open browser
# Visit http://localhost:5173

Build for Production

# Create optimized production build
npm run build

# Preview production build
npm run preview

🔧 Configuration

Firebase Setup (Optional)

  1. Create a Firebase project at console.firebase.google.com
  2. Enable Authentication and Firestore
  3. Copy your config to src/firebase.js
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  // ... other config
};

OpenAI API (Optional)

For AI features, add your OpenAI API key:

// src/services/aiService.js
const OPENAI_API_KEY = "your-api-key-here";

📁 Project Structure

AI-powered-Student-dashboard/
├── src/
│   ├── components/
│   │   ├── features/          # Feature components
│   │   │   ├── TaskManager.jsx
│   │   │   ├── Notes.jsx
│   │   │   ├── StudyPlanner.jsx
│   │   │   └── AITaskAssistant.jsx
│   │   ├── layout/            # Layout components
│   │   │   ├── Header.jsx
│   │   │   ├── Sidebar.jsx
│   │   │   └── Layout.jsx
│   │   └── ui/                # UI components
│   │       ├── ThemeToggle.jsx
│   │       └── Toast.jsx
│   ├── pages/                 # Page components
│   │   ├── Dashboard.jsx
│   │   ├── Team.jsx
│   │   ├── Messages.jsx
│   │   ├── Analytics.jsx
│   │   └── AIChat.jsx
│   ├── services/              # API services
│   │   ├── firestoreService.js
│   │   ├── guestService.js
│   │   └── aiService.js
│   ├── context/               # React context
│   │   └── AuthContext.jsx
│   ├── hooks/                 # Custom hooks
│   │   └── useFirestore.js
│   └── App.jsx                # Main app component
├── public/                    # Static assets
├── package.json
└── vite.config.js

🎯 Key Features Explained

🤖 AI Task Assistant

The AI assistant uses GPT-4o to break down complex tasks into manageable steps:

// Example: "Prepare for Finals"
// AI generates:
1. Review all lecture notes
2. Create summary sheets
3. Practice past papers
4. Form study group
5. Schedule review sessions

📝 Smart Notes System

Color-coded notes with instant search:

  • 🟡 Yellow - General notes
  • 🔵 Blue - Important info
  • 🟢 Green - Ideas
  • 🟣 Purple - Reminders
  • 🔴 Pink - Urgent

📊 Analytics Dashboard

Track your productivity with:

  • Task completion percentage
  • Study hours per subject
  • Weekly progress charts
  • Performance trends

🌐 Browser Support

Browser Version
Chrome ✅ Latest
Firefox ✅ Latest
Safari ✅ Latest
Edge ✅ Latest
Opera ✅ Latest

🚀 Performance

  • Lighthouse Score: 95+
  • 🎯 First Contentful Paint: < 1.5s
  • 📦 Bundle Size: ~720KB (gzipped: ~223KB)
  • 🔄 Time to Interactive: < 2s
  • 💾 Offline Support: Full PWA capabilities

🤝 Contributing

Contributions are welcome! Here's how you can help:

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

Development Guidelines

  • Follow existing code style
  • Write meaningful commit messages
  • Add comments for complex logic
  • Test before submitting PR
  • Update documentation if needed

🐛 Bug Reports

Found a bug? Please open an issue with:

  • Clear description
  • Steps to reproduce
  • Expected vs actual behavior
  • Screenshots (if applicable)
  • Browser/OS information

💡 Feature Requests

Have an idea? Open an issue with:

  • Feature description
  • Use case/benefit
  • Possible implementation approach

📝 Roadmap

🔜 Coming Soon

  • Pomodoro timer integration
  • Calendar view for tasks
  • File attachments in notes
  • Task categories/tags
  • Export data (PDF/CSV)
  • Mobile app (React Native)
  • Browser extension
  • Collaborative study rooms

🎯 Future Plans

  • Gamification & achievements
  • AI study recommendations
  • Integration with Google Calendar
  • Voice notes support
  • Advanced analytics
  • Multi-language support

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License - Free to use, modify, and distribute

👨‍💻 Author

Ashar Iftikhar


🙏 Acknowledgments

  • React Team - For the amazing framework
  • Tailwind CSS - For the utility-first CSS
  • OpenAI - For GPT-4o API
  • Firebase - For backend services
  • Vercel - For seamless deployment
  • Lucide - For beautiful icons

⭐ Show Your Support

If this project helped you, please consider:

  • Star this repository
  • 🍴 Fork and contribute
  • 📢 Share with friends
  • 💬 Provide feedback

📞 Contact & Support


🎓 Built with ❤️ for Students Everywhere

Made by students, for students

Deploy with Vercel


⭐ Star this repo if you found it helpful!

About

AI-powered student productivity dashboard. React 19 + Firebase + GPT-4o. No signup required.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages