Docs: Improve frontend README structure

.env.example

@@ -0,0 +1 @@
+BACKEND_URL=http://localhost:8000

.gitignore

@@ -31,7 +31,9 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env*
+.env
+.env.*
+!.env.example
 
 # vercel
 .vercel

README.md

@@ -1,36 +1,134 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Kaapi-Frontend
 
-## Getting Started
+[![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](https://www.gnu.org/licenses/agpl-3.0)
+![GitHub issues](https://img.shields.io/github/issues-raw/ProjectTech4DevAI/kaapi-frontend)
+[![Discord](https://img.shields.io/discord/717975833226248303.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/BRYzSYha)
 
-First, run the development server:
+This is a thin frontend UI for [Kaapi backend](https://github.com/ProjectTech4DevAI/kaapi-backend) — a platform that acts as a middleware layer, enabling platforms like Avni, Glific, and Dalgo to seamlessly integrate AI functionality.
+
+---
+
+## 📋 Table of Contents
+
+- [Pre-requisite](#pre-requisite)
+  - [Software Dependencies](#software-dependencies)
+    - [npm (via asdf)](#npm-via-asdf)
+  - [Kaapi Backend](#kaapi-backend)
+- [Clone Frontend Repo](#clone-frontend-repo)
+  - [Git commands to clone](#git-commands-to-clone)
+- [Installation](#installation)
+  - [Start frontend server](#start-frontend-server)
+- [Available Scripts](#available-scripts)
+- [Deploying Release on EC2 with CD](#deploying-release-on-ec2-with-cd)
+- [Learn More](#learn-more)
+
+---
+
+## Pre-requisite
+
+### Software Dependencies
+
+#### npm (via asdf)
+
+```bash
+asdf plugin-add nodejs
+asdf install
+```
+
+## Clone Frontend Repo
+
+### Git commands to clone
+
+```bash
+git clone git@github.com:ProjectTech4DevAI/kaapi-frontend.git
+```
+
+---
+
+### Kaapi Backend
+
+You need to set up the [Kaapi backend](https://github.com/ProjectTech4DevAI/kaapi-backend) service and follow the instructions there.
+
+> 💡 Note: Ensure the backend is running and accessible before starting the frontend.
+
+### Kaapi Guardrails Service _(coming soon)_
+
+The Guardrails UI (currently in development) will require the Kaapi Guardrails service to be running alongside the backend. Setup instructions will be added here once the service is available.
+
+> 🚧 No action needed for now — this is a placeholder for when the Guardrails feature lands in `main`.
+
+---
+
+## Installation
+
+1. Copy `.env.example` to `.env` in the project root:
+
+   ```bash
+   cp .env.example .env
+   ```
+
+2. **Do not modify `.env`** unless absolutely required.
+3. Install dependencies:
+
+   ```bash
+   npm install
+   # or
+   yarn
+   ```
+
+---
+
+### Start frontend server
 
 ```bash
 npm run dev
 # or
 yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Visit `http://localhost:3000` to open the app.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Available Scripts
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+```bash
+npm install      # Install dependencies
+npm run dev      # Run app in development mode
+npm run build    # Create optimized production build
+npm run start    # Start the production server
+npm run lint     # Run ESLint
+```
 
-## Learn More
+---
+
+## Deploying Release on EC2 with CD
+
+Deployments are automated via a GitHub Actions CD pipeline that SSHes into the EC2 instance, pulls the latest code, builds, and restarts the server.
 
-To learn more about Next.js, take a look at the following resources:
+### Branch Strategy
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+| Branch    | Environment |
+| --------- | ----------- |
+| `main`    | Staging     |
+| `release` | Production  |
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+### Pipeline Steps
+
+On every push to `main` or `release`, the pipeline automatically:
+
+1. SSHes into the EC2 instance
+2. Runs `git pull` to fetch the latest code
+3. Runs `npm run build` to create an optimized production build
+4. Restarts the server to apply the new build
+
+---
+
+## Learn More
 
-## Deploy on Vercel
+- 🌐 [Kaapi](https://projecttech4dev.org/kaapi/)
+- 📄 [One Pager](https://docs.google.com/document/d/15ulZt-tNnMlK3jjk2Ey2FfJ6Q3iX_8O3qfBE7Lt0spY/edit?usp=sharing)
+- 📄 [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- 📄 [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-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.
+### Chat With Us
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+- 💬 [Discord](https://discord.gg/BRYzSYha)