Frontend application for the Inma Clubs Management System, a comprehensive platform for managing student clubs and their activities.
إنماء الإندية (Inma Clubs) is a web application designed to streamline the management of student clubs and their activities. The platform provides tools for club administrators, members, and INMA administrators to efficiently manage club operations, track volunteer hours, and monitor member engagement.
- Role-based access control (INMA Admin, College Admin, Club Admin, Member)
- User registration and profile management
- Member tracking with ID numbers and student IDs
- Club membership management
- Club creation and configuration
- Member management within clubs
- Activity tracking and reporting
- Club performance metrics
- Committee management
- Volunteer hour logging
- Activity categorization
- Progress tracking
- Achievement recognition
- Performance analytics
- Comprehensive dashboard for administrators
- User management interface
- Club oversight and management
- Reporting and analytics
- System configuration
- React.js: Modern UI framework for building interactive user interfaces
- Tailwind CSS: Utility-first CSS framework for rapid UI development
- React Router: Client-side routing for single-page application navigation
- Context API: State management solution for global application state
- Lucide Icons: Modern icon library for UI elements
src/
├── components/ # Reusable UI components
│ ├── AdminLayout/ # Layout components for admin interfaces
│ ├── ClubCard/ # Club display components
│ ├── MemberCard/ # Member display components
│ └── common/ # Shared UI components
├── pages/ # Page components
│ ├── Admin/ # Admin interface pages
│ ├── Club/ # Club management pages
│ └── Member/ # Member interface pages
├── context/ # React Context providers
│ ├── AuthContext/ # Authentication state management
│ └── ClubContext/ # Club data management
├── assets/ # Static assets
│ ├── images/ # Image files
│ └── fonts/ # Custom fonts
├── utils/ # Utility functions
│ ├── api.js # API interaction functions
│ └── helpers.js # Helper functions
└── App.jsx # Main application component
- Node.js (v16 or higher recommended)
- npm (v7 or higher) or yarn (v1.22 or higher)
- Git for version control
- Clone the repository
git clone https://github.com/SillyRobot883/inma-frontend.git
cd inma-frontend- Install dependencies
npm install
# or
yarn install- Create a
.envfile in the root directory with the following variables:
VITE_API_URL=your_api_url_here
VITE_APP_NAME=Inma Clubs- Start the development server
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser
- Build the application
npm run build
# or
yarn build- Preview the production build
npm run preview
# or
yarn preview- Follow ESLint and Prettier configurations
- Use functional components with hooks
- Implement proper error handling
- Write meaningful comments for complex logic
- Keep components small and focused
- Use proper prop types
- Implement error boundaries
- Follow accessibility guidelines
- Use Context API for global state
- Implement proper loading states
- Handle errors gracefully
- Cache data appropriately
- 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
- Provide clear description of changes
- Include relevant screenshots for UI changes
- Update documentation as needed
- Ensure all tests pass
This project is licensed under the MIT License - see the LICENSE file for details.