StartSelect Store

Este README também está disponível em Português.

A digital game store built with React and TypeScript that integrates with my custom API maintained and run by me using RTK Query. It provides a complete shopping and checkout experience, featuring responsive design, form validation, input masking, and accessibility best practices. The API now supports fetching a random featured game and retrieving game details by ID.

🛍️ Project Overview

The StartSelect Store allows users to browse and purchase digital games. Key features include:

• Dynamic game listing fetched from my custom API using RTK Query;
• Random featured game returned on every reload (IDs 2, 5, 12, 14);
• Game details accessible via jogos/{id} endpoint for IDs 1–19;
• Detailed product pages with descriptions and images;
• Shopping cart management with add/remove functionality;
• Multi-step checkout with form validation using Formik and Yup;
• Masked inputs for CPF and credit card formatting;
• Loading states using react-spinners;
• Mobile-first and responsive design;
• Accessible and semantic HTML structure.

🌐 API Endpoint

All data is fetched from my custom StartSelect API:

https://start-select-api.vercel.app/

🚀 Technologies Used

• React
• TypeScript
• Styled Components
• React Router DOM
• RTK Query
• Formik + Yup
• React Input Mask
• React Spinners

🧪 How to Run the Project

1. Clone the repository:

   git clone https://github.com/AsrielDreemurrGM/StartSelect_Store.git

2. Install dependencies:

   npm install

   or

   yarn install

3. Start the development server:

   npm run dev

   or

   yarn dev

🔗 Live Demo

You can access the deployed version of the project here:
https://start-select-store.vercel.app

📂 Folder Structure

src/
├── components/        # Reusable UI components
├── pages/             # Page components for routing
├── services/          # RTK Query API slices
├── styles/            # Global styles and theme
├── utils/             # Helper functions and masks
├── types/             # TypeScript type definitions
└── App.tsx            # Main application structure

📝 Notes

• The checkout page does not process real payments, it's a mock simulation;
• API calls now rely on my custom REST endpoint with static JSON files and dynamic featured/random game logic.

📌 Commit Highlights

• Checkout Page – Added validation, input masks, and dynamic rendering of cart summary;
• Cart Management – Implemented add/remove logic and quantity state handling;
• Product Listing – Integrated RTK Query to fetch and display products from my custom API;
• Loading & Feedback – Added loading indicators and error fallback UI.