Athlo Blitz - React + TypeScript + Vite + Redux + Ant Design + Tailwind

Welcome to the Athlo Blitz project! This repository contains the frontend code for our dynamic sports and recreational facility management platform. Built using modern web technologies like React, TypeScript, and Vite, Athlo Blitz provides a seamless user experience for managing facility bookings, viewing availability, and handling various administrative functions.

🚀 Getting Started

Follow these steps to get the project up and running on your local environment.

Prerequisites

• Node.js (v14 or higher)
• npm or Yarn package manager

Installation

1. Clone the repository:

   [git clone https://github.com/your-repo/Athlo_Blitz.git](https://github.com/antudaa/Athlo_Blitz_Front-End.git)
   cd Athlo_Blitz
   

2. Install dependencies:

   npm install
   # or
   yarn install
   

3. Start the development server:

   npm run dev
   # or
   yarn dev
   

4. Open your browser and navigate to http://localhost:5173 to view the application.

📂 Project Structure

The project is structured for scalability and maintainability:

• src/: Contains all the source code for the application.
  • components/: Reusable React components.
  • pages/: Different page components for each route in the application.
  • redux/: Redux store configuration and slices for state management.
  • types/: TypeScript interfaces and types to ensure type safety.
  • utils/: Utility functions and helper methods.
• public/: Static assets like images, fonts, etc.
• vite.config.ts: Configuration file for Vite.

🌟 Features

• Facility Management: Add, edit, and delete various facilities like sports courts, swimming pools, and more.
• Booking System: Manage facility bookings, including date and time slots, with ease.
• User Authentication: Secure login and user management using Redux for state management.
• Payment Processing: Manage booking payments and track payment statuses.
• Responsive Design: Optimized for a seamless experience across different devices.
• PDF Report Generation: Download detailed reports of bookings and facilities in PDF format.

🔧 Configuration

Vite Configuration

Vite is used for fast development and build processes. The default configuration is set up in vite.config.ts. To customize the configuration, refer to the Vite documentation.

ESLint Configuration

ESLint ensures code quality and adherence to coding standards. To maintain code consistency:

1. Configure the top-level parserOptions in .eslintrc.js:

   export default {
     parserOptions: {
       ecmaVersion: 'latest',
       sourceType: 'module',
       project: ['./tsconfig.json', './tsconfig.node.json'],
       tsconfigRootDir: __dirname,
     },
     // other rules...
   }
   

2. Update ESLint rules:

   • Replace plugin:@typescript-eslint/recommended with plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked.
   • Optionally, include plugin:@typescript-eslint/stylistic-type-checked for stylistic type checking.

3. Install eslint-plugin-react and add the following to the extends list:

   "extends": [
     "plugin:react/recommended",
     "plugin:react/jsx-runtime"
   ]
   

Tailwind CSS Configuration

Tailwind CSS is used for styling the application. Ensure you have the proper Tailwind configuration in place:

• tailwind.config.js: Customize the Tailwind configuration to fit the design requirements.

🌐 Deployment

Deploy the application using a platform like Vercel. Make sure the vercel.json file is properly configured for deployment. For more details on deployment, refer to the Vercel documentation.

📘 Documentation

Refer to the in-code documentation and comments for a better understanding of the components and their usage. Additionally, the project includes:

• API Integration: Handles facility data, user authentication, and bookings using a centralized Redux API slice.
• TypeScript Support: Ensures robust type checking and reduces runtime errors.

🛠️ Development

Scripts

• npm run dev / yarn dev: Start the development server.
• npm run build / yarn build: Build the application for production.
• npm run lint / yarn lint: Run ESLint for code quality checks.
• npm run preview / yarn preview: Preview the production build locally.

Coding Standards

• Follow the Airbnb JavaScript style guide.
• Ensure consistent code formatting using Prettier.
• Write unit tests for critical components using Jest and React Testing Library.

🛡️ Security

• Authentication: Implement secure authentication using JWT and state management with Redux.
• Data Validation: Ensure proper validation of form inputs and API requests.
• Error Handling: Implement comprehensive error handling for user-friendly feedback.

🤝 Contributing

Contributions are welcome! Please follow the contribution guidelines and ensure adherence to the code of conduct.

📄 License

This project is licensed under the MIT License. See the LICENSE file for more details.

Developed with ❤️ by Antu_Das.