update readme file

README.md

@@ -1,30 +1,37 @@
-# React + TypeScript + Vite
+# Game Hub App
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This project is a responsive gaming web application built using React with TypeScript. It utilizes Chakra UI for styling, React Router for navigation, React Query for fetching and caching HTTP request data, and Zustand for global state management.
 
-Currently, two official plugins are available:
+## Live Demo
+Check out the live demo of the application <a href="https://game-hub-blush-mu.vercel.app/">here</a>
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Screenshots
 
-## Expanding the ESLint configuration
+![Game Hub Screenshot 1](screenshots/shot1.png)
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+![Game Hub Screenshot 2](screenshots/shot2.png)
 
-- Configure the top-level `parserOptions` property like this:
+## Features
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
+<ul>
+  <li>Responsive Design: Adapts to various screen sizes for optimal user experience.</li>
+  <li>Platform Filtering: Allows users to filter games based on platforms.</li>
+  <li>Genre Filtering: Enables users to filter games by genre.</li>
+  <li>Sorting and Ordering: Users can sort games based on different criteria.</li>
+  <li>Search Functionality: Provides a search feature to find specific games.</li>
+  <li>Infinite Scrolling: Loads games dynamically as the user scrolls down.</li>
+  <li>Data Fetching and Caching: Efficiently fetches and caches data using React Query.</li>
+  <li>Global State Management: Manages global state using Zustand.</li>
+  <li>Video and Image Handling: Caches and displays game-related media content.</li>
+</ul>
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## Technologies Used
+
+<ul>
+  <li>React: A JavaScript library for building user interfaces.</li>
+  <li>TypeScript: A typed superset of JavaScript that adds static types.</li>
+  <li>Chakra UI: A simple, modular, and accessible component library.</li>
+  <li>React Router: A library for routing in React applications.</li>
+  <li>React Query: Data fetching library that simplifies fetching, caching, synchronizing, and updating server state.</li>
+  <li>Zustand: A small, fast, and scalable bearbones state-management solution.</li>
+</ul>