From 1e6a9c5fe71937f1bddd9a90d176ddc1ea70032d Mon Sep 17 00:00:00 2001 From: mveerapalli Date: Mon, 15 Dec 2025 17:19:17 -0600 Subject: [PATCH 1/2] Create README for BYOB Front-End Developer Challenge Added a comprehensive README for the BYOB Front-End Developer Challenge project, detailing features, tech stack, project structure, and instructions. --- README.md | 149 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 000000000..9fa6a7f4e --- /dev/null +++ b/README.md @@ -0,0 +1,149 @@ +BYOB Front-End Developer Challenge +React Native Mobile-First App – Tennis Court Browser & Review System + +This project is my submission for the BYOB Sports Front-End Developer coding challenge. +It implements a mobile-first, two-page React Native application where users can: + +View a list of tennis courts + +Search courts by name, neighborhood, or city + +Select a court to view detailed information + +Read existing reviews + +Submit a new review (mocked, no backend) + +All data is mocked locally, with 60+ courts autogenerated to demonstrate scalability and performance. + +πŸš€ Tech Stack + +React Native + +Expo + +React Navigation (Native Stack) + +Context API for global state + +Mock Data Generator (local arrays) + +πŸ“‚ Project Structure +frontend-challenge/ + App.js + package.json + src/ + data/ + courts.js + context/ + CourtsContext.js + components/ + CourtCard.js + RatingStars.js + screens/ + CourtsListScreen.js + CourtDetailScreen.js + +🎯 Features Implemented +βœ”οΈ Court List Screen + +Mobile-first list UI + +Search bar with dynamic filtering + +Court cards showing: + +Name + +City & neighborhood + +Surface & indoor/outdoor + +Rating + +Price + +βœ”οΈ Court Detail Screen + +Large banner image + +Court info & metadata + +Average rating and review count + +List of existing reviews + +β€œLeave a Review” form (name, rating, text) + +Updates UI instantly using Context API + +βœ”οΈ 60+ Mock Courts (Scalability) + +To display ability to handle larger datasets, the project generates 60 courts from a base template using randomized ratings and review counts. + +πŸ—οΈ How to Run the Project +1. Install Dependencies +npm install + +2. Start Expo +npm run start + +3. Run on Device + +Scan the QR code using the Expo Go app + +Or press: + +i for iOS Simulator (requires Xcode) + +a for Android Emulator (requires Android Studio) + +🧠 Design Choices +Mobile-first UI + +All components were designed and tested for mobile screens first to reduce friction and ensure smooth user flow. + +Separation of Concerns + +Court data stored separately in /data + +Logic & mutation handled via Context API + +UI components kept clean and reusable + +Simple, Clean Design + +Minimal colors + +Readable typography + +Intuitive layout for quick user understanding + +Scalability + +Efficient rendering with FlatList + +Mocked dataset scaled to 60+ courts + +Context API for central state management + +πŸ’‘ Prompts Used (Required by challenge) +1. "send all codes here" +2. "readme" +3. "yes next steps please" +4. "send me the codes for step 3 files" + +πŸ•’ Start & End Time + +Start: December 15, 2025 2:15PM +End: December 15, 2025 6:15PM + +πŸ“¬ Contact + +Manoj Veerapalli +If you have any questions or need additional info, feel free to contact me. + +πŸŽ‰ Thank You! + +Thank you for reviewing my submission and for the opportunity to participate in this challenge. +I truly enjoyed building this mobile-first UI and look forward to the next steps! From 15fe43c6476f324ab0ecb422ddcadac64583c60f Mon Sep 17 00:00:00 2001 From: mveerapalli Date: Mon, 15 Dec 2025 17:22:23 -0600 Subject: [PATCH 2/2] Revise README for Tennis Court Review App Updated project description and features for clarity. --- README.md | 152 +++++++----------------------------------------------- 1 file changed, 19 insertions(+), 133 deletions(-) diff --git a/README.md b/README.md index 9fa6a7f4e..a7ae92797 100644 --- a/README.md +++ b/README.md @@ -1,149 +1,35 @@ -BYOB Front-End Developer Challenge -React Native Mobile-First App – Tennis Court Browser & Review System +πŸ“± Tennis Court Review App +BYOB Sports – Frontend Developer Code Challenge -This project is my submission for the BYOB Sports Front-End Developer coding challenge. -It implements a mobile-first, two-page React Native application where users can: +This project is my submission for the BYOB Sports frontend coding challenge. +It’s a small mobile-first React Native app that lets users browse tennis courts, search for specific courts, view details, and add reviews. Everything is mocked locally as required. -View a list of tennis courts +🌟 What the App Does -Search courts by name, neighborhood, or city +Shows a list of tennis courts with images, ratings, and basic info -Select a court to view detailed information +Lets users search by court name, city, or neighborhood -Read existing reviews +Opens a detailed screen for each court -Submit a new review (mocked, no backend) +Displays existing reviews -All data is mocked locally, with 60+ courts autogenerated to demonstrate scalability and performance. +Allows the user to submit a new review -πŸš€ Tech Stack +Uses Context API to manage state (no backend) -React Native +Generates 60+ mock courts to demonstrate scalability -Expo +The app is optimized for mobile screens, since that was one of the main requirements. -React Navigation (Native Stack) - -Context API for global state - -Mock Data Generator (local arrays) - -πŸ“‚ Project Structure -frontend-challenge/ - App.js - package.json - src/ - data/ - courts.js - context/ - CourtsContext.js - components/ - CourtCard.js - RatingStars.js - screens/ - CourtsListScreen.js - CourtDetailScreen.js - -🎯 Features Implemented -βœ”οΈ Court List Screen - -Mobile-first list UI - -Search bar with dynamic filtering - -Court cards showing: - -Name - -City & neighborhood - -Surface & indoor/outdoor - -Rating - -Price - -βœ”οΈ Court Detail Screen - -Large banner image - -Court info & metadata - -Average rating and review count - -List of existing reviews - -β€œLeave a Review” form (name, rating, text) - -Updates UI instantly using Context API - -βœ”οΈ 60+ Mock Courts (Scalability) - -To display ability to handle larger datasets, the project generates 60 courts from a base template using randomized ratings and review counts. - -πŸ—οΈ How to Run the Project -1. Install Dependencies -npm install +πŸ› οΈ Tech Used -2. Start Expo -npm run start +React Native (Expo) -3. Run on Device - -Scan the QR code using the Expo Go app - -Or press: - -i for iOS Simulator (requires Xcode) - -a for Android Emulator (requires Android Studio) - -🧠 Design Choices -Mobile-first UI - -All components were designed and tested for mobile screens first to reduce friction and ensure smooth user flow. - -Separation of Concerns - -Court data stored separately in /data - -Logic & mutation handled via Context API - -UI components kept clean and reusable - -Simple, Clean Design - -Minimal colors - -Readable typography - -Intuitive layout for quick user understanding - -Scalability - -Efficient rendering with FlatList - -Mocked dataset scaled to 60+ courts - -Context API for central state management - -πŸ’‘ Prompts Used (Required by challenge) -1. "send all codes here" -2. "readme" -3. "yes next steps please" -4. "send me the codes for step 3 files" - -πŸ•’ Start & End Time - -Start: December 15, 2025 2:15PM -End: December 15, 2025 6:15PM - -πŸ“¬ Contact +React Navigation (Native Stack) -Manoj Veerapalli -If you have any questions or need additional info, feel free to contact me. +Context API for shared state -πŸŽ‰ Thank You! +Mock data generation for 60+ courts -Thank you for reviewing my submission and for the opportunity to participate in this challenge. -I truly enjoyed building this mobile-first UI and look forward to the next steps! +Expo Asset for image handling