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

1. Frontend: Serve the dist/ folder using any static file server
2. Backend: Run the compiled JavaScript from server/dist/

Create a .env file in the server directory:

PORT=8080
NODE_ENV=production

The 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 server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint
• npm run type-check - TypeScript type checking

• npm run dev - Start development server with hot reload
• npm run build - Compile TypeScript to JavaScript
• npm start - Start production server
• npm run lint - Run ESLint
• npm 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 check
• GET /api/dashboard/stats - Dashboard statistics
• GET /api/dashboard/transactions - Recent transactions
• GET /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

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. 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