feat/unit-testing: updated readme

README.md

@@ -1,24 +1,72 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Directory Frontend
+
+This is the frontend for the Directory application, uses  [Next.js](https://nextjs.org/) framework and is bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Version
+
+This project is using Next.js version **14.2.3**.
+
+## 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.
+
+
+## Environment Variables
+
+Make sure to set up your environment variables in a `.env` file at the root of the project. This file should contain all necessary environment variables required for the application to run properly. Here are the key variables you need to define:
+
+```dotenv
+# Directory API
+DIRECTORY_API_URL=<directory-api-url>
+
+# Auth API and Client ID
+AUTH_API_URL=<auth-api-url>
+AUTH_APP_CLIENT_ID=<auth-app-client-id>
+PRIVY_AUTH_ID=<privy-auth-id>
+COOKIE_DOMAIN=localhost
+
+# Application Base URL
+APPLICATION_BASE_URL=http://localhost:4200
+
+# HUSKY
+HUSKY_API_URL=<husky-api-url>
+
+# PostHog
+POSTHOG_KEY=<posthog-key>
+POSTHOG_HOST=<posthog-host>
+```
+
 
 ## Getting Started
 
 First, run the development server:
 
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
 Open [http://localhost:4200](http://localhost:4200) with your browser to see the result.
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## Running Tests
+
+To run the tests, use the following command:
+
+```bash
+npm run test
+```
 
 ## Learn More
 
@@ -29,8 +77,4 @@ To learn more about Next.js, take a look at the following resources:
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/core/login/auth-info.tsx

@@ -5,11 +5,12 @@ import { useRef } from 'react';
 import usePrivyWrapper from '@/hooks/auth/usePrivyWrapper';
 import { useAuthAnalytics } from '@/analytics/auth.analytics';
 import { createStateUid } from '@/services/auth.service';
+import { LOGIN_BANNER_URL } from '@/utils/constants';
 
 const AuthInfo = () => {
   // Reference to the dialog element
   const dialogRef = useRef<HTMLDialogElement>(null);
-  const loginBanner = process.env.LOGIN_BANNER_URL;
+  const loginBanner = LOGIN_BANNER_URL
   const router = useRouter();
   const { logout } = usePrivyWrapper();
   const analytics = useAuthAnalytics();

next.config.mjs

@@ -20,7 +20,6 @@ const nextConfig = {
     DIRECTORY_API_URL: process.env.DIRECTORY_API_URL,
     PROTOSPHERE_URL: process.env.PROTOSPHERE_URL,
     GET_SUPPORT_URL: process.env.GET_SUPPORT_URL,
-    LOGIN_BANNER_URL: process.env.LOGIN_BANNER_URL,
     PRIVY_AUTH_ID: process.env.PRIVY_AUTH_ID,
     DIRECTORY_API_URL: process.env.DIRECTORY_API_URL,
     APPLICATION_BASE_URL: process.env.APPLICATION_BASE_URL,

utils/constants.ts

@@ -388,7 +388,7 @@ export const TELEGRAM_URL_REGEX = /t\.me\/([^/]+)/;
 export const EMAIL_REGEX = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,})$/;
 
 export const LEARN_MORE_URL = 'https://protosphere.plnetwork.io/posts/Office-Hours-Guidelines-and-Tips-clsdgrbkk000ypocoqsceyfaq';
-
+export const LOGIN_BANNER_URL = 'https://plabs-assets.s3.us-west-1.amazonaws.com/images/login-banner.png';
 const DEFAULT_PRIVACY_VISIBILITY = true;
 
 export const PRIVACY_CONSTANTS = {