infinum / JS-React-Example

Infinum's way of doing React

React Example project

Technology

• Next.js
• TypeScript
• Datx
• JSON:API
• SWR
• Chakra UI
• React Hook Form
• React Testing Library and Jest for unit and integration tests
• Storybook
• I18Next
• Plop
• Plop Next.js Generators

Next.js plugins

• next-i18next
• next-sitemap

Project setup

# Install dependencies
npm ci

# Start the dev server
npm run dev

Use one of the user credentials to log in to the application

# user1
    email: '[e-mail]'
    password: 'pasword12345'

# user2
    email: '[e-mail]'
    password: 'pasword12345'

# user3
    email: '[e-mail]'
    password: 'pasword12345'

API

Cekila = Cedevita + Tekila

Documentation

• https://cekila.infinum.co/api/v1/docs/index.html

Project repository

• https://github.com/infinum/rails-jsonapi-example-app

Deployment

• Infinum Handbook - Deployment

Git workflow

• Infinum Handbook - Branching

Secrets

Installation

You need to install secrets_cli gem. Explained here

gem install secrets_cli

Configuration

Create a new token on GitHub with read:org permissions.

Add 3 new environment variables to .zshrc file:

export VAULT_ADDR=https://vault.byinfinum.co:8200
export VAULT_AUTH_METHOD=github
export VAULT_AUTH_TOKEN={your_github_token}

Don't forget to restart your exec $SHELL

Check the secrets_cli prerequisites section for more details.

Pull the secrets

Pull the secrets for the specific environment. Explained here

secrets pull -e development

Vault dashboard

Example link to Vault dashboard:

• development
• staging

You should log in with the GitHub method and use VAULT_AUTH_TOKEN for the token.

Styleguide

This project is using the styleguide as defined in the Infinum Handbook.

Project Structure

• Infinum Handbook - Project Structure

Starting a new project from this template

If you need to start a new project from this template, you have these options:

1. Stripped down version of the App from project-starter-template branch

npx create-next-app@latest PROJECT_NAME -e https://github.com/infinum/JS-React-Example/tree/project-starter-template --use-npm

2. Full-blown example App from the master branch

npx create-next-app@latest PROJECT_NAME -e https://github.com/infinum/JS-React-Example --use-npm

Note: replace PROJECT_NAME with the name of your project

Once you have created your new project, you can push it to an existing repository using the following commands:

git remote add origin [e-mail]:infinum/REPOSITORY_NAME
git branch -M main
git push -u origin main

Note: Replace REPOSITORY_NAME with the name of your repository. These commands will add the remote repository, rename the branch to main, and push your changes to the remote repository.

Credits

JS-React-Example is maintained by Infinum.