Welcome to the "Gamestack"

🚀 Demo: https://gamestack.vercel.app/

Introduction

GameStack is a web application built with ReactJS that provides users with a platform to discover and play various games. With a sleek and intuitive interface, GameStack aims to deliver an immersive gaming experience by offering a curated selection of games across different genres.

Route Names

• Home Route
• Games List Route
• Games Details Route
• Filter Route
• Categories Route
• Search Route
• Error Route

Tech Stack Used / Third Party Libraries

• HTML
• CSS
• JavaScript
• JSX
• React JS
• Redux Toolkit
• React Router
• React Hooks
• Fetch
• Bootstrap / React Bootstrap
• React Icons
• js-cookies
• Git version control
• Netlify
• uuid

Approach to Develop the App

• Project Setup:

  • Used a tool Create React App to set up a new React.js project.
  • Install the necessary dependencies, including Redux Toolkit, React Redux, React Router and other relevant packages.

• Design and Wireframing:

  • Started by creating wireframes or mockups for mobile app's user interface. This helped me plan the layout and design.
  • I prioritize a clean and intuitive design for small screens, ensuring a seamless user experience on mobile devices.

• Mobile-First Component Development:

  • Developed individual React components with a mobile-first mindset. Started with the smallest screen size (e.g., mobile phones) and progressively enhance for larger screens (tablets and desktops).
  • Utilized responsive design techniques, such as CSS media queries, to adjust component layouts and styles for different screen sizes.

• Responsive Styling:

  • Implemented a mobile-first approach in styles by defining the default styles for mobile screens and then using media queries to apply styles for larger screens.

• React Router for Navigation:

  • Implemented React Router to handle navigation within the app.
  • Defined routes and route components, ensuring that the navigation flows smoothly on both small and large screens.

• Redux Setup and State Management:

  • Configured the Redux store using Redux Toolkit. Created slices to manage different parts of the application's state such as userSlice, CartSlice, wishlistSlice, usersListSlice, filtersSlice, productsSlice, productDetailsSlice etc.
  • Created different methods to add, remove, update, delete the different states.

• API Integration:

  • Used HTTP fetch method to connect the mobile app to the backend API for fetching data and performing CRUD operations.
  • Implemented Redux actions and reducers to manage the application's data flow.
  • Here in this case used fake API's to fetch the data and based on response status (pending, success, failure) implemented the locally available data to render the UI.

• Debugging and Debug Tools:

  • Used browser developer tools and React DevTools for debugging and inspecting component states.
  • Implemented logging and error handling to catch and handle issues gracefully.

• Deployment:

  • Prepared the app for deployment by configuring build scripts, optimizing assets, and setting up a production environment.
  • Choosed a hosting platform Netlify for deploying Myglass App.

Functionality & Features

• Explore a wide range of games from different categories.
• Quickly find your favorite games using the search bar.
• Get detailed information about each game, including description, rating, and screenshots.
• Enjoy seamless browsing and gameplay across devices of all sizes.