🚀 TurboSphere — An E-Commerce Store Concept

TurboSphere is an educational project that serves as a proof-of-concept for an e-commerce store frontend. This application was built to practice and demonstrate core skills in React, TypeScript, and state management using the React Context API.

💡 Project Status & Disclaimer

Important: This project is an educational "sandbox." It has successfully fulfilled its primary goal: to serve as a practical learning ground for the technologies involved.

As it stands, the project has several known architectural and stylistic shortcomings. Rather than patching these issues incrementally, the decision was made to preserve this version as a snapshot. It serves as a starting point for a more thoughtful and comprehensive refactoring effort, which is detailed in the Roadmap section below.

✨ Implemented Features

Browse a product catalog.

Add items to the shopping cart.

View cart contents and the total order price.

(Potentially) View a detailed product page.

🔧 Tech Stack

React: A JavaScript library for building user interfaces.

TypeScript: A typed superset of JavaScript that enhances code quality and reliability.

React Context: Used for managing global application state (e.g., the shopping cart).

CSS: For component styling.

🏁 Getting Started

To get a local copy up and running, follow these simple steps.

Clone the repository:

Generated bash git clone [LINK]

Navigate to the project directory:

Install dependencies:

npm install

Run the project:

npm start

The application will be available at http://localhost:3000.

🗺️ Roadmap

This is a list of planned improvements to evolve this educational project into a more robust and scalable solution.

Architectural Refactoring (Feature-Sliced Design):

Goal: Re-architect the project using the FSD methodology. This will provide better module isolation, improve scalability, and make the codebase easier to maintain.

State Management Overhaul:

Goal: Replace React Context with a more powerful and predictable state management library like Redux Toolkit or Zustand. This will allow for more efficient handling of complex state and business logic.

Complete UI/UX Revamp:

Goal: Perform a full refactoring of all styles. Implement a design system or a UI library (e.g., Material-UI, Ant Design) to create a consistent, modern, and responsive user interface.

General Code Refactoring:

Goal: Improve code readability, eliminate code duplication, extract reusable logic into custom hooks, and adhere to clean code best practices.

More screenshots: