Directory Frontend

This is the frontend for the Directory application, uses Next.js framework and is bootstrapped with create-next-app.

Next.js Version

This project is using Next.js version 14.2.3.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository

Folder Structure

The folder structure of this project is organized as follows:

• app/: Contains the main application files, including pages and layout components.

• components/: Contains reusable components categorized into:

  • ui/: Pure components that are reusable and do not manage state.
  • core/: Components used across multiple pages, such as navigation bars and footers.
  • form/: Components specifically designed for form handling and input.
  • page/: Components that are specific to individual pages.

• services/: Contains service files that handle API calls and business logic.

• utils/: Utility functions that can be used throughout the application.

• analytics/: Contains files related to analytics tracking and reporting.

• public/: Contains static assets such as images, fonts, and other resources.

• __tests__/: Contains test files for the application. And its maintains the same folder structure as components.

Steps to run directory frontend service locally

Dependent services:

Name	Type	Purpose	Mandatory
Privy	External	The hybrid auth solution provider for users to login	Yes
PostHog	External	For analytics purpose	No
Directory Backend	Internal	For communicating to the directory database through REST API	Yes
Husky (sandbox mode)	Internal	To leverage the AI assist feature	No
PL Auth service (sandbox mode)	Internal	To manage user auth requests and issue tokens, works in OAuth 2.0 standard	Yes

Step 1: Install dependencies

To install the dependencies use the below command

npm install

Step 2: Create the env file

Use the below command to create .env using .env.example

cp .env.example .env

Step 3: Setup env variables

Set the env variables based on the instructions provided in the .env.example file.

For local development use the test values mentioned in the comments for each env variable.

Step 4: Run the Directory Frontend

Open the terminal and run the following command:

npm run dev

Application will be running on http://localhost:4200

Running Tests

To run the tests, use the following command:

npm run test

Steps to run directory admin frontend service locally

This app is used by admin to approve/reject/edit people and team join requests.

Follow the instructions here to setup and run the directory admin frontend.