UI for Vetting Games.
Check out the UI on Staging: https://vetting-games-staging.x-team.com/
- Node.js (v18.12.0)
- NVM - Node Version Manager
- Yarn
- Vetting Games API
You'll need some environment variables to get started. You can find a list of them in the .env.example
file. You can copy this file to .env
and fill in the values.
VITE_IDLE_TIMEOUT=3000
VITE_BUGGED_TIME_TRACKING=true
You may want to run the API locally. You can find the instructions on how to do that in the Vetting Games API repository.
VITE_API_URL="http://localhost:4000/graphql"
You should ask for the Github OAuth credentials from the team.
VITE_GITHUB_CLIENT_ID="[your_oauth_app_client_id]"
yarn install
To start the development server, run the following command:
yarn dev
This will start a development server at http://localhost:5173/.
The code is structured in the following way:
public
- Contains the static assets.src
- Contains the source code.components
- Contains the React components. The components are grouped by type, page, or feature. e.g. Modal components goes in theOverlay
folder but a specific modal component for theGame
page goes in theGame
folder.constants
- Contains the constants used in the app.gql
- Contains the GraphQL queries and mutations generated by graphql-codegen.pages
- Contains the React components for the pages. Usually, these components are just wrappers for the page components. Also, some queries and mutations are defined here.router
- Contains the routes for the app.utils
- Contains the utility functions used in the app.apollo.ts
- Contains the Apollo Client configuration.App.tsx
- The main React component. Global context providers are used here like Apollo Client and React Router.main.tsx
- The entry point for the app. The app is mounted here.index.css
- The global CSS styles. Includes the Tailwind CSS styles.
- Use Prettier to format the code.
- Use ESLint to lint the code.
- Use TypeScript to type check the code.
- Use Tailwind CSS for styling.
- Use React for building the UI.
- Use Apollo Client for making GraphQL requests.
- Use React Router for routing.
- Use GraphQL Code Generator for generating the GraphQL queries and mutations.
- Make sure you have a Jira ticket for the work you're doing.
- Create a branch with the ticket number and a short description of the work you're doing. e.g.
VG-123-fix-game-bug
- Make sure your branch is up to date with
develop
before you start working on it. - Open a pull request against
develop
and move the ticket to "In Review" in Jira. - Fill out the pull request template with as much detail as possible.
- Request a code review from the team at
#vetting-games-project
. - Once the code review is complete, merge the pull request and move the ticket to "Staging" in Jira.
- After the pull request is merged, the staging server will automatically deploy the changes.
- Test the changes on staging and make sure everything is working as expected.
- Make sure the code is up to date with
develop
before you start reviewing. - Review the branch name and pull request title to make sure they are descriptive.
- Check the pull request description to make sure it contains all the necessary information.
- Change to the branch and run the code locally.
- Test the changes locally and make sure everything is working as expected.
- Make sure the code is readable and easy to understand expect for the generated code.
- Add comments to the pull request if you have any questions, suggestions or if you find any issues.
- Approve the pull request if everything looks good.
The code in the src/generated
directory is generated by the GraphQL Code Generator. You should not edit this code directly. Instead, you should edit the GraphQL queries and mutations and run the code generator to update the generated code (This will be done automatically when you run the yarn dev
command).
yarn codegen
Files:
src/gql/*