Project for course DAT257
- Never work on the master branch, always work on a feature branch
- When you want to push something, push it to your feature branch, then do a pull request
- Always use linter (e.g. eslint) before you do a pull request
- Always write tests for your code, use test driven development (TDD)
- Create meaningful commits and write informational commit messages
- Acceptance critera must be fulfilled.
- All tests must pass.
- The design should follow established design principled based on mockups.
- Code style should remain consistent. Preferably with the help of linters.
The frontend can be run in different environments depending on the variable "REACT_APP_ENV". Different environments changes certain environment-specific definitions such as API url, and others. "development" is default, to explicitly set environment type:
set "REACT_APP_ENV=production" && npm start
where 'production' can be either development, testing, or production.
To read and use an environment-specific variable in your code; simply import the config and read from it:
import config from './config';
...
console.log(config.api.url);
In [your working directory]/frontend
npm run lint
Fix all errors/warnings before creating a pull request.
- Try to the best of your ability to follow established design mockups.
- Style your components to be responsive. With the right CSS units, responsiveness should come naturally!
- Follow CSS best practices; choose the right units!
- Consistent styling is achieved by styled-component's ThemeProvider. Your styles should depend on these properties! See theme definitions in 'frontend/src/themes'.
- Apply color according to the agreed color scheme.
- Refer to colors by those defined in 'frontend/src/themes', for example:
const Label = styled.label`
font-family: Kufam, sans-serif;
font-weight: 400;
font-size: 0.8em;
color: ${(props) => props.theme.colors.inactive};
`;
- Apply spacing and padding according to the theme, exceptions are acceptable though, for example:
const CardHeader = styled.div`
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
box-sizing: content-box;
padding: ${(props) => props.theme.padding.section};
`;