ToyShare is a single-page toy rental web application developed using React. The platform allows users to browse a curated collection of premium toys, filter by category, search for specific toys, add toys to a cart, and rent them for a selected number of days.
The application includes wallet management, booking history tracking, deposit handling, and reward points calculation. It simulates a real-world toy rental marketplace using state management within React without requiring a backend server.

Screenshots

Key Features

• Multi-view Single Page Application (Home, Browse, Toy Detail, Cart, Checkout, Profile, My Bookings)
• Toy Filtering by Category
• Search Functionality
• Add to Cart with Custom Rental Duration
• Automatic Rental Cost and Deposit Calculation
• Wallet Balance Management
• Reward Points System
• Booking History Tracking
• Real-time Cart Updates
• Responsive Design with Mobile Menu Support
• Stock Availability Indicator
• Dynamic Date Calculation for Rental Period

Functionality

• Users can browse toys by category or search by keyword.
• Each toy displays pricing, daily rental rate, deposit, rating, age suitability, and stock status.
• Users can add toys to the cart with a specified rental duration.
• The system calculates:
  • Total rental cost
  • Total deposit
  • Final payable amount
• During checkout:
  • Wallet balance is deducted
  • Reward points are added
  • Booking records are created
• Bookings include:
  • Start date
  • End date
  • Paid amount
  • Deposit paid
  • Status
• Users can view their booking history.
• Profile section displays wallet balance and reward points.

Technology Used

• React.js
• JavaScript (ES6+)
• React Hooks (useState, useEffect)
• Inline CSS Styling
• Functional Components
• Array Methods (map, filter, reduce)

Why This Project Is Useful

• Demonstrates advanced React state management
• Shows real-world e-commerce rental workflow
• Implements cart logic and pricing calculations
• Demonstrates filtering and search functionality
• Simulates booking lifecycle management
• Suitable for portfolio, internships, or academic projects
• Helps understand financial transaction simulation (wallet, deposit, points)
• Demonstrates dynamic UI rendering based on application state

Download Source Code

Project Setup Instructions

Note: This project is for educational purposes only. Not for commercial sale.