GitDocsify Extension ✨🚀

AI-powered browser extension to elevate README files into professional-grade, user-friendly documentation for your GitHub projects. 📚

Note

This browser extension is currently under development

Table of Contents

1. Tech Stack 🛠️
   • Frontend 💻
   • Backend ⚙️
2. Other Libraries & Dependencies 📚
3. Prerequisites ✅
   • Installation Process 📦
4. Setup ⚙️
   • Docker Setup 🐳
   • Frontend Setup & App Run 🚀
   • Backend Setup & Server Run 🌐
5. File Structure 🏗

Tech Stack 🛠️

Frontend 💻

Backend ⚙️

Other Libraries & Dependencies 📚

• @primer/react
• Uvicorn

Prerequisites ✅

Install brew. Install anything below brew, through brew.

• docker (install docker desktop app for your OS)
• brew
• python
• node.js

Installation Process 📦

Install brew

bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install Python

brew install python

Install Node.js

brew install node

Check docker Version

docker --version

Check Python 3 and Pip Version

python3 --version
pip3 --version

Check Node.js Version

node --version

---

Setup ⚙️

• Clone the repository:

git clone https://github.com/AleHS01/gitdocsify-extension.git
cd gitdocsify-extension

Docker Setup 🐳

To run the entire project with Docker, follow these steps:

1. Make sure you have Docker installed:

   • Install Docker
   • Check Docker Version:

     docker --version

2. Build the containers:

docker compose build

3. Start the containers:

docker compose up

• Both the frontend and backend services are going to be running:
  • Frontend will be accessible at http://localhost:5173
  • Backend will be accessibl at http://localhost:8000

4. Stop the containers:

docker compose down

Important

Docker automatically builds the containers and sets up the environment for both the frontend and backend, eliminating the need for manual setup.

If you prefer to manually set up the frontend or backend, follow the steps below:

Frontend Setup & App Run 🚀

1. Navigate to the frontend directory

cd frontend

2. Install Node dependencies

npm install

3. Copy the .env.example file to .env:

cp .env.example .env

4. Update the .env file with your environment variables:

VITE_SUPABASE_URL= your_supabase_url
VITE_SUPABASE_KEY= your_supabase_key
VITE_FRONTEND_URl= your_frontend_local_url or your_frontend_production_url

5. Run Vite development server

npm run dev

6. React app at: http://localhost:5173/

Backend Setup & Server Run 🌐

1. Install Poetry (Python package manager):

# Using pip3
pip3 install poetry
# Or using Homebrew
brew install poetry

2. Navigate to the backend directory from gitdocsify-extension directory

cd backend

3. Install dependecies Python using Poetry

poetry install

4. Copy the .env.example file to .env:

cp .env.example .env

5. Update the .env file with your environment variables:

SUPABASE_URL= your_supabase_url
SUPABASE_KEY= your_supabase_key
PYTHON_ENV= production or development

6. Run the FastAPI app using Uvicorn

# Navigate to directory where main.py is located
cd src/app

# Run FastAPI server with auto reload when changes are saved
uvicorn main:app --reload

7. FastAPI backend server at http://localhost:8000.

🏗 File Structure

/gitdocsify-extension
│
├── /backend                       # Backend application (FastAPI)
│   ├── poetry.lock               # Poetry lock file (dependency versions)
│   ├── pyproject.toml            # Poetry project configuration
│   ├── .env                      # Enviromental Variables
│   ├── dockerfile                # Backend container image
│   ├── /src                       # Source code for the backend
│   │   └── /app                   # Main backend app directory
│   │       ├── __init__.py       # Initializes the app module
│   │       ├── /api               # API-related code
│   │       │   └── __init__.py   # Initializes the API module
│   │       ├── /core              # Core functionalities, e.g., database or service connections
│   │       │   └── supabase.py   # Supabase-related functionality
│   │       ├── main.py           # FastAPI app instance
│   │       ├── /models            # Models for database interactions
│   │       └── /schemas           # Pydantic schemas for validation
│   └── /test                      # Tests for the backend
│       └── __init__.py           # Initializes test module
│
├── /frontend                      # Frontend application (React with Vite)
│    ├── /build                     # Build output directory (generated on build)
│    │   ├── assets                # Static assets (e.g., JS and CSS files)
│    │   ├── index.html            # Entry HTML file for the frontend
│    │   ├── manifest.json         # Metadata for PWA setup & Extension configuration
│    ├── eslint.config.js           # ESLint configuration file
│    ├── index.html                # HTML entry file for the frontend
│    ├── .env                      # Enviromental Variables
│    ├── dockerfile                # Frontend container image
│    ├── package-lock.json         # Lock file for npm dependencies
│    ├── package.json              # Package configuration for the frontend
│    ├── /public                    # Public directory (assets and metadata)
│    │   ├── manifest.json         # Manifest for the frontend app (PWA setup) & Extension configuration
│    ├── /src                        # Source code for the frontend
│    │   ├── App.css               # Main CSS file for the React app
│    │   ├── App.tsx               # Main React component (App)
│    │   ├── /assets                # Static assets for the app
│    │   ├── /components            # Reusable UI components
│    │   │   └── ColorModeSwitcher.tsx # Component for theme switching
│    │   ├── /context               # React Context for app-wide state
│    │   │   └── UserContext.tsx    # User context for managing user state
│    │   ├── index.css             # Global CSS file
│    │   ├── /lib                   # Utility functions or libraries
│    │   │   └── supabase.ts        # Supabase-related utilities
│    │   ├── main.tsx              # Main entry file for React app
│    │   ├── /pages                 # Page components (views)
│    │   │   └── Login.tsx         # Login page component
│    │   │   └── Dashboard.tsx         # User Dashboard page
│    │   │   └── LoginScreen.tsx         # Loading component
│    │   ├── /types                 # TypeScript types for the app
│    │   │   └── user.ts           # User type definition
│    │   ├── /utils                 # TypeScript types for the app
│    │   │   └── ProtectedRoutes.tsx  # Protected Routes Wrapper
│    └── vite.config.ts            # Vite configuration file for bundling
├── docker-compose.yml             #Multi-container Docker setup
├── .dockerignore                 # Excluded files from Docker
├── README.md                    # Project documentation (root level)
└── .gitignore                   # Git ignore file