This project was bootstrapped with Create React App.
Read more about the default yarn scripts provided by react-scripts here
- In the project directory run
yarn installto install all the project's dependencies. - copy the
.env.examplefile to.envfile in the project directory - Make sure the backend is running (Run it from the Rider IDE)
- To run the application use
yarn start. - You also will need to run
yarn run watch:lintto run the command line linter so you can see linting errors in for the entire project. Any PR's with lint issues will be rejected.
- Ensure the frontend and backend are setup and running
- Run yarn test
- To add new tests add
{what you are teting}.test.tsxfile and use the App.test.tsx file as an example.
The official IDE for this project will be WebStorm. If you haven't already applied for student licensing, do so here with your ius email address. This let's you have all of Jetbrain's products for free for a year.
See the Linting section to make sure the linter is running in WebStorm.
The main branch is master, which will hold the current production version.
When some work needs to be done, you will branch off from master using the
naming convention <initials>/<feature-name> for your branch.
After the work has completed, the developer should create a PR in Github to merge the branch back into dev and notify the project lead
to review. Please make sure to submit a PR to merge into dev branch and not master. Any PR's with linting issues will be rejected so
make sure you run the linter via yarn run lint before submitting a PR.
To run the linter while developing run yarn run watch:lint.
This project uses yarn instead of npm. If you need to install a library then you will use yarn add {library name}
instead of npm install {library-name}.
This project uses tslint an stylelint to enforce a standard code style. Follow the Setup WebStorm
guide to make sure the linter is running in your editor.
This project uses react-bootrstrap. Please use the documentation
to help build the UI. If there is a feature that react-bootstrap doesn't have then you can find a library to handle it
for you by either googling or using github awesome lists like this one
or this one. (If you google awesome + {technology name} then you usually get a nice
list of helpful libraries.)
The bootstrap theme is located in public/bootstrap/css/bootstrap.min.css and the colors in theme.scss match the
bootstrap theme otherwise bootstrap components will use one color scheme and the application will use another.
The project uses react-router to handle page navigation. Pages are just normal components that are routed in the src/router/Routes.tsx file.
Typescript is simply javascript with types. If you are unfamiliar with Typescript please read the Typescript in 5 minutes guide.
This application uses React to map the application state to the UI. If you are unfamiliar with React, please
go through this tutorial. In the tutorial you will notice that they use
the .jsx extension for rendering the XML-like extension of javascript. This project uses the .tsx extension
instead because we are using typescript instead of javascript (hence the t instead of j).
The application's database models will be stored in redux to provide a quick desktop like experience. If you are unfamiliar with Redux, follow this guide.
We are going to go with a render first approach to provide seamless experiences if users already have the data cached. Using this approach we will only show a loading indicator if the application is both retrieving data and has no entities in the cache. We will always request the newest data and replace our local content to ensure our cache is up to date.
https://github.com/FortAwesome/react-fontawesome
More documentation coming!