CarNav - A Learning Journey in AI Product Development

🎓 Project Context

This is a personal learning project I built to understand how to build AI-powered products. As a non-technical Product Manager transitioning into AI-oriented roles, I wanted to learn by building something substantial.

📖 The Origin Story

Back in 2022, I co-founded MentorPlus, a startup where we envisioned building exactly what CarNav is today - a platform to help people discover relevant professional profiles and career paths through natural language queries. However, at that time, I lacked the technical skills to build it myself, and we couldn't find the right technical co-founder to bring the vision to life.

Fast forward to 2024-2025, and the landscape has completely changed. With the emergence of AI agents and advanced coding assistants, I realized I finally had the tools to tackle this challenge myself. This project represents not just a learning journey, but steps towards the fulfillment of a vision I've carried for years - finally made possible by AI-powered development tools.

Important Notes:

• This is a learning project, not a production-ready product
• Dataset: ~14,000 LinkedIn profiles (limited scope for learning)
• Built to understand the end-to-end flow of AI-powered systems
• All documentation reflects my learning journey and decision-making process
• Enabled by AI coding assistants - showing what's possible when PMs can build

🧠 What I Learned

Through building CarNav, I explored and learned about:

1. APIs - How REST APIs work, API design, request/response patterns, error handling
2. LLMs - How Large Language Models work, their capabilities and limitations, when to use them
3. LLM Fine-tuning - Understanding when and how to fine-tune models, trade-offs involved
4. Prompt Engineering - Crafting effective prompts, iterating on prompts, prompt patterns, cost considerations
5. Cost, Speed, and Quality Trade-offs - Balancing API costs, response times, and output quality in real-world scenarios
6. System Design - Designing end-to-end systems, component interactions, data flow patterns
7. Architecture - Understanding data flow, service boundaries, modular design, scalability considerations
8. Database Design - MongoDB schema design, indexing strategies, query optimization, performance tuning
9. Full-Stack Development - Next.js, React, TypeScript, building complete applications from frontend to backend

🏗️ System Architecture - The Learning Flow

One of the key things I learned was how to design a complete system flow that takes a natural language query and returns relevant results:

User Query (Natural Language)
    ↓
LLM Parser (Gemini API)
    ↓
Structured Query (JSON)
    ↓
Search API (/api/search)
    ↓
MongoDB Query Builder
    ↓
MongoDB Database
    ↓
Results Processing
    ↓
Frontend Display

What I learned from each step:

• LLM Parser: How to structure prompts for consistent JSON output, handling edge cases, managing API costs, and iterating on prompt design to improve accuracy
• Search API: Building RESTful endpoints, error handling, input validation, response formatting, and API design patterns
• MongoDB Query Builder: Translating structured queries into MongoDB operations, understanding query performance, and optimizing database interactions
• MongoDB: Query construction, indexing strategies, performance optimization, understanding when to use different query patterns
• Frontend: State management, API integration, user experience design, handling loading states and errors

🚀 Quick Start

Prerequisites

• Node.js 18+ (LTS version recommended)
• npm or yarn
• MongoDB (for data storage)
• Git

Installation

1. Clone the repository:

git clone <repository-url>
cd CarNav

2. Install root dependencies (for scripts):

npm install

3. Install frontend dependencies:

cd carnav
npm install

4. Set up environment variables (root + frontend):

   This project intentionally uses two separate env files:

   • A root .env for backend scripts and data tooling
   • A carnav/.env.local for the Next.js web app

   Both have committed example files to guide setup.

   # From the repository root:
   # 1) Backend/scripts environment (root)
   cp .env.example .env
   
   # 2) Frontend (Next.js app) environment
   cd carnav
   cp .env.local.example .env.local

   Then open each new file (.env and carnav/.env.local) and fill in the values as described below and in the comments inside the example files.

5. Run the development server:

cd carnav
npm run dev

Open http://localhost:3000 with your browser to see the result.

🔐 Environment Configuration – How the Two .env Files Work

To keep things clear while learning, the project separates concerns:

• Root .env (backend scripts, data tooling)

  • Based on: .env.example (committed to git)
  • Used by: scripts under scripts/ (e.g., data ingestion, image migration, maintenance tools)
  • Typical variables (see .env.example for the full list and structure):
    • MongoDB (scripts): MONGODB_URI, MONGODB_PROD_DB_NAME, MONGODB_PROD_PROFILE_COLLECTION_NAME, MONGODB_TEST_DB_NAME, MONGODB_TEST_PROFILE_COLLECTION_NAME
    • External APIs: PROXYCURL_API_KEY, PROXYCURL_SECOND_API_KEY
    • OpenAI: OPENAI_API_KEY, OPENAI_BASE_URL, MODEL_NAME
    • Google Cloud (shared): GOOGLE_CLOUD_PROJECT_ID, GOOGLE_CLOUD_LOCATION, GOOGLE_API_KEY
    • Cloudflare R2 (images): R2_PROFILE_IMAGES_BUCKET_NAME, R2_PROFILE_IMAGES_BUCKET_PUBLIC_URL, R2_PROFILE_IMAGES_BUCKET_S3_API, R2_ACCOUNT_ID, R2_PROFILE_IMAGES_SCRIPT_TOKEN_VALUE, R2_PROFILE_IMAGES_SCRIPT_TOKEN_ACCESS_KEY_ID, R2_PROFILE_IMAGES_SCRIPT_TOKEN_SECRET_ACCESS_KEY

