Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/santospatrick/nextjs-boilerplate-advanced

Next.js boilerplate made with Chakra-UI + Typescript + React-table + React-hook-form
https://github.com/santospatrick/nextjs-boilerplate-advanced

boilerplate chakra-ui chakra-ui-react netlify nextjs react react-hook-form react-table sonarcloud storybook styled-components typescript vercel

Last synced: 3 months ago
JSON representation

Next.js boilerplate made with Chakra-UI + Typescript + React-table + React-hook-form

Host: GitHub
URL: https://github.com/santospatrick/nextjs-boilerplate-advanced
Owner: santospatrick
License: mit
Created: 2022-03-27T16:56:31.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2024-04-26T21:39:47.000Z (9 months ago)
Last Synced: 2024-10-12T05:45:18.099Z (4 months ago)
Topics: boilerplate, chakra-ui, chakra-ui-react, netlify, nextjs, react, react-hook-form, react-table, sonarcloud, storybook, styled-components, typescript, vercel
Language: TypeScript
Homepage: https://sample-nextjs-app.santospatrick.com
Size: 3.35 MB
Stars: 45
Watchers: 3
Forks: 7
Open Issues: 11
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

awesome - santospatrick/nextjs-boilerplate-advanced - 💅 Next.js boilerplate made with Chakra-UI + Typescript + React-table + React-hook-form (TypeScript)

README

        # `santospatrick/nextjs-boilerplate-advanced`

> Next.js boilerplate made with Chakra-UI + Typescript + React-table + React-hook-form

[![Netlify Status](https://api.netlify.com/api/v1/badges/0e6e63e0-f1fe-44f0-baf2-253db63e4d79/deploy-status)](https://app.netlify.com/sites/sample-nextjs-app/deploys)

![eslint](https://img.shields.io/badge/eslint-3A33D1?style=flat&logo=eslint&logoColor=white)

![prettier](https://img.shields.io/badge/prettier-1A2C34?style=flat&logo=prettier&logoColor=F7BA3E)

![typescript](https://img.shields.io/badge/TypeScript-007ACC?style=flat&logo=typescript&logoColor=white)



![vscode](https://img.shields.io/badge/Visual_Studio_Code-0078D4?style=flat&logo=visual%20studio%20code&logoColor=white)

[![DigitalOcean Referral Badge](https://web-platforms.sfo2.digitaloceanspaces.com/WWW/Badge%203.svg)](https://www.digitalocean.com/?refcode=125ecf6a44b8&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)

[![SonarCloud](https://sonarcloud.io/images/project_badges/sonarcloud-white.svg)](https://sonarcloud.io/summary/new_code?id=santospatrick_nextjs-boilerplate-advanced)

- [Live Demo](https://sample-nextjs-app.santospatrick.com)

- [Storybook Demo](https://main--62e089a345749171c6216585.chromatic.com)



## Usage

1. Initialize your project with this command:

```bash

yarn create next-app -e https://github.com/santospatrick/nextjs-boilerplate-advanced

```

2. Duplicate `.env.example` to `.env.local` fulfilling variables as needed

```bash

cp .env.example .env.local

```

3. Run the following commands:

```bash

yarn install

yarn dev # start development server

```

4. Done 🎉

## Deployment

- Run the following commands:

```bash

yarn build # this command will fail if there is any Typescript or Lint errors

yarn start

```

- Or, deploy on [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/) (don't forget about environment variables):

| Netlify | Vercel |

|---------|--------|

| [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/santospatrick/nextjs-boilerplate-advanced) | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/santospatrick/nextjs-boilerplate-advanced) |

## Instructions

> How to get the most out of this boilerplate 🚀

[![Slides.com template presentation](docs/slides.png)](https://slides.com/santospatrick/nextjs-chakraui-typescript)

## MJML usage

- You can generate your e-mail templates from MJML by running the following command:

```

yarn emails

```

The generated `.html` files will be located in `./emails/dist/`

- You can also watch for MJML file changes in your `./emails/templates` folder by running:

```

yarn emails:watch

```

Any change in the `.mjml` files will generate new `.html` template files.

## Features

### `v1`

- [x] Authentication screens pre-built

- [x] Server side rendering

- [x] Forms (compatible with `react-hook-form`)

  - [x] Text Input (masked/normalized)

  - [x] Date Input

  - [x] Upload Input

  - [x] Autocomplete/Select Input

  - [x] Number Input

  - [x] Phone Input

  - [x] Textarea Input

  - [x] Schema validation with `yup`

- [x] Data table with inline editing

- [x] Layouts

- [x] CRUD example

- [x] Modal with fullscreen option

- [x] Email templates for authentication flow

- [x] VSCode workspace recommendations

- [x] Profile page for user editing

- [x] Collapsable & nested menu

- [x] Code Generator (component, form, and page)

- [X] VSCode debug setup

### `v2`

- [ ] Advanced filter for data tables (like Notion)

- [ ] Form builder

## Technologies

- [x] Next.js

- [x] Typescript

- [x] Chakra UI

- [x] Next SEO

- [x] React Table

- [x] Eslint/Prettier

- [x] React Toastify

- [x] React Query

- [x] React Hook Form

- [x] NProgress

- [x] Git hooks

- [x] Perfect scrollbar

- [x] Mjml

- [x] useHooks Typescript

- [x] Utility Types

- [x] Storybook

- [x] Plop (Template Generator)

## Storybook

In order to see storybook, run development server with following command:

```bash

yarn install # if you didn't yet :)

yarn storybook # start server at http://localhost:6006

```

### Contributors

    

        

            

            


            _{Patrick Santos Bitonti Teixeira}

        

    

    

        

            

            


            _{Lincoln M. Costa}

        

    

    

        

            

            


            _{João Paulo Rodrigues}