TurfOnTop: Book Your Game, Your Way

Overview

TurfOnTop is a full-stack application designed to simplify booking sports turfs for users and streamline management for turf owners. Users can browse available turfs, select slots based on real-time weather, make secure payments, and manage their bookings with ease. Owners can list turfs, upload images and proof documents securely, track bookings, and manage slots efficiently.

Features

Core Features

• User & Owner Authentication: Sign up, log in, and manage profiles for both users and turf owners.
• Turf Listings: Instantly browse and search available turfs with location-based filtering.
• Slot Selection: Choose your preferred slot with real-time weather integration to optimize your play.
• Payment Integration: Secure payments powered by Razorpay.
• Booking History: View past bookings and transactions for both users and owners.
• Cancel Bookings: Users can cancel booked slots anytime before the scheduled time.
• Owner Dashboard: Owners can view, manage, and update turf details and bookings.
• Facility Details: View turf amenities (parking, washroom, canteen, etc.) before booking.
• Interactive Map: Locate turfs easily with integrated maps.
• State Persistence: Redux is used for consistent state management and data persistence across pages.
• Image & Document Uploads: Owners can upload turf images and proof of identity/ownership securely via Cloudinary.

Advanced Features

• Real-time Weather Integration: See weather forecasts for your selected slot to plan your game.
• Dynamic Slot Availability: Slots update in real-time based on bookings and cancellations.

Technical Implementation

Frontend Architecture

• React + Vite: Fast, component-based UI development.
• Redux: Centralized state management for data persistence and seamless user experience.
• Framer Motion: Smooth animations and transitions.
• Tailwind CSS: Utility-first styling for rapid UI development.
• Shadcn & 21st.dev UI: Modern, accessible UI components.
• Aceternity UI: Enhanced user experience with advanced UI elements.

Backend Architecture

• Express.js: RESTful API structure.
• JWT Authentication: Secure user and owner sessions.
• PostgreSQL: Robust database for users, turfs, owners, and bookings.
• Razorpay Integration: Secure payment processing.
• Weather API: Real-time weather data for slot selection.
• Cloudinary Integration: Secure image and document storage for turf images and owner proofs.

Technologies Used

• Frontend: HTML, CSS, JavaScript, React, Vite, Redux, Tailwind CSS, Framer Motion, Shadcn, 21st.dev, Aceternity UI
• Backend: Node.js, Express.js
• Database: PostgreSQL
• Authentication: JWT
• Payment Gateway: Razorpay
• Image Storage: Cloudinary
• Other: Weather API, PDF generation

Environment Variables

Frontend (FrontEnd/.env)

VITE_API_BASE_URL=your_backend_url
VITE_GEOLOCATION_BASE_URL=your_geolocation_api_url
VITE_WEATHER_BASE_URL=your_weather_api_url
VITE_GOOGLE_API_KEY=your_google_api_key
VITE_OPENROUTER_API_KEY=your_openrouter_api_key
VITE_RAZORPAY_API_KEY_ID=your_razorpay_key_id
VITE_RAZORPAY_API_SCRIPT_URL=your_razorpay_script_url

Backend (BackEnd/.env)

SERVER_PORT=8000
DATABASE_NAME=your_database_name
DATABASE_USER=your_database_user
DATABASE_HOST=your_database_host
DATABASE_PASSWORD=your_database_password
DATABASE_PORT=5432
CORS_ORIGIN=http://localhost:5173
ACCESS_TOKEN_SECRET=your_access_token_secret
ACCESS_TOKEN_EXPIRY=1h
REFRESH_TOKEN_SECRET=your_refresh_token_secret
REFRESH_TOKEN_EXIPRY=7d
BCRYPT_SALT_ROUNDS=10
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
RAZORPAY_API_KEY_ID=your_razorpay_key_id

Installation

Prerequisites

• Node.js
• npm, bun, or yarn
• PostgreSQL & pgAdmin
• Razorpay account (for payment integration)
• Weather API key (optional, for real-time weather)
• Cloudinary account (for image/document uploads)

Setup

1. Clone the repository:

   git clone https://github.com/Riyanshverma/TurfOnTop.git

2. Navigate to the project directory:

   cd TurfOnTop

3. Install dependencies for frontend and backend:

   cd FrontEnd
   npm install
   cd ../BackEnd
   npm install

4. Set up environment variables:

   • Create a .env file in the BackEnd directory using the template above.
   • Create a .env file in the FrontEnd directory using the template above.

Usage

1. Start the backend server:

   cd BackEnd
   npm run backend

2. Start the frontend server:

   cd FrontEnd
   npm run frontend

3. Open your browser and go to http://localhost:5173

Feature Details

User & Owner Authentication

• Secure email/password authentication with JWT
• Separate flows for users and owners

Turf Discovery & Booking

• Browse turfs with filters (location, amenities, availability)
• Interactive slot selection with weather info
• Payment options: Razorpay

Booking Management

• View and cancel bookings
• Owners can manage turf slots and booking status

Real-time Features

• Dynamic slot updates

Owner Dashboard

• Manage turf details, bookings, and slot availability
• Upload turf images and proof documents securely via Cloudinary

State Persistence

• Redux ensures user, booking, and turf data is consistent and available across all pages

Contributing

Contributions are welcome! Please submit a pull request or open an issue.

License

This project is open source and available under the MIT License.

Acknowledgements

• React
• Vite
• Redux
• Tailwind CSS
• Node.js
• Express
• PostgreSQL
• JWT
• Razorpay
• Framer Motion
• Shadcn
• 21st.dev