Skip to content

Getting Started

Jump to bottom
Martian edited this page Nov 9, 2025 · 1 revision

Getting Started with LinkUp

This guide will walk you through setting up LinkUp on your local machine for development.

Prerequisites

Before you begin, make sure you have these installed:

  • Python 3.9+ - For the backend
  • Node.js 18+ - For the frontend
  • PostgreSQL 13+ - For the database
  • Git - For version control

Project Structure

video_call/
├── backend/          # FastAPI backend server
│   ├── main.py      # Main application entry point
│   ├── models.py    # Database models
│   ├── schemas.py   # Pydantic schemas for validation
│   ├── database.py  # Database configuration
│   ├── config.py    # Environment configuration
│   └── alembic/     # Database migrations
│
└── frontend/        # React frontend application
    ├── src/
    │   ├── pages/   # Page components (Home, JoinMeeting, MeetingRoom)
    │   ├── components/ # Reusable UI components
    │   ├── hooks/   # Custom React hooks (WebRTC, WebSocket)
    │   ├── api/     # API client functions
    │   └── utils/   # Utility functions
    └── public/      # Static assets

Backend Setup

1. Clone the Repository

git clone https://github.com/martian56/videoo-call.git
cd videoo-call/backend

2. Create Virtual Environment

python -m venv venv

# On Windows
venv\Scripts\activate

# On macOS/Linux
source venv/bin/activate

3. Install Dependencies

pip install -r requirements.txt

4. Configure Environment Variables

Create a .env file in the backend folder:

# Database
DATABASE_URL=postgresql://username:password@localhost:5432/linkup

# Security
SECRET_KEY=your-secret-key-here-change-in-production

# CORS (adjust based on your frontend URL)
CORS_ORIGINS=http://localhost:5173,http://localhost:3000

# Application
APP_NAME=LinkUp
DEBUG=True

Generate a secure SECRET_KEY:

python -c "import secrets; print(secrets.token_urlsafe(32))"

5. Set Up PostgreSQL Database

# Create the database
createdb linkup

# Or using psql
psql -U postgres
CREATE DATABASE linkup;
\q

6. Run Database Migrations

# Initialize Alembic (if not already done)
alembic init alembic

# Create initial migration
alembic revision --autogenerate -m "Initial migration"

# Apply migrations
alembic upgrade head

7. Start the Backend Server

python main.py

The backend will be running at http://localhost:8000

You can verify it's working by visiting:

  • API docs: http://localhost:8000/docs
  • Health check: http://localhost:8000/health

Frontend Setup

1. Navigate to Frontend Directory

cd ../frontend

2. Install Dependencies

npm install

3. Configure Environment Variables

Create a .env file in the frontend folder:

VITE_API_URL=http://localhost:8000
VITE_WS_URL=ws://localhost:8000

4. Start the Development Server

npm run dev

The frontend will be running at http://localhost:5173

Verify Everything Works

  1. Open your browser and go to http://localhost:5173
  2. Click "Create Meeting" to generate a meeting code
  3. Open another browser tab (or incognito window) and join the meeting
  4. Test features:
    • Turn on/off camera and microphone
    • Send chat messages
    • Share your screen
    • Pin a participant

Common Setup Issues

Backend won't start

Problem: ModuleNotFoundError or import errors

# Solution: Make sure virtual environment is activated
source venv/bin/activate  # or venv\Scripts\activate on Windows
pip install -r requirements.txt

Problem: Database connection errors

# Solution: Check PostgreSQL is running and credentials are correct
# Verify DATABASE_URL in .env matches your PostgreSQL setup

Frontend won't start

Problem: EADDRINUSE - Port already in use

# Solution: Kill the process using port 5173 or change the port
# Windows: netstat -ano | findstr :5173
# macOS/Linux: lsof -ti:5173 | xargs kill

Problem: Cannot connect to backend

# Solution: Verify VITE_API_URL and VITE_WS_URL in frontend/.env
# Make sure backend is running on the correct port

Database migration issues

Problem: Alembic migration fails

# Solution: Reset migrations
alembic downgrade base
alembic upgrade head

Next Steps

Now that you have LinkUp running locally:

Development Tips

Hot Reloading

Both frontend and backend support hot reloading:

  • Frontend: Vite automatically reloads on file changes
  • Backend: FastAPI uses --reload flag (enabled in main.py during development)

Debugging

Backend debugging:

# Add breakpoints in your code
import pdb; pdb.set_trace()

Frontend debugging:

  • Use browser DevTools (F12)
  • Check Console for errors
  • Use React DevTools extension

Running Tests

# Backend tests
cd backend
pytest

# Frontend tests
cd frontend
npm run test

Need help? Check the Troubleshooting page or open an issue.

Clone this wiki locally