hamdrive / fueledup-react

FueledUp is the one-stop shop for your team merch needs!

Hi there 👋, I'm Hamza

An ambitious Full Stack Web Developer from Mumbai, India

Here are some facts about me:

• 👩‍🎓 B.Engg degree in Mechanical Engg.
• 🧠 Developer born in the Pandemic (2020)
• 👩‍💻 Web dev enthusiast, Blogger extraordinaire
• 🌱 Learning to build with React
• 🏎 Sunday's are for racing only

Find out about my professional life here:

Connect with me:

What I'm good at:

 

fueledup-react's Issues

Refactor Product Price calculation on backend

Currently we are calculating the final price on the frontend, which might create some vulnerabilites.
Instead it can be directly calculated on the backend and passed with GET request

Mobile responsiveness of all pages

Need to work on making sure that our web app is dynamic and responsive such that the UI and UX for the user remains the same or similar.

Features needed:

1. Responsiveness content on all pages
2. Side menu for navbar/footer items quick access using hamburger menu

Add Products to backend, call API on frontend

1. Add products for all categories to the mockbee category database
2. Implement GET request to fetch the categories and their respective products

User should be able to see either all the product cards, based on the category they select.

Rework color palette and general layout of website

Some changes can be brought about to make the website for beautiful and nice to look at from user perspective

1. Research other color combinations (primary, secondary, complimentary)
2. Look into layout and spacing of certain sections of website
3. Add empty page graphic for when there is no product in wishlist and cart and product fetching
4. Add loader when fetching products and loading other pages

Implement cart context

The user can be allowed to add products directly to their carts, and thus it will reflect both in the cart count on navbar and update on the cart page as well, along with the price tally.

Setup Product Page layout and styles

For the Products page, lets setup the basic layout:

1. Setup the page so that filters are on the left, while other content take up almost 80% of the rightmost space
2. Ensure alignment of all cards inside grid is functional

Create Routing and general React App

Expected features to be implemented:

1. Create routing for all pages by implementing React router
2. Setup all pages of Ecommerce, and add basic structures
3. Setup styles with component library

Relocate cat and prods API to respective components

Noticed that the GET request to obtain categories and products are currently being done within the context itself, when it could be done locally within the same component as it's state is not being shared anywhere else

Setup basic cart layout and styles

Implement a static cart page with a default cart card component and a price summary table with dummy values.

Wishlist feature

We can create a new feature, which allows the user of our ecommerce website to store their preferred items, that they might not want to purchase now but at a later time.

Expected to be able to store the product, and should be updated wherever needed, including the wishlist counter in the navbar.

[fix] Loader state for all 3 types of cards

Noticed that the current implementation of loader state for all 3 cards (Product, Wishlist and Cart) are using the same shared context state,

1. This firstly might go against the concept of a global shared state with context
2. This results in one API request triggering loader for all cards on the page

This issue is more apparent and visible on the cart page, when user tries to either remove the product or move to wishlist

Suggestions:

1. Have separate state for all 3 cards, will result in repetitive states but each will be unique to only that card, ensuring each component is triggered does not affect other children

Implement Filter Functionality for Products

The products shown to user on the website should be filterable.
If a user clicks on any of the filters, the products being shown should update accordingly

1. Add functionality to filters, and products should update accordingly
2. Update filters to include Brands
3. Enable clear filter functionality