172 lines
6.1 KiB
Markdown
172 lines
6.1 KiB
Markdown
# Student Dashboard - NextPlacement
|
|
|
|
A modern, student-focused dashboard for job discovery and application management.
|
|
|
|
## 🎨 Design Philosophy
|
|
|
|
The student dashboard has been completely redesigned with a different UI/UX approach compared to the admin dashboard:
|
|
|
|
- **Student-Centric**: Focused on job discovery and career opportunities
|
|
- **Modern & Engaging**: Gradient backgrounds, interactive cards, and smooth animations
|
|
- **Mobile-First**: Responsive design that works perfectly on all devices
|
|
- **Intuitive Navigation**: Clear, student-focused navigation structure
|
|
|
|
## 🚀 Features
|
|
|
|
### 1. **Hero Section**
|
|
- Inspirational messaging focused on career discovery
|
|
- Call-to-action buttons for job browsing and saved jobs
|
|
- Gradient background with engaging visuals
|
|
|
|
### 2. **Statistics Dashboard**
|
|
- Real-time stats showing active companies, open positions, student count
|
|
- Visual indicators with icons and color-coded metrics
|
|
- Success rate tracking
|
|
|
|
### 3. **Featured Companies**
|
|
- Showcase of top companies with active job postings
|
|
- Company cards with job previews
|
|
- Quick access to company-specific job listings
|
|
|
|
### 4. **Recent Job Opportunities**
|
|
- Latest job postings from all companies
|
|
- Detailed job cards with company information
|
|
- Quick apply functionality with resume selection
|
|
|
|
### 5. **Job Applications Tracking**
|
|
- Comprehensive view of all submitted applications
|
|
- Status tracking (Pending, Under Review, Accepted, Rejected)
|
|
- Application history with company and job details
|
|
|
|
### 6. **Student Profile Management**
|
|
- Complete profile information management
|
|
- Academic details and skills showcase
|
|
- Resume upload and management
|
|
- Social media links integration
|
|
|
|
## 🛠 Technical Implementation
|
|
|
|
### Backend Integration
|
|
- **Database Schema**: Uses the existing schema with `students`, `jobs`, `companies`, `applications`, and `resumes` tables
|
|
- **Server Actions**: New actions for job applications, profile management, and data fetching
|
|
- **Real-time Data**: Dynamic data fetching with proper error handling
|
|
|
|
### Key Components
|
|
|
|
#### 1. **Layout (`layout.tsx`)**
|
|
- Student-specific navigation with blue color scheme
|
|
- Responsive design with mobile menu
|
|
- Profile dropdown with student information
|
|
|
|
#### 2. **Dashboard (`page.tsx`)**
|
|
- Hero section with career-focused messaging
|
|
- Statistics cards with real data
|
|
- Featured companies showcase
|
|
- Recent job opportunities grid
|
|
|
|
#### 3. **Applications (`applications/page.tsx`)**
|
|
- Application status tracking
|
|
- Detailed application history
|
|
- Export functionality
|
|
- Status-based filtering
|
|
|
|
#### 4. **Profile (`profile/page.tsx`)**
|
|
- Comprehensive profile management
|
|
- Academic information display
|
|
- Skills showcase
|
|
- Resume management
|
|
|
|
#### 5. **Jobs (`jobs/page.tsx`)**
|
|
- Job browsing with search and filters
|
|
- Detailed job cards
|
|
- Application modal integration
|
|
- Company information display
|
|
|
|
#### 6. **Job Application Modal (`components/job-application-modal.tsx`)**
|
|
- Interactive application form
|
|
- Resume selection
|
|
- Real-time validation
|
|
- Success/error messaging
|
|
|
|
## 🎯 Key Differences from Admin Dashboard
|
|
|
|
| Aspect | Admin Dashboard | Student Dashboard |
|
|
|--------|----------------|-------------------|
|
|
| **Color Scheme** | Red/Pink gradients | Blue/Indigo gradients |
|
|
| **Navigation** | Admin-focused (Dashboard, Students, Jobs) | Student-focused (Home, Applications, Profile) |
|
|
| **Layout** | Data-heavy, management-focused | Career-focused, opportunity-driven |
|
|
| **Interactions** | CRUD operations, data management | Job discovery, applications, profile management |
|
|
| **Visual Style** | Professional, corporate | Modern, engaging, student-friendly |
|
|
|
|
## 🔧 Backend Actions
|
|
|
|
### New Server Actions Added:
|
|
|
|
1. **`applyForJob(jobId, studentId, resumeId)`**
|
|
- Handles job application submission
|
|
- Prevents duplicate applications
|
|
- Updates application status
|
|
|
|
2. **`getStudentApplications(studentId)`**
|
|
- Fetches all applications for a student
|
|
- Includes job and company details
|
|
- Status tracking
|
|
|
|
3. **`getStudentProfile(studentId)`**
|
|
- Retrieves complete student profile
|
|
- Includes grades, resumes, internships
|
|
|
|
4. **`updateStudentProfile(studentId, data)`**
|
|
- Updates student profile information
|
|
- Handles validation and error cases
|
|
|
|
5. **`getAvailableJobs()`**
|
|
- Fetches all active job postings
|
|
- Includes company information
|
|
|
|
6. **`getFeaturedCompanies()`**
|
|
- Gets top companies with active jobs
|
|
- Sorted by job count
|
|
|
|
## 🎨 UI Components Used
|
|
|
|
- **Cards**: For job listings, company showcases, and profile sections
|
|
- **Buttons**: Various styles for different actions
|
|
- **Badges**: Status indicators and skill tags
|
|
- **Dialogs**: Application modals and confirmations
|
|
- **Forms**: Profile editing and application submission
|
|
- **Icons**: Lucide React icons for visual consistency
|
|
|
|
## 🚀 Getting Started
|
|
|
|
1. **Installation**: The dashboard is part of the monorepo structure
|
|
2. **Database**: Ensure the database schema is up to date
|
|
3. **Authentication**: Student authentication should be configured
|
|
4. **Development**: Run the student app with `pnpm dev` in the student directory
|
|
|
|
## 📱 Responsive Design
|
|
|
|
The dashboard is fully responsive with:
|
|
- Mobile-first approach
|
|
- Tablet-optimized layouts
|
|
- Desktop-enhanced features
|
|
- Touch-friendly interactions
|
|
|
|
## 🔮 Future Enhancements
|
|
|
|
- **Real-time Notifications**: WebSocket integration for application updates
|
|
- **Advanced Filtering**: More sophisticated job search and filtering
|
|
- **Resume Builder**: Integrated resume creation tool
|
|
- **Interview Scheduling**: Calendar integration for interviews
|
|
- **Analytics Dashboard**: Personal application analytics
|
|
- **Social Features**: Student networking and recommendations
|
|
|
|
## 🎯 User Experience Goals
|
|
|
|
1. **Easy Job Discovery**: Students can quickly find relevant opportunities
|
|
2. **Simple Application Process**: Streamlined job application workflow
|
|
3. **Clear Status Tracking**: Transparent application status updates
|
|
4. **Profile Management**: Easy profile updates and maintenance
|
|
5. **Mobile Accessibility**: Full functionality on mobile devices
|
|
|
|
This student dashboard provides a modern, engaging experience that helps students discover career opportunities and manage their job applications effectively. |