• carnav/.env.local (Next.js web app)

  • Based on: carnav/.env.local.example (committed to git)
  • Used by: the Next.js app in carnav/ when you run npm run dev or build
  • Typical variables:
    • Firebase (Auth & client SDK): NEXT_PUBLIC_FIREBASE_API_KEY, NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, NEXT_PUBLIC_FIREBASE_PROJECT_ID, NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, NEXT_PUBLIC_FIREBASE_APP_ID, NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID, FIREBASE_ADMIN_SDK_BASE64
    • Google Cloud / Gemini (LLM): GOOGLE_CLOUD_PROJECT_ID, GOOGLE_CLOUD_LOCATION, GOOGLE_API_KEY, GOOGLE_LLM_MODEL, NEXT_PUBLIC_GOOGLE_OAUTH_CLIENT_ID
    • MongoDB (app database access): MONGODB_URI, MONGODB_PROD_DB_NAME, MONGODB_PROD_PROFILES_COLLECTION_NAME, TEST_DB_URI, MONGODB_TEST_DB_NAME, MONGODB_TEST_PROFILES_COLLECTION_NAME

Mental model while learning:
Think of the root .env as “everything my backend scripts and infrastructure need”, and carnav/.env.local as “everything the web app needs at runtime”. The example files in git are your source of truth for which variables exist and what they conceptually represent.

🛠 Technology Stack

Frontend

• Framework: Next.js 14 - Learned server-side rendering, API routes, and React patterns
• Language: TypeScript - Learned type safety, interfaces, and how types help catch errors early
• Styling: Tailwind CSS v4 - Learned utility-first CSS, responsive design, and design system implementation
• UI Components: Custom component library - Learned component design, reusability, and composition patterns
• State Management: React Context API - Learned state management patterns and when to use context vs props

Backend

• Runtime: Node.js - Learned Node.js runtime, async patterns, and server-side JavaScript
• API: Next.js API Routes - Learned REST API design, request handling, and response formatting
• Database: MongoDB - Learned NoSQL database design, querying, indexing, and optimization
• Authentication: Firebase Auth (Google OAuth) - Learned OAuth flows and authentication patterns

AI/LLM Integration

• LLM Provider: Google Gemini API - Learned LLM API integration, prompt engineering, and cost management
• Query Parsing: Custom prompt-based parser - Learned how to structure prompts for consistent structured output

Development Tools

• Linting: ESLint - Learned code quality and consistency
• Testing: Jest - Learned testing patterns and test-driven development
• Package Manager: npm - Learned dependency management

📁 Project Structure

CarNav/
├── carnav/                    # Next.js frontend application
│   ├── src/
│   │   ├── components/        # React components
│   │   ├── pages/             # Next.js pages and API routes
│   │   ├── lib/               # Utility functions and types
│   │   ├── models/            # Data models
│   │   └── styles/            # Global styles
│   └── public/                # Static assets
├── scripts/                   # Backend scripts and utilities
│   ├── core_logic/            # Core business logic
│   ├── data_processing/       # Data processing scripts
│   └── testing/               # Test utilities
├── documentation/             # Project documentation (learning artifacts)
│   ├── core/                  # Core project docs (PRD, Technical Details)
│   ├── architecture/          # Architecture and sequence diagrams
│   ├── development/           # Implementation plans and planning
│   └── reference/             # Reference materials
└── data/                      # Data files (gitignored)

📚 Documentation

Comprehensive documentation is available in the documentation/ directory. These documents represent my learning journey - what I explored, what I decided, and why:

• Core Documentation - PRD, Project Plan, Technical Details, Design Details
• Architecture - System architecture and sequence diagrams showing the learning flow
• Development - Implementation plans showing the learning and iteration process
• Reference - Component library and reference materials

See the Documentation README for a complete guide to navigating these learning artifacts.

🧑‍💻 Development Guidelines

Code Style

• Use TypeScript for all new files
• Follow the ESLint configuration
• Use meaningful component and variable names
• Write comprehensive comments for complex logic (especially important for learning)

Git Workflow

1. Create a new branch for each feature/fix
2. Follow conventional commits
3. Submit PR for review
4. Squash and merge after approval

Running Tests

cd carnav
npm test

📝 License

MIT License

👥 Contributors

• Sashank Kuppa - Initial work and development (learning journey)

🔗 Links

• Documentation - Complete documentation index
• Technical Details - Deep dive into technical implementation
• Design Details - Design system and UX guidelines
• Architecture - System architecture and data flow