GGStoreV2

A full-stack web application for managing and browsing a game store. The application consists of a FastAPI backend providing RESTful APIs for products, categories, and platforms, and a React frontend offering both user and admin interfaces.

Features

• Product Management: Browse, view details, create, update, and delete game products.
• Category Management: Organize products into categories (e.g., Action, RPG).
• Platform Management: Associate products with gaming platforms (e.g., PC, PlayStation, Xbox).
• Admin Panel: Dedicated interface for administrators to manage products, categories, and platforms.
• User Interface: Clean, responsive UI for browsing products with detailed views.
• Database: SQLite database with SQLModel ORM for data persistence.
• API Documentation: Automatic API docs via FastAPI (available at /docs).

Tech Stack

Backend

• FastAPI: Modern, fast web framework for building APIs.
• SQLModel: SQL database ORM and data validation.
• SQLite: Lightweight database for development.
• Uvicorn: ASGI server for running the application.

Frontend

• React: JavaScript library for building user interfaces.
• Vite: Fast build tool and development server.
• TailwindCSS: Utility-first CSS framework for styling.
• Axios: HTTP client for API requests.
• React Router: Declarative routing for React.

Prerequisites

• Python 3.8 or higher
• Node.js 16 or higher
• pnpm (Package manager for Node.js)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd GGStoreV2

2. Set up the backend:

   cd backend
   python -m venv venv
   source venv/Scripts/activate  # On Windows
   # source venv/bin/activate   # On macOS/Linux
   pip install -r requirements.txt

3. Set up the frontend:

   cd ../frontend
   pnpm install

Running the Application

1. Start the backend:

   cd backend
   source venv/Scripts/activate  # On Windows
   uvicorn main:app --reload --host 127.0.0.1 --port 8000

   The API will be available at http://localhost:8000. API documentation at http://localhost:8000/docs.

2. Start the frontend (in a new terminal):

   cd frontend
   pnpm run dev

   The frontend will be available at http://localhost:5173.

API Endpoints

Products

• GET /products - Retrieve all products
• GET /products/{id} - Retrieve a specific product
• POST /products - Create a new product
• PUT /products/{id} - Update a product
• DELETE /products/{id} - Delete a product

Categories

• GET /categories - Retrieve all categories
• GET /categories/{id} - Retrieve a specific category
• POST /categories - Create a new category
• PUT /categories/{id} - Update a category
• DELETE /categories/{id} - Delete a category

Platforms

• GET /platforms - Retrieve all platforms
• GET /platforms/{id} - Retrieve a specific platform
• POST /platforms - Create a new platform
• PUT /platforms/{id} - Update a platform
• DELETE /platforms/{id} - Delete a platform

Project Structure

GGStoreV2/
├── backend/
│   ├── db.py                 # Database configuration
│   ├── main.py               # FastAPI application entry point
│   ├── requirements.txt      # Python dependencies
│   ├── models/
│   │   └── model_product.py  # SQLModel database models
│   ├── repos/
│   │   ├── repo_product.py   # Product repository
│   │   ├── repo_category.py  # Category repository
│   │   └── repo_platform.py  # Platform repository
│   ├── routers/
│   │   ├── routes_product.py # Product API routes
│   │   ├── routes_category.py# Category API routes
│   │   └── routes_platform.py# Platform API routes
│   └── schemas/
│       └── schema_product.py # Pydantic schemas
├── frontend/
│   ├── package.json          # Node.js dependencies and scripts
│   ├── vite.config.js        # Vite configuration
│   ├── index.html            # HTML entry point
│   ├── src/
│   │   ├── main.jsx          # React entry point
│   │   ├── index.css         # Global styles
│   │   ├── components/
│   │   │   ├── atoms/        # Basic UI components
│   │   │   ├── molecules/    # Composite components
│   │   │   └── organisms/    # Complex components
│   │   ├── pages/            # Page components
│   │   ├── router/           # Routing configuration
│   │   └── services/         # API service functions
│   └── public/               # Static assets
├── info.md                   # Quick start guide
└── README.md                 # This file

Development

• Backend: Uses SQLModel for ORM, with relationships between products, categories, and platforms.
• Frontend: Component-based architecture following atomic design principles.
• Styling: TailwindCSS for responsive design.
• Routing: Client-side routing with React Router.