PlayTurf is a sports facility booking platform for enthusiasts, utilizing cutting-edge technologies like React, Redux, Mongoose, and Express. The website will deliver a smooth and intuitive booking experience, featuring dynamic facility listings, immersive facility detail pages, and a seamless, user-friendly booking system. Administrators will benefit from powerful facility management tools, while users will enjoy advanced functionalities like lightning-fast, debounced search, and smart page loading for an optimized experience. For secure and hassle-free booking. Role-based dashboard, admin can manage facility curd operations. Admin can also add admin and can see user listing. This project is designed to create a modern, high-performance online facility booking, offering everything sports lovers need in one place.

• Frontend: React, Redux for state management.
• Backend: Node.js, Express, Mongoose, CORS.
• Database: MongoDB for storing product and user data.
• TypeScript: Ensures robust type safety and code quality.

• Header with logo and site name
• Navigation links
• Banner Section
• Featured Facility
• How it works section
• Parallax section
• What Our Client Say
• Footer with contact and social media links

• Facility listings with images, names, prices per hour, description, and details button
• Search bar
• Sorting options price per hour
• Pagination.

• Product information (name, price per hour, location, description, image)
• Book now button
• It will navigate to the booking page if the user is logged in.

• List of all bookings
• Can cancel the booking with a dedicated button available.
• Pagination is available.

• Facility details with a view button
• Facility slot checking via date.
• Book facility with desired time.
• Pay and Place booking functionality with available time management

• Facility list table with action buttons
• Update and delete functionality with confirmation prompts
• Add new facility form
• pagination view all facilities.

• List of all types of users, (admin and users)
• Details information of users

• A form to add new admin information

• Company mission.
• Team introduction.
• Company History.
• Company contact, location & information.

• Contact us form.
• Map with location.
• Contact information.

• Debounced API Calls: Reduces API call frequency during searches
• Page Refresh Warning: Warns users before refreshing if the cart is not empty
• Pagination: Custom implementation for product listings

• Prerequisites
• Installation
• Configuration
• Running the Application

Ensure you have the following installed on your local machine:

• Node.js (version 14 or higher)
• npm (version 6 or higher) or yarn
• MongoDB (running locally or a connection URI to a remote instance)

1. Clone the repository:

   <!-- Frontend clone  -->
   git clone https://github.com/ashiqee/L2B3-assignment-4-ZFitX-0920.git

  <!-- Backend clone  -->
  git clone https://github.com/ashiqee/ZfitX-Backend.git

2. Install dependencies:

npm i

1. Create a .env.local file in the root directory of the project and add the following enviroment variables:

Frontend .env.local

VITE_PAYMENT_GATEWAY=

Banckend .env

NODE_ENV = development
PORT=5000
DATABASE_URL = 
STRIPE_SECRET_KEY=

1. To compile and run the TypeScript application in development mode with hot-reloading, use:

npm run dev

2. To build the application for production

npm run build

Visit: http://localhost:5173/

This project aims to create a modern, efficient, and user-centric online store for fitness enthusiasts, providing a smooth and enjoyable shopping experience while ensuring secure and reliable transactions.