# Habibi Dashboard

A complete property management system with a React frontend and FastAPI backend.

Features

Backend (FastAPI)

• User authentication with JWT tokens
• Property management system
• Booking system with availability calendar
• Financial data aggregation and reporting
• Owner management and communication
• Investment tracking and ROI calculations
• Integration with the Sara AI assistant
• PostgreSQL database with SQLAlchemy

Frontend (React)

• Modern React with TypeScript
• State management with React Query
• Form validation with Zod and React Hook Form
• Responsive UI with shadcn UI components and Tailwind CSS
• Protected routes based on authentication
• Real-time dashboard updates

Getting Started

Prerequisites

• Docker and Docker Compose
• Node.js (v18+) for local development
• Python 3.11+ for local development

Setup and Installation

Using Docker (Recommended)

1. Clone the repository

git clone https://github.com/yourusername/habibi-dashboard.git
cd habibi-dashboard

2. Start the application with Docker Compose

docker-compose up

This will start:

• PostgreSQL database on port 5432
• Backend API on port 8000
• Frontend development server on port 5173

3. Access the application:

• Frontend: http://localhost:5173
• Backend API: http://localhost:8000
• API Documentation: http://localhost:8000/api/v1/docs

Local Development Setup

Backend

1. Set up a Python virtual environment

cd backend
python -m venv venv
source venv/bin/activate  # On Windows: venvScriptsactivate
pip install -r requirements.txt

2. Set up the database (requires PostgreSQL installed)

# Create a .env file with your database settings
alembic upgrade head

3. Run the backend server

uvicorn app.main:app --reload

Frontend

1. Install dependencies

npm install

2. Start the development server

npm run dev

Default Credentials

For development purposes, a default admin user is created:

• Email: admin@habibi.com
• Password: admin

Project Structure

habibi-dashboard/
├── backend/              # FastAPI backend
│   ├── app/              # Application code
│   │   ├── api/          # API endpoints
│   │   ├── core/         # Core functionality (config, security)
│   │   ├── crud/         # Database CRUD operations
│   │   ├── db/           # Database setup
│   │   ├── models/       # SQLAlchemy models
│   │   ├── schemas/      # Pydantic schemas
│   │   ├── services/     # Business logic
│   │   └── main.py       # Application entry point
│   ├── migrations/       # Alembic migrations
│   └── tests/            # Backend tests
├── src/                  # React frontend
│   ├── api/              # API client services
│   ├── components/       # React components
│   ├── contexts/         # React contexts
│   ├── hooks/            # Custom React hooks
│   ├── layouts/          # Page layouts
│   ├── lib/              # Utility functions
│   └── pages/            # Page components
├── docker-compose.yml    # Docker Compose configuration
├── Dockerfile.frontend   # Frontend Dockerfile
└── backend/Dockerfile    # Backend Dockerfile

Testing

Backend Tests

cd backend
pytest

Frontend Tests

npm test

Deployment

Docker Deployment

The application can be deployed using Docker Compose with a few adjustments for production:

1. Update the environment variables in docker-compose.yml:

   • Set a secure SECRET_KEY
   • Update BACKEND_CORS_ORIGINS to your production domains
   • Set up proper database credentials

2. Build and start the containers:

docker-compose -f docker-compose.yml -f docker-compose.prod.yml up -d

Hostinger Cloud Deployment

This project is configured to deploy automatically to Hostinger Cloud using GitHub Actions. When you push changes to the main branch, GitHub Actions will:

1. Build the project
2. Deploy the built files to Hostinger via FTP

Setting up deployment secrets

Add the following secrets to your GitHub repository:

• FTP_SERVER: Your Hostinger FTP server address
• FTP_USERNAME: Your Hostinger FTP username
• FTP_PASSWORD: Your Hostinger FTP password

License

This project is licensed under the MIT License - see the LICENSE file for details.