Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gianlucajahn/react-ecommerce-store

An e-commerce store, imitating a Game Store, built with React. Includes dedicated game pages, a search functionality, genre and rating filters, a like feature and a wishlist. Responsive to the bone and tested with Jest.
https://github.com/gianlucajahn/react-ecommerce-store

css ecommerce framermotion git jest reactjs shoppingcart

Last synced: 10 days ago
JSON representation

An e-commerce store, imitating a Game Store, built with React. Includes dedicated game pages, a search functionality, genre and rating filters, a like feature and a wishlist. Responsive to the bone and tested with Jest.

Awesome Lists containing this project

README 

        
🛍️ React E-Commerce Store



![](/src/Resources/image/preview1.png)



  Game Store built with React




## Short Description

An e-commerce store, imitating a Game Store, built with React. Includes dedicated game pages, a search functionality, genre and rating filters, a like feature and a wishlist. Responsive to the bone and tested with Jest. You can find a list of [features](#features), [performance tests](#performance) and [technologies used](#technologies-used) below.



## 🔴 Demo

🧪 [Live Demo](https://gianlucajahn.github.io/react-ecommerce-store) available. Click "Live Demo" to open it.



## Showcase

You can see images and a GIF of the project in user interaction below. The user starts on the landing page, navigates through the browse section, selects a game, adds it to their cart and opens the cart. The GIF does not show all features of the shop, it only shows the most elementary user interactions. 
 



![](/src/Resources/image/preview0.png)

![](/src/Resources/image/preview1.png)

![](/src/Resources/image/preview2.png)

![](/src/Resources/image/preview3.png)

![](/src/Resources/image/preview4.png)

![](/src/Resources/image/showcase.gif)



## Performance

I let [Google Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=de) run over my application to check for it's **performance, accessibility, use of best practices and SEO optimization**. You can view the results right below this paragraph.



![Google Lighthouse Performance Results](https://i.ibb.co/qkXkY5W/report1.png)



## Motivation

My motivations in building this project were showcasing what I learned so far and to have somewhat of a "sandbox" to experiment and build within. I was able to learn new libraries and I had to be creative with ways to improve my application's performance. I also believed that building a project with a much bigger codebase than my preceding ones and learning how to organize such a codebase could set me off better for work in a business environment - and it did.



## Features

- Expressive, responsive and clear UI/UX

- Extensive unit and integration tests to ensure intentional behaviour

- Search any game you want

- Filters to sort after genres and ratings

- Like & Wishlist feature to track your personal wishlist

- Smooth Animations with Framer Motion

- Quick Navigation to view all parts of the project without having to click through it



## Technologies Used

- React

- React Router Dom

- Framer Motion

- Jest

- CSS

- Git

- CDN 



## What I learned:

- Using motion libraries (e.g. Framer Motion) to achieve much smoother user experiences while maintaining clean code

- Working with a CDN (Cloud Delivery Network) to improve performance by accelerating bundle delivery

- organizing and connecting a project with React Router Dom



## Credits

All rights to all pictures, products and names on this website belong to the respective publishers of the games displayed. I only used them to build an environment for myself to learn coding in React with. This page is not being used commercially. If you are an owner of the copyrighted material, please let me know if you have any issues with this page and I'll take it down immediately.