Skip to main content

Web Client Developer Guide

Welcome to the Synthergy web client developer guide! This page is designed to help you get started on contributing to the web client component of the project.

Project Repository​

The web client for Synthergy is hosted in the synthergy-client repository on GitHub. This repository contains all of the code and assets needed to build the web application.

To access the repository, you will need to join the synthergy-game organization on GitHub. Once you have been added to the organization, you will be able to clone the repository and start contributing.

Project Structure​

The web client uses a standard React Vite setup with TypeScript and MaterialUI. The project structure is as follows:

synthergy-client/
├── src/
│   ├── assets/      # Static assets (images, fonts, etc.)
│   ├── components/  # React components
│   ├── config/      # Configuration for Firebase and Socket.io
│   ├── constants/   # Constants used throughout the application
│   ├── contexts/    # React context providers
│   ├── examples/    # Example components for reference
│   ├── hooks/       # Custom React hooks
│   ├── pages/       # Page components
│   ├── themes/      # MaterialUI theme configuration
│   ├── types/       # TypeScript types
│   ├── utils/       # Utility functions
│   ├── main.tsx     # Entry point for the application
|   ├── main.css     # Global CSS styles (don't touch, use MUI stuff instead)

Running the Project​

To get started with the web client, follow these steps:

  1. Clone the synthergy-client repository.
  2. Install the project dependencies by running yarn in the project directory.
    • If you don't have Yarn installed, run npm install -g yarn first.
  3. Start the development server by running yarn dev.

The development server should now be running, and you can access the web client by navigating to http://localhost:5173 in your browser. Hot reloading is enabled, so any changes you make to the code will automatically be reflected in the browser.

By default, the web client will attempt to connect to the game server running on http://localhost:8080. If you would like to test with the production server instead, you can run the project with NODE_ENV=production yarn dev. This will point the web client to the production server at https://synthergy.lmucs.io. You can also manually change the server URL in the config/socketio.ts file.

The "Server Status" indicator in the top right corner of the web client will show whether the client is connected to the server or not. Make sure this turns green, otherwise many things won't work!

Running ESLint​

The web client uses GitHub Actions for continuous integration. This means that every pull request will be automatically run against the project's linter to ensure that the changes do not introduce any code quality issues. To avoid any issues with your pull request, make sure to run ESLint locally before pushing your changes:

yarn lint

Contributing​

Please refer to the contributing guide for information on how to make contributions on GitHub.

Resources​