nextplacement/apps/student

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.