Boilerplate Complete and updated with Next.js, Typescript, Styled-Components, Tests, Redux Toolkit and PWA
π About the Project
This application is a boilerplate for complex and large systems, especially those that need to scale with security and code quality.
We sought to achieve 3 pillars: readability, reusability, and refactorability.
For this purpose, logical hooks were used to decouple the Store Layer and the Services Layer. Thus, the UI only depends on the Hooks layer and never directly imports any state manager methods and any direct calls from the Services Layer.
In the construction of the UI, the Atomic Design structure was chosen, organizing the global components into atoms, molecules, organisms and templates.
In addition to being constantly updated, this project was configured in the smallest details to serve as a basis for professional projects that require standardized and easy-to-maintain code architecture and design.
π Contents
- Technologies
- Features
- Prerequisites
- How to install and run the project
- Clone Repository
- Install Dependencies
- Start Development Environment
- Generate Production Build
- Start Production Environment
- Run Tests
- Run Tests in Watch Mode
- Launch Storybook in Development Mode
- Generate Storybook Production Build
- Run Lints
- Format code with prettier
- Check for Available Updates for Dependencies
- Generate Semantic Releases
- Important Considerations
- Author
π Technologies
π© Features
-
Responsive design;
-
Atomic Design;
-
Accessible for mouseless navigation and screen readers;
-
Custom hooks for:
- animation in the assembly and disassembly of components;
- conditional rendering of components by breakpoints;
- dark/light theme;
-
Theme created with styled-components without using a provider and no need to access theme properties with arrow functions;
-
Global state management Redux Toolkit and Slice pattern, all decoupled from the project UI;
-
Store data persistence in localStorage;
-
100% coverage in tests including: components, templates, pages and hooks;
-
PWA.
-
Detection prefers-reduced-motion;
β
Prerequisites
-
node (latest version lts)
-
yarn
β How to install and run the project
Clone Repository
git clone https://github.com/everton-dgn/next_styled_components_redux_tlk_pwa_boilerplate.git
Install Dependencies
yarn
Start Development Environment
yarn dev
Available in http://localhost:3000
Generate Production Build
yarn build
Start Production Environment
yarn start
Available in http://localhost:3000
Run Tests
yarn test
Run Tests in Watch Mode
yarn test:w
Launch Storybook in Development Mode
yarn storybook
Available in http://localhost:6006
Generate Storybook Production Build
yarn build-storybook
Run Lints
yarn lint
yarn lint:css
yarn next:lint
yarn typecheck
yarn check-format
Format code with prettier
yarn format
Check for Available Updates for Dependencies
yarn check-update
Generate Semantic Releases
yarn release
π¨ Important Considerations
-
The husky is configured to not allow commit if there are any lint and typescript errors. The push can only be done if all tests and builds (of the project and the storybook) pass.
-
Due to husky's build check settings, to push with git, the development server must be stopped first or an error will occur in the
git push
command. -
Some conventions widely used in the React ecosystem were used. For example:
-
In the root of the components folder, an export index was created to facilitate the use of components with named import. In this way, to use a component just import it as an object and use it with the prefix "C", thus avoiding several unnecessary lines of imports:
import * as C from 'ui/components' ... <C.Card> <C.Input /> </C.Card> ...
-
To import style sheets that use styled-components, named imports were used for the same reason as before, thus:
import * as S from './styles' ... <S.Wrapper> <S.Title /> </S.Wrapper> ...
-
-
To create a complete component folder with tests, storybook, index and styles files, just use the command in the terminal:
yarn generate ComponentName