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=trueYou 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 installTo start the development server, run the following command:
yarn devThis 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 theOverlayfolder but a specific modal component for theGamepage goes in theGamefolder.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
developbefore you start working on it. - Open a pull request against
developand 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
developbefore 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 codegenFiles:
src/gql/*