Project Overview

WriteOff is a fictional online stationery store designed to sell products such as pens, pencils, notebooks, paper, markers, and other writing supplies.

The project was developed as a React single-page application. Instead of loading separate HTML pages, React conditionally renders the appropriate view based on the user's navigation.

Main Views

The application contains the following primary views:

• Home
• Shop
• Product Detail
• Cart
• Account
• Create Account

React Components

Reusable React components include:

• Navbar
• ProductList
• ProductCard
• CartItem

Product information is stored in JSON and rendered dynamically using React.

Shopping Cart

The shopping cart uses React state to store selected products. Users can:

• Add products to the cart
• Select product options
• Select quantities
• Increase or decrease quantities
• Remove products
• View the subtotal
• View the current cart quantity in the navigation bar

Product quantities are prevented from exceeding the available stock.

Product Catalog

WriteOff contains 25 stationery products. Products contain information including:

• Name
• Description
• Category
• Price
• Rating
• Quantity in stock
• Available colors
• Product options
• Product image
• Featured product status
• New arrival status

The Shop view uses pagination so that products are divided across multiple pages.