Video Game Collections is a web application that allows users to create and manage their own video game lists. Users can create personalized lists, add games to their lists, and provide ratings and reviews for each game. This is only the Frontend UI project.
The frontend is built using React. It leverages various libraries and tools to enhance the development process and provide a seamless user experience.
You can see the Django backend API project here.
Web platforms like letterboxd provide users with the ability to create movie lists, add reviews, ratings, and other social media features. As an avid video game enjoyer, I noticed the absence of a similar platform dedicated to one of my favorite hobbies. To address this gap, I created Video Game Collections to offer a dedicated space to curate and share their gaming experiences.
The project utilizes the following relevant technologies and dependencies:
- React 18.2.0: A popular JavaScript library for building user interfaces.
- Vite 4.1.1: A fast and minimalist development server and build tool.
- Material UI 5.11.8: Component library for React, providing pre-styled UI components.
- React Router DOM 6.8.1: A routing library for React applications.
- Redux Toolkit 1.9.2: A package that simplifies the usage of Redux.
- Axios 1.3.4: A JavaScript library for making HTTP requests.
- React Hook Form 7.43.1: A library for building forms in React.
- Framer Motion 9.0.2: A library for creating smooth and interactive animations
- JWT Decode 3.1.2: A library for decoding JSON Web Tokens.
The user flow diagram showcases the typical flow and interactions within the Video Game Collections frontend. Please note that the user flow diagram provides a high-level overview and may not capture every possible scenario. However, it serves as a visual guide to understand the core functionalities and navigation within the application.
You can view the full user flow diagram here.
Check out the live version of the application at https://roadieroundup.github.io/VG-Collections-Frontend/
- Improve UX/UI experience to enhance user satisfaction.
- Upgrade the project to TypeScript for better type safety and developer productivity.
Feel free to explore the project and provide any feedback or suggestions for further improvements.