setup.txt

1) First install vite in the client folder "npm create vite@latest ./"
2) Setup the tailwindcss latest version from the docs "https://tailwindcss.com/docs/installation/using-vite"
3) Install React Router for routing and use it to navigate "npm install react-router-dom"
4) Install React flow for tree visualizer "npm install reactflow"
5) Install Heroicons for icons "npm install @heroicons/react"
6) Install Redus for state management and Axios for API calls
   "npm install @reduxjs/toolkit react-redux axios"
7) After Completing the fronend part Create a folder for backend which is server
8) Initialize the server folder as new Node.js Project
   "npm init -y"
9) Install Production Dependencies
   Express: The server framework
   Prisma: The ORM client for interacting with the database
   @prisma/client: The auto-generated database client
   cors: For cross-origin requests (React <-> Express)
   dotenv: To manage environment variables (like DB connection string)
   jsonwebtoken: For creating and verifying JWTs
   bcryptjs: For hashing passwords
   "npm install express @prisma/client prisma cors dotenv jsonwebtoken bcryptjs"
10) Install nodemon to automatically restart your server when you make changes
    "npm install -D nodemon"
11) Add a dev script to your server/package.json
    "scripts": {
        "start": "node index.js",
        "dev": "nodemon index.js"
    }
12) Initialize Prisma "npx prisma init"
13) Create a docker-compose.yml file inside of the root directory
    /your-project-root
    ├── client/
    ├── server/
    └── docker-compose.yml

    Copy and paste this code into your docker-compose.yml file
    version: '3.8'

    services:
      # This is the name of our service
      postgres-db:
        # We are using the official postgres image
        image: postgres:15

        # This gives your running container a friendly name
        container_name: treeview_postgres

        # These are the credentials your database will be created with
        environment:
          POSTGRES_USER: (User)
          POSTGRES_PASSWORD: (Password)
          POSTGRES_DB: treeview_db

        # This connects your computer's port 5432 to the container's port 5432
        ports:
          - "5432:5432"

        # This is very important: It saves your database data
        # in a folder named 'pgdata' on your computer.
        # This way, your data is safe even if you stop the container.
        volumes:
          - ./pgdata:/var/lib/postgresql/data

    volumes:
      pgdata:
14) Start your database "docker-compose up -d"
    Run docker-compose down to stop it later
15) open your server/.env file and set your DATABASE_URL
    DATABASE_URL="postgresql://(USER):(PASSWORD)@(HOST):(PORT)/(DATABASE)?schema=public"
16) you can run the Prisma migration to create your tables "npx dotenv -- npx prisma migrate dev --name init"
17) Run this command to generate prisma client "npx dotenv -- npx prisma generate"

Extra:
client side
React Toaster "npm install react-toastify"

18) Now for AI calls we are using Gemini so install Google AI SDK "npm install @google/generative-ai"
    Go to Google AI Studio
    Log in and select "Get API key"
    Create a new API key for this project
    Copy the key
    Add the key to your .env