A full-stack web application that helps students track their academic performance, get AI-powered insights for grade improvement, receive career advice, and find suitable teachers.
- User Authentication: Secure signup and login with Supabase Auth
- Major Selection: Choose your academic major during registration
- Course Management: Select and manage courses based on your major
- Grade Tracking: Input and track grades for all enrolled courses
- AI-Powered Analysis:
- Grade improvement suggestions
- Career advice based on performance
- Teacher recommendations
- Dashboard: Overview of academic performance with GPA calculation
- Teacher Database: Browse and contact recommended teachers
- React 18 with TypeScript
- Tailwind CSS for styling
- React Router for navigation
- Zustand for state management
- React Hot Toast for notifications
- Vite as build tool
- Supabase for:
- Authentication
- PostgreSQL Database
- Row Level Security (RLS)
- Real-time subscriptions
- Anthropic Claude API (ready to integrate)
- Prepared prompt templates for all analysis types
- Node.js 18+ and npm
- Supabase account
- Anthropic API key (optional, for AI features)
-
Clone the repository
git clone <repository-url> cd ai_student_analysis
-
Install dependencies
npm install
-
Set up environment variables
Create a
.envfile in the root directory:VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key VITE_ANTHROPIC_API_KEY=your_anthropic_api_key (optional)
-
Set up Supabase database
Follow the instructions in
SUPABASE_SETUP.mdto:- Create all required tables
- Enable Row Level Security
- Set up RLS policies
- Insert seed data
-
Start development server
npm run dev
The app will be available at
http://localhost:5173
src/
├── api/
│ └── analyze.ts # AI analysis functions
├── components/
│ ├── CourseCard.tsx # Course display component
│ ├── ErrorBoundary.tsx # Error handling
│ ├── LoadingSpinner.tsx # Loading states
│ ├── Navbar.tsx # Navigation bar
│ ├── ProtectedRoute.tsx # Route protection
│ └── TeacherCard.tsx # Teacher display
├── lib/
│ ├── supabase.ts # Supabase client
│ └── utils.ts # Utility functions
├── pages/
│ ├── AIAnalysis.tsx # AI insights page
│ ├── CourseSelection.tsx # Course selection page
│ ├── Dashboard.tsx # Main dashboard
│ ├── GradeInput.tsx # Grade entry page
│ ├── Login.tsx # Login page
│ └── SignUp.tsx # Registration page
├── store/
│ └── authStore.ts # Authentication state
├── types/
│ └── index.ts # TypeScript types
├── App.tsx # Main app component
├── main.tsx # App entry point
└── index.css # Global styles
-
Sign Up:
- User provides email, password, full name, and selects a major
- Account created in Supabase Auth
- User profile created in
userstable - Redirects to course selection
-
Login:
- User provides email and password
- Authenticates with Supabase
- Redirects to dashboard
-
Protected Routes:
- All main pages require authentication
- Automatic redirect to login if not authenticated
- users: User profiles linked to auth.users
- majors: Academic majors
- courses: Available courses per major
- teachers: Teacher profiles and specializations
- student_courses: Enrolled courses and grades
- ai_analyses: Historical AI analysis results
See SUPABASE_SETUP.md for detailed schema and setup instructions.
The application is set up to integrate with Anthropic's Claude API. To enable AI features:
-
Install the Anthropic SDK:
npm install @anthropic-ai/sdk
-
Add your API key to
.env:VITE_ANTHROPIC_API_KEY=your_key_here
-
Uncomment the actual API implementation in
src/api/analyze.ts
The system generates context-aware prompts for:
- Grade Improvement: Specific suggestions for each course
- Career Advice: Career paths aligned with major and performance
- Teacher Recommendations: Teaching style preferences based on student needs
- Responsive Design: Works on mobile, tablet, and desktop
- Modern Interface: Clean design with Tailwind CSS
- Loading States: Smooth loading indicators
- Toast Notifications: User feedback for actions
- Error Handling: Graceful error messages
- Accessibility: ARIA labels and keyboard navigation
# Development
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Lint code
npm run lint-
First Time Setup:
- Sign up with your email and password
- Select your major
- You'll be redirected to select courses
-
Select Courses:
- Browse available courses for your major
- Click "Add Course" to enroll
- Click "Save Courses" to persist changes
-
Input Grades:
- Navigate to "Grades" page
- Select grade, semester, and year for each course
- Click "Save Grades" or "Submit for AI Analysis"
-
Get AI Insights:
- Navigate to "AI Analysis" page
- Choose analysis type (Grade Improvement, Career Advice, or Teacher Recommendations)
- Click "Generate Analysis"
- View personalized recommendations
-
View Dashboard:
- See your total courses, current GPA, and analysis count
- Quick links to all major features
- Row Level Security (RLS) on all tables
- Students can only access their own data
- Secure authentication with Supabase
- Protected API routes
- Input validation and sanitization
- AI integration requires Anthropic API key (currently using mock responses)
- Teacher contact feature is a placeholder (needs email integration)
- No real-time collaboration features
- Limited to predefined majors and courses (admin panel needed for management)
- Admin panel for managing majors, courses, and teachers
- Real-time notifications
- Study group formation
- Integration with learning management systems
- Mobile app version
- Advanced analytics and reports
- Peer comparison (anonymized)
- Calendar integration for assignment tracking