A comprehensive school management system built with Next.js, Tailwind CSS, and modern web technologies to streamline educational institution operations.
- Clone the repository
git clone https://github.com/onesmuskipchumba0/StudentsAdminDashboard.git cd StudentsAdminDashboard - Add new features to the project
cd StudentsAdminDashboard
git checkout -b feature/new-feature-
Install dependencies
npm install cd backend npm install cd .. cd frontend npm install # or yarn install -
Set up environment variables
PORT=5000 MONGO_URI=Your MongoDB URI FRONTEND_URL=http://localhost:3000
-
Run the development server
npm run dev # or yarn dev -
Build for production
npm run build # or yarn build
A sleek, animated landing page built with Next.js and Tailwind CSS for a school management system. Features smooth animations, responsive design, and modern UI components.
- Gradient background with animated blob effects
- Smooth slide-in animations
- Call-to-action buttons with hover effects
- Responsive text scaling
- Grid layout with hover animations
- Icon transitions
- Fade-in animations on scroll
- Interactive cards with elevation effects
- Animated counters
- Gradient text effects
- Responsive grid layout
- Fade-in animations
- Glassmorphism effects
- Gradient overlays
- Smooth transitions
- Responsive padding and spacing
A comprehensive dashboard component built with Next.js and Tailwind CSS, featuring interactive charts, statistics cards, and activity monitoring for educational institutions.
- Total Students Counter
- Active Courses Tracker
- Revenue Display
- Completion Rate Monitor
- Responsive grid layout
- Color-coded categories
-
Enrollment Trends
- Monthly student enrollment tracking
- Line chart visualization
- 7-month historical data
-
Course Distribution
- Visual representation of course categories
- Interactive pie/donut chart
- Color-coded segments
-
Attendance Analytics
- Daily/Weekly attendance patterns
- Visual attendance tracking
- Trend analysis
- Real-time activity updates
- Chronological event listing
- Activity categorization
A comprehensive set of components for managing students and academic events in an educational institution. Built with Next.js and TypeScript, featuring responsive tables, filters, and calendar views.
- Searchable student database
- Status filtering (Active/Inactive/Suspended)
- Pagination system
- CRUD operations
- Responsive data table
- Dual view modes (Calendar/List)
- Event filtering by type
- Event management
- Interactive calendar interface
- Chronological event listing
- Academic year planning
- Event scheduling and management
- Holiday and term date tracking
- Automated notifications for important dates
- Fee structure management
- Payment tracking and receipts
- Financial reporting and analytics
- Multiple payment method support
- Announcements and notifications
- Internal messaging system
- Parent-teacher communication
- Bulk messaging capabilities
- Automated attendance tracking system
- Multiple attendance sessions per day
- Custom attendance periods
- Detailed attendance reports and analytics
- Mobile-friendly attendance marking
- Course catalog and curriculum planning
- Assignment and assessment tracking
- Learning material management
- Grade book and progress tracking
- Department-wise organization
- Staff allocation and management
- Resource distribution tracking
- Inter-department coordination
- Flexible grading schemes
- Auto grade calculation
- Progress reports generation
- Grade analysis and statistics
- Parent grade viewing portal
- Real-time messaging
- File sharing capabilities
- Group conversations
- Message scheduling
- Read receipts and notifications
- Customizable report templates
- Performance analytics
- Attendance summaries
- Financial reports
- Export in multiple formats
- Class scheduling
- Teacher timetables
- Room allocation
- Conflict detection
- Schedule publishing
- User role management
- System configuration
- Security settings
- Backup and restore
- Integration settings
-
Frontend:
- Next.js 13+ (React Framework)
- Tailwind CSS (Styling)
- DaisyUI (Component Library)
- React Icons
- TypeScript
-
UI/UX Features:
- Responsive design
- Dark/Light mode
- Multiple theme options
- Animated components
- Modern and clean interface
- Responsive sidebar navigation
- Quick access to all major modules
- Role-based menu items
- Collapsible menu sections
- 30+ built-in themes
- Custom color schemes
- Dark/Light mode toggle
- Consistent design language
- Interactive charts and graphs
- Real-time data updates
- Export capabilities
- Customizable reporting
- Role-based access control
- Secure authentication
- Data encryption
- Session management
- Audit logging
- Server-side rendering
- Image optimization
- Code splitting
- Lazy loading
- Caching strategies
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE.md file for details.
- Added multi-language support
- Improved dashboard performance
- Enhanced mobile responsiveness
- Added new report templates
- Next.js team for the amazing framework
- Tailwind CSS for the utility-first CSS framework
- DaisyUI for the component library
- All contributors who have helped shape this project
If you need help or have any questions, you can:
- 📧 Email me at onesmuskipchumba5@gmail.com
- 💬 Star the repo if you like it.
- 📝 Open an issue on GitHub