🔍 React Base

🌐 react-base.netlify.app/

📖 Tabe of contents

1. 💡 Motivation
   • Intro
   • Technologies used
2. 📋 Requirements
3. 🛠️ Installation and usage
   • Using yarn
   • Using Docker
4. 🗂️ Component Structure (general)
5. 🧑🏻‍💻 Contributing
   • Branch names
   • Commit messages

Motivation

Intro:

The main objective of this repository is to be used as a template-like to your react projects with many technologies already setted up from scratch.

Fork this repository and start working over it...

Technologies used:

• Language and framework:
  • React (react.dev)
  • TypeScript (typescriptlang.org)
  • Node.js (nodejs.org)
• Styling:
  • Styled components (styled-components.com)
  • React styled guide (github.com/luizclr/react-styled-guide)
• Build and development:
  • Webpack (webpack.js.org)
  • Babel (babeljs.io)
  • Docker (docker.com)
  • Nginx (nginx.com)
• Linting:
  • Eslint (eslint.org)
  • Prettier (prettier.io)
• Testing:
  • Jest (jestjs.io)
  • React testing library (testing-library.com/react-testing-library)
• API consuming
  • Axios (axios-http.com)
• CI/CD:
  • Github Actions (github.com/features/actions)
  • Netlify (netlify.com)
• Schema Validation:
  • Zod (zod.dev)
• Other tools:
  • Husky (typicode.github.io/husky)

Requirements

• NodeJs
• yarn
• nvm

or

• docker
• docker-compose

Installation and usage

Create a copy .env file from .env.example and populate the variables.

cp .env.example .env

Using yarn

Using nvm? change local node version to project's node version on .nvmrc.

nvm install

Install dependencies:

yarn install

Run project on development mode:

yarn dev

Open new browser window on localhost:4000.

Run unit tests:

yarn test

Run linter:

yarn lint

Build for production:

yarn build

Start server with built code:

yarn start

Using Docker

create a docker network:

docker network create react-base

build image:

make build

Run project on development mode:

make up

Open new browser window on localhost:4000.

stop container:

make down

Run unit tests:

make test

Run linter:

make lint

Component Structure (general)

└─ component
    ├─ component.container.tsx
    ├─ component.schema.ts
    ├─ component.styles.tsx
    ├─ component.tsx
    └─ types.ts

Contributing

Follow the next steps to contribute

Branch names

Name your branch with a meaningful name that represents the changes you have done.

Examples:

chore/updating-changelog
fix/user-authentication
feat/add-card

Commit messages

Use the format {type}({scope}): {message}.

Eg: feat(login): added remember me.

See conventional commit guideline.