frontend-example-next

A simple Next.js project that serves user interface for TODO web app.

Covered Features

• v0.3 or later

  • Functional components with Typescript
  • UI components development with Storybook
  • UI components with Chakra UI and Emotion
  • Form validation with Formik and Yup.
  • User authentication with NextAuth.js working with an OpenID Connect (OAuth 2.0) provider.
  • Backend for fronend with tRPC, zod and Prisma.

• v0.2

  • Functional components with Typescript
  • UI components development with Storybook
  • UI components with Chakra UI and Emotion
  • Form validation with Formik and Yup.
  • User authentication with NextAuth.js working with an OpenID Connect (OAuth 2.0) provider.
  • API call with SWR and SDK generated by OpenAPI Generator.
  • API authentication using access tokens provided by OpenID Connect provider (SPA pattern).

How to start development

Start the backend server for development

Clone fullstack-example/backend" repository and run the following commands.

# Install dependencies
npm install

# Start OIDC provider
npm run oidc-provider

# Start the backend server  * need to be done in a new console.
npm run start:dev

Install dependencies

npm install

Run storybook

npm run storybook

Run the application in the development mode

npm run dev

Run the application in the production mode

npm run start

Compile and minify for production

npm run build

Lint and fix files

npm run lint