RentMeRoom Web Application

A modern, full-stack web application for finding rooms and roommates. Built with React, TypeScript, Node.js, and PostgreSQL.

🚀 Features

• User Authentication - Secure JWT-based authentication
• Room Listings - Create, browse, and manage room listings
• Advanced Search - Filter by location, price, amenities, and more
• Real-time Chat - Instant messaging between users
• Interactive Maps - Google Maps integration for location services
• Image Upload - Cloudinary integration for image processing
• Responsive Design - Mobile-first, responsive UI
• Offline Support - PWA features with offline functionality

🛠️ Tech Stack

Frontend

• React 18 with TypeScript
• Vite for fast development and building
• Tailwind CSS for styling
• React Query for data fetching and caching
• Zustand for state management
• React Hook Form with Zod validation
• Socket.io Client for real-time features

Backend

• Node.js with Express and TypeScript
• PostgreSQL with Prisma ORM
• Redis for caching and sessions
• Socket.io for real-time communication
• JWT for authentication
• Cloudinary for image processing
• Rate limiting and security middleware

DevOps & Tools

• Turborepo for monorepo management
• Docker Compose for development environment
• ESLint & Prettier for code quality
• TypeScript throughout the stack

📁 Project Structure

web/
├── apps/
│   ├── frontend/          # React application
│   └── backend/           # Node.js API server
├── packages/
│   ├── types/            # Shared TypeScript types
│   └── utils/            # Shared utility functions
├── docker-compose.yml    # Development services
└── package.json          # Workspace configuration

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• Docker and Docker Compose
• Git

Installation

1. Clone the repository

   git clone <repository-url>
   cd RentMeRoom/web

2. Install dependencies

   npm install

3. Start development services

   docker-compose up -d

4. Set up environment variables

   cp .env.example .env
   # Edit .env with your configuration

5. Set up the database

   cd apps/backend
   npm run db:push
   npm run db:seed

6. Start development servers

   # From the root web directory
   npm run dev

This will start:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000
• Database Admin: http://localhost:8080

Development Workflow

• Frontend development: cd apps/frontend && npm run dev
• Backend development: cd apps/backend && npm run dev
• Run all services: npm run dev (from root)
• Build all packages: npm run build
• Run tests: npm run test
• Lint code: npm run lint

🗄️ Database

The application uses PostgreSQL with Prisma ORM. Key models include:

• User - User accounts and authentication
• UserProfile - Extended user information
• RoomListing - Room listings with details
• ChatConversation - Chat conversations
• ChatMessage - Individual messages

Database Commands

# Generate Prisma client
npm run db:generate

# Push schema changes
npm run db:push

# Create and run migrations
npm run db:migrate

# Seed database with sample data
npm run db:seed

# Reset database
npm run db:reset

🔧 Configuration

Environment Variables

Copy .env.example to .env and configure:

• Database: PostgreSQL connection string
• Redis: Redis connection for caching
• JWT: Secrets for token generation
• Cloudinary: Image upload service
• Google Maps: API key for maps
• Email: SMTP configuration for notifications

API Endpoints

• GET /health - Health check
• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/listings - Get room listings
• POST /api/listings - Create room listing
• GET /api/users/profile - Get user profile

🧪 Testing

The project includes comprehensive testing:

• Unit Tests - Component and function testing
• Integration Tests - API endpoint testing
• Property-Based Tests - Universal property validation
• E2E Tests - Full user journey testing

Run tests with:

npm run test

🚀 Deployment

Production Build

npm run build

Environment Setup

1. Set up production database (PostgreSQL)
2. Set up Redis instance
3. Configure environment variables
4. Set up Cloudinary account
5. Get Google Maps API key

Deployment Options

• Frontend: Vercel, Netlify, or any static hosting
• Backend: Railway, Heroku, DigitalOcean, or AWS
• Database: Railway, Supabase, or managed PostgreSQL

📚 Learning Resources

This project is designed for learning full-stack development:

• React & TypeScript - Modern frontend development
• Node.js & Express - Backend API development
• PostgreSQL & Prisma - Database design and ORM
• Real-time Features - WebSocket implementation
• Authentication - JWT and security best practices
• Testing - Comprehensive testing strategies
• DevOps - Docker, CI/CD, and deployment

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests for new features
5. Ensure all tests pass
6. Submit a pull request

📄 License

This project is licensed under the MIT License.

🆘 Support

If you encounter any issues:

1. Check the troubleshooting guide
2. Search existing issues
3. Create a new issue with detailed information

---

Happy coding! 🎉