A modern, full-stack sports academy management system built with React, TypeScript, Express, and modern UI/UX principles.
- Modern UI/UX: Clean, responsive design with light/dark theme system
- Theme System: Dynamic theme switching with CSS variables and localStorage persistence
- Modern Components: Elevated cards, gradient buttons, smooth animations
- Dashboard: Real-time statistics, recent transactions, quick shortcuts
- Responsive Design: Mobile-first approach with Tailwind CSS
- TypeScript: Full type safety throughout the application
- RESTful API: Clean API architecture with proper error handling
- TypeScript: Type-safe server-side development
- CORS Support: Cross-origin resource sharing enabled
- Rate Limiting: API protection with rate limiting
- Modular Structure: Organized routes, controllers, and middleware
- Students: Student registration, profiles, and management
- Fees: Fee collection, payment tracking, and financial reports
- Attendance: Daily attendance tracking and reports
- Sports: Sports categories and activity management
- Batches: Batch creation, scheduling, and management
- Coaches: Coach profiles, assignments, and performance
- Communications: Messaging system and notifications
- Reports: Comprehensive reporting and analytics
- React 18 - Modern React with hooks and context
- TypeScript - Type safety and better development experience
- Vite - Fast build tool and development server
- Tailwind CSS - Utility-first CSS framework
- Lucide React - Beautiful, customizable icons
- CSS Variables - Dynamic theming system
- Node.js - JavaScript runtime
- Express.js - Web application framework
- TypeScript - Type-safe server development
- CORS - Cross-origin resource sharing
- Helmet - Security middleware
- Compression - Response compression
- Node.js (v18 or higher)
- npm or yarn
- Git
git clone https://github.com/r2w34/PSA-Modern.git
cd PSA-Modern# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview# Navigate to server directory
cd server
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Start production server
npm start# Frontend
npm run build
# Backend
cd server && npm run build- Frontend: Serve the
dist/folder using any static file server - Backend: Run the compiled JavaScript from
server/dist/
Create a .env file in the server directory:
PORT=8080
NODE_ENV=productionThe application features a sophisticated theme system:
- Clean, bright interface
- Professional color scheme
- Optimized for daytime use
- Modern dark interface
- Reduced eye strain
- Perfect for low-light environments
- CSS Variables: Dynamic color switching
- localStorage: Theme preference persistence
- Smooth Transitions: 300ms transitions between themes
- System Integration: Respects user's system preferences
- Mobile First: Optimized for mobile devices
- Tablet Support: Perfect tablet experience
- Desktop: Full desktop functionality
- Breakpoints: Tailwind CSS responsive breakpoints
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLintnpm run type-check- TypeScript type checking
npm run dev- Start development server with hot reloadnpm run build- Compile TypeScript to JavaScriptnpm start- Start production servernpm run lint- Run ESLintnpm run type-check- TypeScript type checking
PSA-Modern/
├── src/ # Frontend source code
│ ├── components/ # React components
│ ├── contexts/ # React contexts (Theme)
│ ├── pages/ # Page components
│ ├── services/ # API services
│ └── styles/ # CSS styles
├── server/ # Backend source code
│ ├── src/
│ │ ├── controllers/ # Route controllers
│ │ ├── middleware/ # Express middleware
│ │ ├── models/ # Data models
│ │ ├── routes/ # API routes
│ │ └── utils/ # Utility functions
│ └── dist/ # Compiled JavaScript
├── dist/ # Frontend production build
└── public/ # Static assets
- Statistics Cards: Total students, revenue, batches, fees
- Recent Transactions: Latest fee payments and transactions
- Quick Shortcuts: Fast access to all modules
- Growth Metrics: Monthly growth indicators
- Elevated Cards: Beautiful card designs with hover effects
- Gradient Buttons: Modern button styles with gradients
- Smooth Animations: CSS transitions and hover effects
- Loading States: Elegant loading indicators
GET /api/health- Health checkGET /api/dashboard/stats- Dashboard statisticsGET /api/dashboard/transactions- Recent transactionsGET /api/dashboard/shortcuts- Quick access shortcuts
- CORS Protection: Configured cross-origin resource sharing
- Helmet: Security headers middleware
- Rate Limiting: API request rate limiting
- Input Validation: Server-side input validation
- Optimized Bundle: Vite optimization for production
- Code Splitting: Automatic code splitting
- Tree Shaking: Unused code elimination
- Compression: Gzip compression for responses
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- React Team - For the amazing React framework
- Vite Team - For the lightning-fast build tool
- Tailwind CSS - For the utility-first CSS framework
- TypeScript Team - For type safety and better DX
For support, email support@psanashik.com or create an issue in this repository.
Built with ❤️ for Parmanand Sports Academy