TODO PROJECT

Local Development Setup

This project uses PNPM for package management. So, make sure to install PNPM to use the project.

From your terminal:

pnpm dev

This starts your app in development mode, rebuilding assets on file changes.

To build your app for production (also build storybook in the out directory):

pnpm build

Then run the app in production mode:

pnpm start

Project Structure

We are using Next.js with App Router for this project. Next.js has a well-defined directory structure that must be used to make sure the app runs properly. Read more about Next.js here

'App' directory

In the Next.js App Router, a page is a React Component exported from a page.js, page.jsx, page.ts, or page.tsx file in the app directory. Each page is associated with a route based on its file/directory name. Read more about App here. An example is given below -

Directory Structure

app
|__ members
|   |__ [id]
|   |   |__ page.js
|   |
|   |__ page.js
|
|__ blogs
|   |__ page.js
|
|__ page.js

Routes Created by Next.js

/
/members
/members/[id]
/blogs

Note: In /members/[id] the [id] part is dynamic it can be 1, 2, a, etc.

Components

All the reusable components are created inside /components directory.

Public

All the public assets like icons, images are stored inside the public directory.

Storybook

To run Storybook in development mode:

pnpm storybook

We can also build storybook in order to deploy it from storybook-static folder

pnpm build:storybook