React Application written in TypeScript using sensible defaults and technology picks
- Routing handled with ReactLocation
- Styling handled with TailwindCSS
- Sensible linting rules added through ESLint, tsconfig, Prettier, Stylelint, and Commitlint
- API calls handled with ReactQuery
- API endpoint typesafety achieved using a common Swagger spec. following OpenAPI standard between Client and Server
- WebApp is deployed to Netlify using GitHub actions
- Clone the repository onto your machine
- Navigate into the folder and run
yarn install
- Run the Application with
yarn dev
locally
- Make sure to be on the develop branch before you start working! You can
do this by running
git checkout develop
in your terminal while in the project folder - Create your local branch to track your changes. Run
git checkout -b feature/Name_Of_Your_Branch
. The feature keyword can be replaced with other descriptive naming conventions such as WIP or CI, however, there shouldn't really be a need. - Start writing your code!!!
- Once you finished a feature, go to your terminal and run
yarn lint
. This will flag any issues within your code that are not resolved. Make sure you fix all of these! - Once your linting shows no errors, you can go ahead and commit your changes
by running
yarn commit
in your terminal. This will show you a Command Line Interface where you can navigate between options. Pick an appropriate commit type, then follow the prompts. Be attentive to the details here, as not following the criteria will throw an error and not let you commit your changes. - After your local changes have been committed, you can run
git push
. If it's your first commit to a new branch, it'll throw an error and print out the command you should use. Just copy-paste this back into your terminal and run it. This should sync your local changes up to the shared repository.
- When dealing with API changes, make sure you overwrite the current Swagger
spec. located in
/src/api/swagger.yaml
with the updated copy. Once done and saved, you can run theyarn generate
command which will create all the types for you to import and use. - Please DO NOT INSTALL random dependencies into this project without prior discussion with the team, as it's very easy to bloat WebApps with unnecessary libraries. If interested, look packages up in Bundlephobia, this site provides good insight into the load-time impacts of new packages on the application.
- If you have any questions do not hesitate to contact me, or other members of the team!