CTM-Stats

An open-source website designed to display CTM-STATS.

This website is built with the following tools:

• Node.js: Node.js® is an open-source, cross-platform JavaScript runtime environment.
• React: The frontend code is developed with React and TypeScript.
• Ant Design (Antd): An enterprise-class UI design language and React UI library with a set of high-quality React components—considered one of the best React UI libraries for enterprises.
• CSS Modules: This project uses CSS modules and SCSS.
• Supabase: All CSV data is stored in an SQL database.
• Docker: Docker is required to run the Supabase environment.

Project Scaffolding and Importing Information

To run this project, you need to install Docker Desktop and Node.js version 18 or higher.

Once you have installed these tools, you can execute the following commands:

npm i # Install dependencies

npx supabase start # Create the Supabase environment

Once your Supabase containers are running, if you want to include all the information, you need to go to this repository and execute a few commands explained here. (I have plans to integrate everything into one repository 😅)

Run project

After importing all the information, you need to create a .env file like this with your environment variables.

# These values appear after you run the `npx supabase start` command
API_URL=http://localhost:54321
GRAPHQL_URL=http://localhost:54321/graphql/v1
DB_URL=postgresql://postgres:postgres@localhost:54322/postgres
STUDIO_URL=http://localhost:54323
INBUCKET_URL=http://localhost:54324
JWT_SECRET=<JWT_SECRET>
SERVICE_ROLE_KEY=<SERVICE_ROLE_KEY>

Then, you only need to run ``npm run dev`, and you will have the development environment.

There's also the npm run test command to run the unit tests. We are using vitest and react-testing-library.