An example project with my last technologies and patterns for Frontend development.
Github: https://github.com/michelpm1/trivia-game Live App: https://sad-almeida-2b9978.netlify.app
To install required packages and run a local development server:
# install packages
npm i
# run dev server
npm run start
Run any of these with npm run <command>
| command | description |
|---|---|
| start | Launch webpack dev server |
| storybook | Launch Storybook |
| test | Lint and run integration tests |
| build | Build the app "Tests and linting must pass to succeed" |
| gen-docs | Generate Typedoc documentation |
| lint | Run lint checker |
| eject | Create react app script to eject all build tools and configurations making them manual |
- Project was bootstrapped with [Create React App]
- Written in Typescript
- Docs generated by Typedoc
- State Management using Redux and Thunks
- Styling with CSS Modules
- Tests are run using Jest, with Enzyme
- Linting handled by Eslint, with Prettier formatting enabled
- Storybook integration
- Netlify integration
- Components should be self-contained and not connected to application state.
- Containers wrap functional components that rely on application state.
- Pages define the structure of each view and connect components to actions and app state.
- Added a minimal CI (builds to production only work if linting and tests are passing "You can verify netlify log to check info about build errors")
UI testing can be done manually using Storybook, or programatically using Enzyme. Most of the testing complexity in this project revolves around state management, so reducer tests are included.