TurfEase is a frontend React and TypeScript template for sports venue booking that demonstrates complete UI flows with mock data and simulated APIs. It is mobile-first and responsive, featuring role-based areas for Players and Owners, advanced search and filtering, interactive booking with client-side availability simulation, an Owner dashboard with venue management and analytics, reviews and favorites, notifications, and a mock checkout to preview the payment experience. The codebase is structured with reusable components and pages, styled with Tailwind CSS and shadcn/ui, routed via React Router, and managed with Zustand, built and served with Vite for fast development and optimized production builds. This item ships as a static frontend; to use in production, connect your own backend, database, real-time availability, authentication, and payment provider

Features

• • Frontend-only React 18 template with TypeScript, Vite, Tailwind CSS, and Zustand for state; ships with mock data and mock API calls for flows like auth, venues, bookings, and payments.
  • Mobile-first responsive UI with PWA capabilities to deliver an app-like experience on modern browsers.
  • Role-based authentication and routing for Players and Owners, including protected routes and session state.
  • Advanced venue search with filters for location, price, amenities, and availability to help users find the right turf quickly.
  • Interactive booking UX with client-side availability simulation and instant mock confirmation.
  • Group booking support with invitations and automatic cost splitting for shared reservations.
  • Favorites and wishlist to save venues and receive availability updates via in-app notifications.
  • Owner dashboard with venue CRUD, pricing, schedules, booking management, and analytics for revenue and performance tracking.
  • Reviews and ratings to build trust and help users compare venues.
  • Mock payment checkout illustrating multi-method payments; no live charges included in the template.
  • Shadcn/ui component library integrated with a custom design system for fast theming and extensibility.
  • Clean project structure with reusable components, pages, stores, and utilities to accelerate customization.
  • React Router-based SPA navigation with code-splitting-ready setup for performance. ###li/li###

Requirements

• Node.js 16 or higher installed, plus npm or yarn to manage dependencies and run scripts.
• Git installed for version control and to manage your own repository if needed.
• Modern browser (Chrome, Edge, Firefox, Safari) for local development at http://localhost:5173.
• Environment variables in a .env file at project root:
  • VITE_API_BASE_URL (e.g., http://localhost:3000/api)
  • VITE_GOOGLE_MAPS_API_KEY (your maps key)
  • VITE_PAYMENT_GATEWAY_KEY (mock key)
  • VITE_NODE_ENV=development
• Ports available for Vite dev server (5173) and your chosen preview/hosting ports.
• Frontend-only: no production backend, database, real-time service, or live payments included; you must connect your own backend/BaaS for production use.
• Recommended familiarity with React 18, TypeScript, Tailwind CSS, React Router, Zustand, and shadcn/ui for customization.

Instructions

• Unzip the downloaded package and open the Source directory to access the application code.
• Install dependencies in the project root using one package manager:
  • npm install
  • or yarn install
• Create a .env file in the project root and set environment variables:
  • VITE_API_BASE_URL=http://localhost:3000/api
  • VITE_GOOGLE_MAPS_API_KEY=your_google_maps_api_key
  • VITE_PAYMENT_GATEWAY_KEY=your_payment_gateway_key
  • VITE_NODE_ENV=development
• Start the development server:
  • npm run dev
  • or yarn dev
• Open the app at http://localhost:5173 to verify it runs successfully.
• Build for production when ready:
  • npm run build
  • npm run preview to test the built app locally