A full-stack application for splitting expenses among groups of people, built with FastAPI, React, and Supabase.
- User authentication and authorization
- Create and manage expense groups
- Add and track expenses
- Split expenses equally or custom amounts
- Upload expense receipts
- View balances and suggested settlements
- Profile management with profile pictures
- Git
- Docker and Docker Compose
- Node.js 18+ (for local development)
- Python 3.9+ (for local development)
- Supabase account and project
- GitHub account
- Railway account
- Vercel account
git clone <your-repository-url>
cd expense-splitter
- Create a
.env
file in the root directory with the following variables:
SUPABASE_URL=your_supabase_url
SUPABASE_KEY=your_supabase_anon_key
SUPABASE_DB_PASSWORD=your_supabase_db_password
DATABASE_URL=your_database_url
JWT_SECRET=your_jwt_secret
- Create a
.env
file in the frontend directory:
VITE_API_URL=http://localhost:8000
The easiest way to deploy both the frontend and backend is using Docker Compose:
# Build and start the containers
docker-compose up -d --build
# View logs
docker-compose logs -f
# Stop the containers
docker-compose down
The services will be available at:
- Frontend: http://localhost:3000
- Backend API: http://localhost:8000
- API Documentation: http://localhost:8000/docs
- Navigate to the backend directory:
cd backend
- Build the Docker image:
docker build -t expense-splitter-backend .
- Run the container:
docker run -d \
-p 8000:8000 \
--env-file ../.env \
--name expense-splitter-backend \
expense-splitter-backend
- Navigate to the frontend directory:
cd frontend
- Build the Docker image:
docker build -t expense-splitter-frontend .
- Run the container:
docker run -d \
-p 3000:3000 \
-e VITE_API_URL=http://localhost:8000 \
--name expense-splitter-frontend \
expense-splitter-frontend
- Create a new GitHub repository
- Push your code to GitHub:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your-github-repo-url>
git push -u origin main
- Log in to Railway
- Click "New Project" → "Deploy from GitHub repo"
- Select your repository and the backend directory
- Add the following environment variables in Railway:
SUPABASE_URL
SUPABASE_KEY
SUPABASE_DB_PASSWORD
DATABASE_URL
JWT_SECRET
- Railway will automatically detect the Dockerfile and deploy
- Copy the deployment URL for the frontend configuration
- Log in to Vercel
- Click "New Project" → Import your GitHub repository
- Select the frontend directory as the root directory
- Add the following environment variable:
VITE_API_URL
: Your Railway backend URL
- Deploy the project
- In your backend
main.py
, update the CORS origins to include your Vercel domain:
app.add_middleware(
CORSMiddleware,
allow_origins=[
"https://your-vercel-domain.vercel.app",
"http://localhost:3000"
],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
- Commit and push the changes:
git add .
git commit -m "Update CORS settings"
git push
- Create a new Supabase project
- Run the database setup script:
cd backend
python supabase_setup.py
- Create and activate a virtual environment:
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
- Install dependencies:
pip install -r requirements.txt
- Run the development server:
uvicorn main:app --reload
- Install dependencies:
npm install
- Start the development server:
npm run dev
The application uses Alembic for database migrations:
# Generate a new migration
alembic revision --autogenerate -m "description"
# Apply migrations
alembic upgrade head
# Rollback one version
alembic downgrade -1
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Create a Pull Request
-
Get the required secrets:
Railway:
- Go to Railway dashboard → Project Settings
- Create a new API Key
- Copy the token value
Vercel:
- Go to Vercel dashboard → Project Settings → General
- Copy the following values:
- Project ID
- Org ID
- Go to Settings → Tokens
- Create and copy a new token
-
Add secrets to GitHub:
- Go to your GitHub repository → Settings → Secrets and variables → Actions
- Add the following secrets:
# Backend secrets RAILWAY_TOKEN=your-railway-token SUPABASE_URL=your-supabase-url SUPABASE_KEY=your-supabase-key DATABASE_URL=your-database-url JWT_SECRET=your-jwt-secret # Frontend secrets VERCEL_TOKEN=your-vercel-token VERCEL_ORG_ID=your-org-id VERCEL_PROJECT_ID=your-project-id VITE_API_URL=your-railway-backend-url
-
Push your code to trigger the workflows:
git add .
git commit -m "Add GitHub Actions workflows"
git push
The GitHub Actions will:
- Run tests for both frontend and backend
- Deploy backend to Railway on successful push to main
- Deploy frontend to Vercel on successful push to main
This project is licensed under the MIT License.