- Repo: ciitm-frontend on GitHub
- Live Site: Grow Rich Mindset
- Made by: NexGenStudioDev (Abhishek Kumar)
- License: Personal Contributor License v1.0
A comprehensive educational website built for CIITM Dhanbad with modern architecture, real-time features, and complete institutional management system. The platform provides seamless experience for students, administrators, and staff with advanced features like online admissions, payment processing, and dynamic content management.
- Online Admission Process - Complete admission workflow with form validation
- Student Dashboard - Personalized dashboard for students
- Fee Management - Online fee payment with Razorpay integration
- Grade & Academic Records - Track academic performance and records
- Parent Information Management - Comprehensive parent/guardian data
- Multi-Role Login System - Separate access for students and admins
- Google OAuth Integration - Quick login with Google accounts
- Protected Routes - Role-based access control
- Password Recovery - Forgot password and reset functionality
- Secure Session Management - JWT token-based authentication
- Dynamic Dashboard - Real-time data visualization and analytics
- Student Management - View, search, and manage student records
- Course Management - Create and manage educational courses
- Content Management - Update website content dynamically
- Payment Tracking - Monitor fee payments and generate reports
- Gallery Management - Upload and organize institutional images
- Contact Management - Handle inquiries and contact requests
- Album System - Create and manage photo albums
- Image Gallery - Responsive image gallery with lightbox
- Dynamic Content - Admin can update all website content
- Testimonial System - Collect and manage student testimonials
- Razorpay Gateway - Secure online payment processing
- Fee Calculation - Automatic fee calculation and tracking
- Payment History - Comprehensive payment records
- Receipt Generation - Digital payment receipts
- Socket.IO Integration - Real-time data updates
- Live Notifications - Instant updates and alerts
- Real-time Dashboard - Live data synchronization
- Responsive Design - Works on all devices and screen sizes
- Modern UI/UX - Clean and intuitive interface
- Smooth Animations - GSAP-powered animations
- SEO Optimized - React Helmet for meta tags and SEO
- Fast Loading - Optimized performance with lazy loading
- ⚛️ React 18.3.1 - Modern React with hooks and functional components
- 🎨 Tailwind CSS 3.4.17 - Utility-first CSS framework
- 🔄 Redux Toolkit - State management
- 🚀 Vite - Fast build tool and development server
- 📱 React Router DOM - Client-side routing
- 🎭 React Hook Form - Form handling and validation
- 🌐 Socket.IO Client - Real-time communication
- 📡 Axios - HTTP client for API calls
- 🔒 JWT Authentication - Secure authentication
- ✨ GSAP - Professional animations
- 🎠 Swiper.js - Modern touch slider
- 🎢 React Slick - Carousel component
- 🎨 React Icons - Icon library
- 💫 React Spinners - Loading animations
- 💳 React Razorpay - Payment gateway integration
- 🔔 React Toastify - Toast notifications
- 🍯 SweetAlert2 - Beautiful alert dialogs
- 🧹 DOMPurify - XSS protection
- 📋 Yup & Zod - Schema validation
- 🔧 ESLint - Code linting
- 💄 Prettier - Code formatting
- 📦 PostCSS - CSS processing
- 🏗️ SWC - Fast compilation
src/
├── 📁 assets/ # Static assets (images, icons)
│ ├── images/ # Image assets
│ └── logo.svg # App logo
├── 📁 components/ # Reusable components
│ ├── 📁 Atoms/ # Basic UI components
│ │ ├── Button/ # Button components
│ │ ├── Input/ # Input components
│ │ ├── Dropdown/ # Dropdown components
│ │ └── ...
│ ├── 📁 Molecules/ # Combined atom components
│ │ ├── Cards/ # Card components
│ │ ├── Loader/ # Loading components
│ │ └── Admin/ # Admin-specific molecules
│ ├── 📁 Organisms/ # Complex components
│ │ ├── NavBar/ # Navigation components
│ │ ├── Footer/ # Footer components
│ │ ├── SideBar/ # Sidebar components
│ │ └── Admin/ # Admin organisms
│ ├── 📁 Templates/ # Page templates
│ │ ├── Admin/ # Admin page templates
│ │ ├── home/ # Home page sections
│ │ ├── about/ # About page sections
│ │ └── ...
│ ├── 📁 Auth/ # Authentication components
│ └── 📁 Protected/ # Protected route components
├── 📁 pages/ # Page components
│ ├── 📁 Admin/ # Admin pages
│ │ ├── DashboardPage.jsx
│ │ ├── StudentPage.jsx
│ │ ├── FeePay.jsx
│ │ └── ...
│ ├── Home.jsx
│ ├── About.jsx
│ └── ...
├── 📁 store/ # Redux store and slices
│ ├── appStore.js # Main store configuration
│ ├── AuthSlice.js # Authentication state
│ ├── homeSlice.js # Home page state
│ └── ...
├── 📁 hooks/ # Custom React hooks
│ ├── useHomeUi.js # Home page data fetching
│ ├── useAbout.js # About page data fetching
│ ├── useAlbum.js # Album data management
│ └── ...
├── 📁 utils/ # Utility functions
│ ├── apiUrl.js # API configuration
│ └── constants.js # API endpoints
├── 📁 validation/ # Form validation schemas
├── 📁 service/ # API service functions
└── 📁 config/ # Configuration files
└── socket.mjs # Socket.IO configuration
Before running this project, make sure you have the following installed:
- Node.js (v18 or higher)
- npm or yarn
- Git
-
Clone the repository
git clone https://github.com/Coder-Studies/ciitm-frontend.git cd ciitm-frontend -
Install dependencies
npm install
-
Environment Setup Create a
.envfile in the root directory and add:VITE_BACKEND_URL=your_backend_url VITE_RAZORPAY_KEY_ID=your_razorpay_key
-
Start development server
npm run dev
-
Build for production
npm run build
| Script | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Build the project for production |
npm run preview |
Preview the production build locally |
npm run lint |
Run ESLint for code quality checks |
npm run format |
Format code using Prettier |
- Atomic Design Pattern - Components organized as Atoms, Molecules, Organisms, and Templates
- Functional Components - Modern React with hooks
- Custom Hooks - Reusable logic for data fetching and state management
- Higher-Order Components - Protected routes and authentication
- Redux Toolkit - Centralized state management
- Slice Pattern - Modular state slices for different features
- Real-time Updates - Socket.IO integration for live data
- Axios Interceptors - Centralized HTTP client configuration
- Custom Hooks - Data fetching and caching
- Error Handling - Comprehensive error management
- Socket.IO - Real-time communication
vite.config.js- Vite build tool configurationtailwind.config.js- Tailwind CSS customizationeslint.config.js- ESLint rules and pluginspostcss.config.js- PostCSS processing
vercel.json- Vercel deployment settings with API proxyingpackage.json- Dependencies and build scripts
- Base URL: Configurable via environment variables
- Authentication: JWT token-based with automatic refresh
- Real-time: Socket.IO for live updates
- Error Handling: Centralized error management
// Authentication
POST /api/v1/auth/login
POST /api/v1/auth/Admin/SignUp
// Student Management
GET /api/v1/students
POST /api/v1/students/create
PUT /api/v1/students/:id
// Payment Processing
POST /api/create/payment
POST /api/pay/verify
// Content Management
GET /api/v1/frontend
POST /api/v1/admin/course/create
GET /api/v1/albums- JWT token-based authentication
- Role-based access control (Student/Admin)
- Protected routes for sensitive areas
- Automatic token refresh
- DOMPurify for XSS prevention
- Form validation with Yup/Zod schemas
- HTTPS enforcement in production
- Secure cookie handling
- Razorpay PCI-compliant payment processing
- Server-side payment verification
- Encrypted payment data transmission
- Mobile: 350px and up
- Tablet: 1000px and up
- Desktop: 1200px and up
- Mobile-first approach
- Touch-friendly interface
- Optimized images and assets
- Smooth animations and transitions
- Lazy Loading - Components loaded on demand
- Code Splitting - Chunked bundles for faster loading
- Tree Shaking - Unused code elimination
- Minification - Compressed production builds
- Image Optimization - WebP format and responsive images
- Bundle Analysis - Optimized bundle sizes
- Caching Strategies - Browser and CDN caching
- ESLint - Code linting and best practices
- Prettier - Consistent code formatting
- TypeScript-ready - Type safety preparation
- Real-time error tracking
- Performance metrics monitoring
- User experience optimization
- Git-based version control
- Semantic commit messages
- Feature branch workflow
- Pull request reviews
- Automated testing on commits
- Continuous integration ready
{
"react": "^18.3.1",
"react-dom": "^18.3.1",
"@reduxjs/toolkit": "^2.5.0",
"react-redux": "^9.2.0",
"react-router-dom": "^7.0.2"
}{
"tailwindcss": "^3.4.17",
"react-icons": "^5.5.0",
"gsap": "^3.12.7",
"swiper": "^11.2.1"
}{
"axios": "^1.7.9",
"socket.io-client": "^4.8.1",
"react-razorpay": "^3.0.1"
}We welcome contributions to improve the CIITM Frontend project! Here's how you can contribute:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the existing code style and conventions
- Write clear and descriptive commit messages
- Test your changes thoroughly
- Update documentation if necessary
- Ensure your code passes all linting checks
- 📧 Email: [email protected]
- 🐙 GitHub Issues: Report bugs or request features
- 💬 Discussions: Join our community discussions
- 💼 LinkedIn: Connect with the developer
- 🐦 Twitter: Follow for updates
- 📘 Facebook: Join our community
- ✅ Complete authentication system
- ✅ Student management dashboard
- ✅ Payment integration with Razorpay
- ✅ Real-time features with Socket.IO
- ✅ Responsive design implementation
- ✅ Admin panel with full CRUD operations
- 📧 Email notification system
- 📊 Advanced analytics dashboard
- 📱 Mobile app development
- 🔔 Push notification support
- React Team - For the amazing React framework
- Tailwind CSS - For the utility-first CSS framework
- Vercel - For excellent deployment platform
- Open Source Community - For the incredible libraries and tools
This project was built to modernize educational institute management and provide a seamless experience for students and administrators.
- 🎯 Purpose: Educational Institute Management System
- 📅 Development Time: Ongoing
- 🏗️ Architecture: React + Redux + Socket.IO
- 🎨 Design System: Atomic Design Pattern
- 📱 Responsive: Mobile-First Approach
- 🔒 Security: JWT + Role-Based Access
- 💳 Payment: Razorpay Integration
- 🚀 Performance: Optimized for Speed
This project uses a special license to protect the code and allow fair use.
- Read and learn from the code
- Contribute to this project
- Show your accepted work in your portfolio (with credit)
- Host this project on your own website or server
- Sell or use the code for paid work, startups, or companies
- Use it in teaching, courses, bootcamps, or training platforms without permission
- Copy or publish the whole project or parts of it somewhere else
- You can only show what you personally made
- You must say it’s part of ciitm-frontend by Coder-Studies
- You must link to the original repo: https://github.com/Coder-Studies/ciitm-frontend
- You cannot host or deploy the full project
If someone breaks the license:
- A DMCA complaint may be filed
- Hosting platforms like GitHub or Netlify may be notified
- Legal steps may be taken if needed
- This code is shared as-is — the author is not responsible for any issues or losses caused by using it
We're incredibly grateful to everyone who has contributed to the CIITM Frontend project. Your time, expertise, and passion drive this project forward and make it better every day!
Each contributor brings unique skills and perspectives that have shaped this project:
- Code Warriors - Those who build features and squash bugs
- Documentation Heroes - Those who make our project understandable
- Design Visionaries - Those who make our interface beautiful
- Issue Reporters - Those who help us identify problems
Want to see yourself here? We'd love to have your contributions!
- Check out our contribution guidelines
- Find an open issue or create one
- Make your mark on this exciting project
Every pull request, issue report, and suggestion helps us build a better platform for CIITM Dhanbad.
For questions, permission, or legal concerns, reach out:
- GitHub: Coder-Studies
