Rentals

Are you ready to explore the ever expanding horizons—no strings attached? Checkout is free.

A full-stack web app for browsing and booking rental properties.

Overview

Rentals is a comprehensive property rental application featuring real-time search, user authentication, interactive maps, and property reviews. Built as a monorepo using Yarn workspaces, it demonstrates modern web development practices with end-to-end type safety, automated code quality checks, and structured logging.

Features

• Property Management - Browse, search, and filter vacation rentals
• User Authentication - Secure Google OAuth 2.0 integration
• Location Services - Interactive maps with nearby places search
• Reviews & Ratings - Property and host review system
• Type-Safe API - GraphQL with automatic type generation
• Modern UI - Responsive design with Chakra UI and TailwindCSS

Tech Stack

Frontend

• React 18 with TypeScript and Vite
• Apollo Client for GraphQL data management
• Chakra UI + TailwindCSS for styling
• Zustand for state management
• GraphQL Code Generator for type safety

Backend

• Node.js with Express
• Apollo Server 4 (GraphQL)
• MongoDB 6 with Atlas
• Winston for structured logging
• Zod for runtime validation

Development Tools

• Prettier - Code formatting
• ESLint - Code linting
• Husky + lint-staged - Pre-commit hooks
• TypeScript - Strict mode enabled

APIs & Services

• Google OAuth 2.0
• Google Maps (Geocoding & Places API)

Prerequisites

• Node.js v18.0.0 or higher
• Yarn 1.22+ package manager
• MongoDB Atlas account
• Google Cloud Platform account (for OAuth and Maps API)

Quick Start

1. Clone and Install

git clone <repository-url>
cd rentals
yarn install

2. Environment Setup

Create a .env file in /packages/api:

PORT=4000
JWT_SECRET=your-jwt-secret-here
SESSION_SECRET=your-session-secret-here
DB_USER=your-mongodb-username
DB_USER_PASSWORD=your-mongodb-password
DB_CLUSTER=your-cluster.mongodb.net
G_CLIENT_ID=your-google-client-id
G_GEOCODE_KEY=your-google-maps-api-key
PUBLIC_URL=http://localhost:5173
NODE_ENV=development

3. Configure External Services

MongoDB Atlas:

1. Create account at MongoDB Atlas
2. Create a cluster and get connection credentials
3. Whitelist your IP address

Google Cloud Platform:

1. Create project at Google Cloud Console
2. Enable APIs: OAuth 2.0, Maps Places API, Geocoding API
3. Create OAuth 2.0 credentials and API key
4. Add http://localhost:5173 to authorized redirect URIs

4. Seed Database & Run

# Seed the database with sample data
yarn seed

# Run both API and web app concurrently
yarn dev

• API: http://localhost:4000
• Web App: http://localhost:5173

Project Structure

rentals/
├── packages/
│   ├── api/                      # GraphQL API Server
│   │   ├── src/
│   │   │   ├── resolvers/       # GraphQL resolvers & type definitions
│   │   │   ├── lib/             # Utilities, types, logger
│   │   │   ├── auth/            # Google OAuth integration
│   │   │   ├── database/        # MongoDB connection
│   │   │   └── index.ts         # Express + Apollo Server setup
│   │   ├── eslint.config.js
│   │   ├── tsconfig.json
│   │   └── package.json
│   └── web/                      # React Frontend
│       ├── src/
│       │   ├── components/      # Reusable React components
│       │   ├── pages/           # Page-level components
│       │   ├── lib/             # GraphQL queries, mutations, Apollo setup
│       │   ├── store/           # Zustand state management
│       │   └── hooks/           # Custom React hooks
│       ├── eslint.config.js
│       ├── vite.config.ts
│       └── package.json
├── .husky/                       # Git hooks (pre-commit)
├── .prettierrc.json             # Prettier configuration
├── .lintstagedrc.json           # Lint-staged configuration
├── package.json                  # Root workspace configuration
└── README.md

Available Scripts

Development

• yarn dev - Run both API and web app concurrently
• yarn start:api - Start API server only
• yarn start:web - Start web app only
• yarn seed - Seed database with sample data

Build & Production

• yarn build - Build both packages for production
• yarn start - Build and run in production mode
• yarn clean - Remove all build artifacts

Code Quality

• yarn format - Format all code with Prettier
• yarn format:check - Check code formatting
• yarn lint - Lint all packages
• yarn lint:fix - Fix auto-fixable linting issues
• yarn type-check - Run TypeScript type checking

GraphQL

• yarn gen:schema - Generate GraphQL schema
• yarn gen:generate - Generate TypeScript types from GraphQL

Development Guidelines

Code Quality

• Automatic formatting - Prettier runs on commit via Husky + lint-staged
• Type safety - TypeScript strict mode enabled across the project
• GraphQL types - Auto-generated from schema for type safety
• Input validation - Zod schemas for runtime validation
• Structured logging - Winston logger for API debugging

GraphQL Development

• Schema defined in packages/api/src/resolvers/typeDefs.ts
• Resolvers organized by domain in packages/api/src/resolvers/
• Frontend types auto-generated in packages/web/src/lib/graphql/__generated__/

Component Structure

• Reusable components in packages/web/src/components/
• Page components in packages/web/src/pages/
• Follow Chakra UI theming conventions

State Management

• Global auth state managed with Zustand
• GraphQL cache managed by Apollo Client
• Local component state with React hooks

Troubleshooting

MongoDB Connection Issues

• Verify IP address is whitelisted in MongoDB Atlas Network Access
• Check DB_USER, DB_USER_PASSWORD, and DB_CLUSTER are correct
• Ensure cluster is active and accessible

Google API Issues

• Verify API keys are set correctly in .env
• Check required APIs are enabled in Google Cloud Console
• Confirm OAuth redirect URIs include http://localhost:5173
• Check API quotas haven't been exceeded

Build Errors

• Run yarn clean to remove stale build artifacts
• Delete node_modules and run yarn install again
• Ensure Node.js version is 18.0.0 or higher

Linting/Formatting Issues

• Run yarn format to auto-format code
• Run yarn lint:fix to fix auto-fixable issues
• Check ESLint config files in each package