reactsuperwizard/Next-Tailwind-React-Typescript-BrickCard

PF Nexus Client

A platform that connects developers, advisors, investors and lenders in renewable energy & sustainable infrastructure

View Demo · View Staging · View Engineering Notion Page · Read Engineering How-to's

Table of Contents

• Tech Stack
• Prerequisites
• Run Locally
• Running Tests
• Storybook
• Git workflow
  • Branching strategy
  • Git flow and GitHub PR's
  • Commit message rules

Tech Stack

Client

• Typescript
• Next.js
• React.js
• react-query
• react-intl
• react-hook-form
• zod
• Storybook
• TailwindCSS
• Jest
• Cypress

DevOps

• Husky
• Commitlint
• Commitizen

Prerequisites

This project uses Yarn (< version 2) as package manager. If you try to run it with NPM it will throw a warning.

 npm install --global yarn

Run Locally

Clone the project

  git clone https://github.com/pf-nexus/client

Go to the project directory

  cd ./client

Install dependencies

  yarn install

To start the dev (on http://localhost:3000) server run:

  yarn dev

Running Tests

To run unit tests, run the following command

  yarn test

To collect test coverage run

  yarn test:coverage

For Cypress end to end tests, run

  yarn test:e2e

Storybook

You can run Storybook locally with:

  yarn storybook

If you need to deploy Storybook to Chromatic, run the command

  yarn storybook:publish

Git workflow

Branching strategy

This repo follows the git flow branching model, if you are new to it, below are 2 great introductory resources:

• https://nvie.com/posts/a-successful-git-branching-model/
• https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow

Git flow and GitHub PR's

gitflow is a great git utility that automates a good part of the commands you need to run when working in a git flow branching model repo. It is recommended but not required as its usage is limited and you can acheive the same goals with a couple of git commands.

One thing to keep in mind when using git flow commands - you should never run:

  git flow [feature/release/hotfix/support] end [branch name]

While this command follows perfectly the git flow workflow, it will automatically merge your branch into develop without opening a PR on GitHub for your changes to be reviewed. When you've finished your work, run git push ... to push to the main repository and open a PR.

Commit message rules

We are using commitlint and commitizen to keep our commit messages tidy and following a standard structure. These tools will be installed automatically as they are dev dependencies for this project.

To commit your changes with commitizen you need to run:

  yarn commit

You can also use the default git commit -m ... if you remember to follow the rules from the default config of commitizen. If the commit message does not meet the requirements from commitizen, it will throw an error and you won't be able to commit.