Add Tennis Courts Review App - Mobile-first React Native application with 55+ courts, search, and review functionality

[ADITYABHURAN]

Tennis Courts Review App - Frontend Challenge Submission

Overview

Mobile-first React Native application for browsing and reviewing tennis courts, built with Expo and TypeScript. Users can search for courts, view detailed information, and submit their own reviews with ratings.

Features Implemented

• ✅ 55+ tennis courts with mock data including images, locations, and surface types
• ✅ Real-time search functionality - Filter courts by name as you type
• ✅ Court detail views - View comprehensive court information, ratings, and all user reviews
• ✅ Add review capability - Submit your own reviews with star ratings (1-5) and written comments
• ✅ Interactive review system - New reviews appear immediately with optimistic UI updates
• ✅ Modern, mobile-optimized UI with Material Design principles
• ✅ Full TypeScript implementation for type safety

User Journey

1. Browse & Search - View all 55 courts or use the search bar to find specific courts by name
2. Check Court Details - Tap any court to see full information including location, surface type, indoor/outdoor status, and average rating
3. Read Reviews - See what other users have said, complete with star ratings and comments
4. Give Your Review - Rate the court (1-5 stars), write your feedback, and submit - your review appears instantly!

Technologies

• React Native + Expo SDK 54
• TypeScript
• React Navigation v6
• Material Design-inspired UI

Screenshots

Court List with Search | Court Details with Reviews | Add Your Review

How to Run the Project

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Expo Go app on your mobile device (iOS | Android)

Installation & Running

# Navigate to the project directory
cd frontend-challenge/tennis-courts

# Install dependencies
npm install

# Start the development server
npx expo start

##AI Prompts Used
This project leveraged GitHub Copilot to accelerate development while maintaining full architectural control. AI was used strategically for scaffolding, mock data generation, and debugging guidance.

Prompt 1:
I'm building a mobile-first React Native app for a tennis court review flow. I already have the architecture in mind, but I want a clean implementation pattern for a searchable court list and a court detail screen where users can read and add reviews. The app uses mock data (50+ courts) and only needs local state. Please provide guidance consistent with Expo + TypeScript best practices.
Prompt 2:
Generate a simple and well-organized Expo TypeScript project setup using React Navigation with two screens. I only want the essential scaffolding so I can layer in the feature work myself.
Prompt 3:
Create a mock dataset of around 55 tennis courts with predictable structure, including id, name, location, an Unsplash image URL, indoor/outdoor information, surface type, and a few sample reviews per court. Keep the output clean and easy to integrate with TypeScript types.
Prompt 4:
I need a quick reference implementation for the core UI pieces: a reusable SearchBar, a CourtCard for list rendering, a ReviewItem, and a simple AddReviewForm. Keep the implementations lightweight and mobile-friendly so I can refine the styling and UX myself.

[ADITYABHURAN]

received the challenge mail at 1:04 pm
started at 2:15 and completed at 4:20