TODO PROJECT

Setup SSL proxy

To run the app locally on https://dev.realdevsquad.com/ add 127.0.0.1 dev.realdevsquad.com in your /etc/hosts. This step is required if you want to call the staging API.

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:

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