Unify FirstPrinciples showcase page structure to match standard format

Author: kesku

docs/showcase/first-principle.mdx

@@ -1,85 +1,91 @@
 ---
-title: FirstPrinciples App | AI-Powered Learning Roadmaps 
-description: An AI-powered learning roadmap generator that helps users identify specific learning topics and provides personalized learning plans. 
-sidebar_position: 1 
-keywords: [firstprinciples, learning, roadmap, education, AI, personalized, Flask, React, OpenAI, Perplexity]
+title: FirstPrinciples | AI Learning Roadmap Generator
+description: An AI-powered learning roadmap generator that uses conversational AI to help users identify specific learning topics and provides personalized step-by-step learning plans
+sidebar_position: 12
+keywords: [firstprinciples, learning, roadmap, education, AI, personalized, flask, react, openai, perplexity]
 ---
 
 **FirstPrinciples App** is an AI-powered tool that transforms your broad learning goals into structured, personalized roadmaps. Through an interactive chat, the AI engages you in a conversation, asking targeted questions to refine your learning needs before generating a detailed plan. The application is built to help you learn more efficiently by providing a clear path forward.
 
-https://github.com/user-attachments/assets/6016c5dd-6c18-415e-b982-fafb56170b87
+<video
+  controls
+  className="w-full aspect-video rounded-xl"
+  src="https://github.com/user-attachments/assets/6016c5dd-6c18-415e-b982-fafb56170b87"
+></video>
 
 ## Features
 
-  * **Interactive Chat Interface**: A simple, conversational interface for defining your learning goals.
-  * **AI-Powered Topic Narrowing**: The AI asks smart, targeted questions to help you specify what you want to learn.
-  * **Session Management**: Each conversation is a managed session, allowing you to have multiple roadmap discussions.
-  * **Visual Progress Indicator**: See a visual cue when the AI has gathered enough information to generate your roadmap.
+* **Interactive Chat Interface** for defining and refining learning goals through conversation
+* **AI-Powered Topic Narrowing** with smart, targeted questions to specify learning objectives
+* **Session Management** allowing multiple roadmap discussions and progress tracking
+* **Visual Progress Indicators** showing when sufficient information has been gathered
+* **Personalized Learning Plans** with structured, step-by-step roadmaps
+* **Conversational AI Flow** combining OpenAI and Perplexity APIs for intelligent interactions
 
-## Setup
+## Prerequisites
 
-### Getting Started
+* Python 3.8+ and pip
+* Node.js 16+ and npm
+* OpenAI API key
+* Perplexity API key
 
-To get the project files, first clone the repository:
+## Installation
 
-```
+```bash
+# Clone the repository
 git clone https://github.com/william-Dic/First-Principle.git
 cd First-Principle
-```
 
------
-
-### Backend Setup
-
-1.  Navigate to the Flask server directory:
-    ```
-    cd flask-server
-    ```
-2.  Install dependencies:
-    ```
-    pip install -r requirements.txt
-    ```
-3.  Create a `.env` file in the `flask-server` directory with your API keys:
-    ```
-    OPENAI_API_KEY = Your_openai_apikey
-    PPLX_API_KEY = Your_perplexity_apikey
-    PERPLEXITY_API_KEY = Your_perplexity_apikey
-    ```
-4.  Run the Flask server:
-    ```
-    python server.py
-    ```
-    The server will run on http://localhost:5000.
-
------
-
-### Frontend Setup
-
-1.  Navigate to the client directory:
-    ```
-    cd client
-    ```
-2.  Install dependencies:
-    ```
-    npm install
-    ```
-3.  Run the React development server:
-    ```
-    npm start
-    ```
-    The client will run on http://localhost:3000.
+# Backend setup
+cd flask-server
+pip install -r requirements.txt
 
-## Usage
+# Frontend setup
+cd ../client
+npm install
+```
 
-1.  Open your browser and go to `http://localhost:3000`.
-2.  Use the chat interface to describe what you want to learn.
-3.  Answer the AI's follow-up questions to help it narrow down your specific needs.
-4.  Once the AI has sufficient information, it will generate your personalized learning roadmap.
+## Configuration
 
------
+Create `.env` file in the `flask-server` directory:
+```ini
+OPENAI_API_KEY=your_openai_api_key
+PPLX_API_KEY=your_perplexity_api_key
+PERPLEXITY_API_KEY=your_perplexity_api_key
+```
 
-## Tech Stack
+## Usage
 
-  * **Frontend**: React
-  * **Backend**: Flask, Python
-  * **AI Engine**: OpenAI API, Perplexity API
+1. **Start Backend**:
+   ```bash
+   cd flask-server
+   python server.py
+   ```
+   Server runs on http://localhost:5000
+
+2. **Start Frontend**:
+   ```bash
+   cd client
+   npm start
+   ```
+   Client runs on http://localhost:3000
+
+3. **Generate Roadmap**: 
+   - Open http://localhost:3000 in your browser
+   - Describe what you want to learn in the chat interface
+   - Answer AI follow-up questions to refine your learning goals
+   - Receive a personalized, structured learning roadmap
+
+## Code Explanation
+
+* **Frontend**: React application with conversational chat interface and progress indicators
+* **Backend**: Flask server managing API calls, session state, and conversation flow
+* **AI Integration**: Combines OpenAI API for conversational flow and Perplexity API for intelligent topic analysis
+* **Session Management**: Tracks conversation state and learning goal refinement
+* **Roadmap Generation**: Creates structured, actionable learning plans based on user input
+* **Conversational Flow**: Implements goal-oriented dialogue to narrow down learning objectives
+
+## Links
+
+- [GitHub Repository](https://github.com/william-Dic/First-Principle.git)
+- [Demo Video](https://github.com/user-attachments/assets/6016c5dd-6c18-415e-b982-fafb56170b87)