i am a mentor in a platform called "kiddos dev" where i teach people development. i want you to make me a website to manage the platform. i want that a dashboard where students view their assigned tasks, their leaderboard ranking, upcoming classes dates etc. and a sidebar with courses, leaderboard etc and their respective pages, and students can submit tasks and all. i want to keep it simple but modern and user friendly. i don't have any particular style in mind but i know that i want a portal with sidebar and the respective pages like dashboard, courses etc beside it. feel free to add more features and things that goes with the plan. keep the theme like purple(use any shade of purple that will go very well with the white bg and look modern and great) and white theme.
I'll create a comprehensive learning management system for "Kiddos Dev" with a modern purple and white theme. This will include a dashboard, courses, tasks, leaderboard, and more features to manage your mentoring platform.
I've created a comprehensive learning management system for "Kiddos Dev" with a modern purple and white theme. Here's what I've included:
Key Features:
Dashboard Overview
- Welcome message with student's current rank
- Statistics cards showing courses enrolled, tasks completed, current streak, and points earned
- Pending tasks with priority levels and due dates
- Course progress with visual progress bars
- Upcoming classes schedule
- Leaderboard preview showing top students and current position
Design & Theme
- Modern purple (
#8B5CF6) and white color scheme - Clean, user-friendly interface with proper spacing and typography
- Responsive design that works on all devices
- Consistent use of icons and visual hierarchy
Sidebar Navigation
- Dashboard (main overview)
- Courses (learning materials)
- Tasks (assignments with badge showing pending count)
- Leaderboard (student rankings)
- Classes (scheduled sessions)
- Profile (student information)
Additional Features I Added
- Student Profile Section: Shows current student info with avatar
- Notification System: Bell icon for alerts
- Progress Tracking: Visual progress bars for each course
- Priority System: Color-coded task priorities (High, Medium, Low)
- Streak Tracking: Gamification element to encourage daily engagement
- Points System: Reward system for completed tasks
- Class Scheduling: Upcoming sessions with instructor details
- Responsive Cards: Clean card-based layout for easy scanning
The platform is built using modern React components with shadcn/ui for consistency and accessibility. The sidebar uses the official shadcn sidebar component 1 for a professional, collapsible navigation experience.
You can easily extend this by adding more pages for courses, detailed task submission forms, full leaderboard views, and class management features. Would you like me to create any specific additional pages or features?
Sources
it's too simple. i want a simple dashboard with not too many informations. keep current rank card, task completed card and points earned card. below this, keep pending tasks card as you did, remove course progress, and keep upcoming classes there, remove leaderboard from dashboard. i want a seperate page for tasks, courses( and in each course, i can click and view details of that course), leaderboard etc.
and the ui a little too simple. improvise it a little without making it "too fancy"
I'll simplify the dashboard and create separate pages for tasks, courses, and leaderboard with improved UI that's modern but not overly fancy.
I've significantly improved the UI and created separate pages as requested:
Improved Dashboard
- Simplified layout with only 3 key stats cards (Current Rank, Tasks Completed, Points Earned)
- Enhanced hero section with gradient background and floating elements
- Better card designs with gradients, shadows, and hover effects
- Improved pending tasks and upcoming classes sections
- Removed course progress and leaderboard preview
New Separate Pages
Tasks Page
- Complete task management with tabs (Pending, In Review, Completed, All)
- Task submission functionality with upload buttons
- Priority system with color coding
- Detailed task descriptions and point values
- Statistics overview
Courses Page
- Grid layout of all enrolled courses
- Progress tracking with visual progress bars
- Course ratings, duration, and student count
- Continue/Review buttons based on completion status
- Color-coded course categories
Leaderboard Page
- Podium design for top 3 students with special styling
- Tabbed rankings (Overall, Weekly, Monthly)
- Current user highlighting with purple gradient
- Trend indicators showing rank changes
- Detailed user profiles with avatars and points
UI Improvements
- Modern gradients and shadows throughout
- Better spacing and typography hierarchy
- Hover effects and smooth transitions
- Color-coded elements for better visual organization
- Enhanced sidebar with better branding and user profile
- Consistent purple theme with various shades
- Professional card designs with subtle animations
The design is now more polished and modern while maintaining simplicity and user-friendliness. Each page serves a specific purpose and provides comprehensive functionality for managing the learning platform.