https://github.com/asrieldreemurrgm/startselect_store

Digital games selling store made with React, Typescript, React Router DOM and Styled Components. Products are fetched from API using RTK Query.
https://github.com/asrieldreemurrgm/startselect_store

api-integration api-usage react react-router-dom reactjs rtk-query styled-components typescript

Last synced: about 2 months ago
JSON representation

Digital games selling store made with React, Typescript, React Router DOM and Styled Components. Products are fetched from API using RTK Query.

• Host: GitHub
• URL: https://github.com/asrieldreemurrgm/startselect_store
• Owner: AsrielDreemurrGM
• Created: 2025-02-26T21:10:23.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-11T22:31:18.000Z (about 1 year ago)
• Last Synced: 2025-04-12T20:53:54.165Z (about 1 year ago)
• Topics: api-integration, api-usage, react, react-router-dom, reactjs, rtk-query, styled-components, typescript
• Language: TypeScript
• Homepage: https://start-select-store.vercel.app
• Size: 9.47 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
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



  
Clone the repository:

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

  

  
Install dependencies:

    
npm install

    or

    
yarn install

  

  
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.