getting-started.md

Getting Started

Welcome to the getting started page! Here is all you need to know to get this repo up and running on your local machine, as well as good collaborative coding practices

Contents

• Setup for All Developers
• Setup for Tech Leads
• Helpful commands
• Project Structure

Setup for all Developers

1. Clone this repository git clone <repo-url>
2. Run npm i at the root of the repository
3. TODO: Setup backend
4. Install IDE Extensions
   • Prettier
   • ESLint
5. Enable format on save in your IDE
   1. Click the settings button in the bottom left
      
   2. Search "formatter" and set your default formatter to Prettier
   3. Search "format on save" and click the checkbox
6. Enable the pre-commit hook by running npx mrm@2 lint-staged at the root of your repository
7. Familiarize yourself with Helpful Commands, the Project Structure, the steps for contributing, and the repository features.

Setup for Tech Leads

1. Review the repo-features document to understand what is included in this repository off the bat
2. Set up the backend for your team
3. Edit the "One time setup" section above as needed, then execute those steps
4. Turn on branch protections
   1. Visit your repo on github.com
   2. Click the Settings button on the top bar
   3. Click the branches tab on the left sidebar
   4. Click add rule
   5. Click "Require a pull request before merging"
   6. Create
      

Helpful commands

• npm start: Boot up your frontend
• npm run lint-check: make sure Prettier and ESLint pass
• npm run lint-fix: make sure Prettier and ESLint pass and try to automatically fix all issues (some ESLint issues must be resolved manually)
• git stash: Temporarily remove all local changes to a branch and save them. Good when you need to hop to another branch without committing your current code.
• git stash apply: Reapply most recent git stash.
• git merge orgin/main: Pull all changes from the main branch to yours, good for resolving merge conflicts.

Project Structure

• .github Github Actions CI/CD and Issue/PR templates
• .husky Linting pre-commit hook Read More
• docs Documentation - images Images used for documentation - template-repo Documentation that came with the template repository
• public Assets for frontend Read More
• src Frontend code - tests Tests for the frontend - components React components - App.tsx Top level React component, where most routing goes - App.css Top level CSS, where all global CSS rules go