Skip to content

A skincare E-Commerce frontend application made with React.js and a mock backend.

Notifications You must be signed in to change notification settings

bhavyaj12/halcyon-skin-store

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Halcyon Skin Store

Halcyon Skin Store is your one stop shop for all things skincare! Inspired by the world's best skincare-making processes, Halcyon Skin Store focuses on curating the best of Indian beauty. We only carry products that combine powerful ingredients backed by years of research & testing. Build a consistent self-care routine for your skin type and preferences from the wide range of products we offer.

Netlify Status

Preview

HalcyonSkinStore.mp4

Project Features

  • It is made using Halcyon-UI
  • This is a frontend E-Commerce Application created using the mock backend mockBee.
  • Contains modular React components
  • Easy to use website
  • Modern and Clean Design
  • Fully responsive

Project Screens and Functionality

  • Home Page
  • Landing page with a list of featured categories.
  • Clicking on feat category will take user to the product list page with the selected category.
  • Product Listing Page
  • Product listing page where all the products are listed with a section of filters
  • Filters by: Price (slider), Category, Rating
  • Sort by: Price (high to low, low to high) and Rating (high to low)
  • Button to clear filters
  • Add to Cart button on products card which will add the item to the cart
  • Add to Wishlist: secondary icon button which will add the item in the wishlist
  • Cart Page
  • From the navbar, navigate to the cart where all the products to buy are mentioned
  • On cart page, quantity of a particular product is displayed, which can be increased or decreased
  • Button to remove the product from the cart
  • Button to add the product to the Wishlist
  • Price details card of the cart containing a button to checkout which will show the total price of the products with its quantity
  • Wishlist Management
  • From the navbar, navigate to the wishlist where all the products to buy are mentioned
  • Button to remove the product from the wishlist
  • Button to add the product to the cart
  • If the cart already contains that item, it's only increasing the quantity.

Features that will improve the project

  • Infinite scroll
  • Profile page
  • Orders management
  • Pagination
  • Theme change

Tech Stack

  • JavaScript
  • React.js
  • HTML
  • CSS
  • React Router 6

Run Locally

Clone the project

  git clone https://github.com/bhavyaj12/halcyon-skin-store.git

Contribute!

This project is meant to be open source! Do feel free to add bugs and fork the repo for contribution. Here's how you can contribute:

  • Fork the project repository
  • Clone your fork
  • Create a new branch with a proper feature name, in your local repo
  • Make chages, commit and push
  • Raise a Pull Request

Liked the project? Do please ⭐ it :)

Authors

🔗 Links

  • Have a job/internship/project opportunity? Ping me here:-

    twitter

    linkedin

About

A skincare E-Commerce frontend application made with React.js and a mock backend.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published