Back to projects
ChessBar

ChessBar

Dann Dieulouard / August 10, 2024

ChessBar's direct link

This project is the frontend application for ChessBar, a platform to organize and manage chess tournaments. The application allows administrators to create, update, and manage tournaments, as well as view participant information.

Features

  • CRUD platform: Create, Read, Update, Delete a bar, a user, a tournament.
  • Bars info: Allows you to know when/where/how to join a Chessbar session.
  • Tournament registration: Online tool to perform tournament registration.
  • Responsive Design: The website is responsive and works on all devices.

Technologies

  • ReactJs: A React framework for building static and dynamic websites.
  • NodeJs: JavaScript runtime environment for server-side and networking applications outside browsers.
  • Express: Minimal and flexible Node.js web application framework for building APIs.
  • Sequelize: Promise-based Node.js ORM for PostgreSQL, MySQL, SQLite, and more.
  • Heroku: A cloud platform as a service that lets companies build, deliver, monitor and scale apps.

Getting Started

Follow these instructions to set up and run the project on your local machine for development and testing purposes.

Prerequisites

Ensure you have the following software installed:

  • Node.js (version 14 or above)
  • npm (usually comes with Node.js)

Installation

  1. Clone the repository: 
    git clone https://github.com/yourusername/chessbar.git
  2. Navigate to the project directory: 
     cd chessbar
  3. Install the dependencies: 
     npm install

Running the Application

  1. To start the development server, run: 
     npm start
  2. Open your web browser and navigate to http://localhost:yourPORT to see the application running.

Project Structure

The project structure is as follows:

chessbar/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── components/
│   │   ├── AdminSidebar.js
│   │   └── ...
│   ├── pages/
│   │   ├── UpdateTournament.js
│   │   └── ...
│   ├── utils/
│   │   ├── authGuard.js
│   │   └── ...
│   ├── App.js
│   ├── index.js
│   └── ...
├── package.json
└── README.md

public/: Contains static assets like HTML, images, etc. src/: Contains the main source code for the application. components/: Reusable components. pages/: Page components for different routes. utils/: Utility functions and helpers. App.js: Main application component. index.js: Entry point of the application.

API Endpoints

The application communicates with the backend via RESTful API endpoints. Here are some key endpoints:

GET /api/tournaments/:id: Fetch details of a specific tournament. PUT /api/tournaments/:id: Update a specific tournament.

Usage

Step 1: Authentication

The application uses token-based authentication. Ensure you have a valid token to access the admin routes.

Step 2: Viewing Tournaments

  1. Navigate to the tournaments page to view all tournaments.
  2. Click on a tournament to view its details.

Step 3: Updating a Tournament

  1. Navigate to the tournament update page (e.g., /admin/tournaments/update/:id).
  2. Fill in the form fields with the new tournament details.
  3. Submit the form to update the tournament in the database.

Step 4: Creating a Tournament

  1. Navigate to the tournament creation page (e.g., /admin/tournaments/create).
  2. Fill in the form fields with the tournament details.
  3. Submit the form to create a new tournament in the database.

Contributing

We welcome contributions! Please follow these steps to contribute:

  1. Fork the repository.
  2. Create a new branch:
git checkout -b feature/chessbar
  1. Make your changes and commit them:
git commit -m 'Add some feature'
  1. Make your changes and commit them:
git push origin feature/your-feature-name
  1. Open a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements