Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/santospatrick/sample-nextjs-app
Sample app based on "santospatrick/nextjs-boilerplate-advanced"
https://github.com/santospatrick/sample-nextjs-app
Last synced: 4 days ago
JSON representation
Sample app based on "santospatrick/nextjs-boilerplate-advanced"
- Host: GitHub
- URL: https://github.com/santospatrick/sample-nextjs-app
- Owner: santospatrick
- Created: 2022-07-27T00:28:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-08-06T18:28:58.000Z (over 2 years ago)
- Last Synced: 2024-11-09T17:46:38.982Z (2 months ago)
- Language: TypeScript
- Homepage: https://sample-nextjs-app.santospatrick.com
- Size: 1.71 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# sample-nextjs-app
> Next.js boilerplate made with Chakra-UI + Typescript + React-table + React-hook-form
[](https://app.netlify.com/sites/sample-nextjs-app/deploys)
[](https://www.digitalocean.com/?refcode=125ecf6a44b8&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)
- [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 |
|---------|--------|
| [](https://app.netlify.com/start/deploy?repository=https://github.com/santospatrick/nextjs-boilerplate-advanced) | [](https://vercel.com/new/clone?repository-url=https://github.com/santospatrick/nextjs-boilerplate-advanced) |
## Instructions
> How to get the most out of this boilerplate 🚀
[](https://slides.com/santospatrick/nextjs-chakraui-typescript)
## 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
```