VandaleCallender / NW

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Kuzma Clothing & Shoes

Welcome to Kuzma Clothing & Shoes, the ultimate destination for fashion enthusiasts seeking a sophisticated online shopping experience. This is the project I have made completely alone with my current React.js skills. I created this project for my college exam and also because I wanted to test my current web development skills. Kuzma Clothing & Shoes is an innovative e-commerce platform offering a diverse range of clothing and footwear. With a catalog of over a hundred products, my online shop is designed to cater to the varied tastes and preferences of our customers. The website is equipped with user-friendly features to ensure a seamless shopping experience. This repository is home to a comprehensive React.js eCommerce project, showcasing a refined and responsive shopping platform tailored for the trendy and style-savvy.

Introduction

Kuzma Clothing & Shoes is a fashion eCommerce website design that's built with the modern consumer in mind. Leveraging the power of React.js, I've created an engaging and intuitive platform that stands out in the digital marketplace. My project demonstrates how eCommerce and fashion can merge seamlessly in a digital ecosystem, providing an exceptional user experience from homepage to checkout.

Project Features

  • React Ecommerce Frontend: A modern and clean interface that highlights our product catalog with elegance and style.
  • React Ecommerce Filter: An easy-to-use filtering system that allows customers to sort products by category, price, and more.
  • Ecommerce React Website: A full-featured website built on React that exemplifies best practices in web development and design.
  • React Shopping App: More than just a website, a complete shopping application designed for seamless online transactions.

Customization and Templates

  • React Online Shop Template: Utilize my pre-designed templates as a solid foundation for creating your unique online shop.
  • React Ecommerce Theme: My custom theme embodies the latest trends in web aesthetics, providing a chic backdrop for your merchandise.
  • Free React Ecommerce Template: Jumpstart your project with my free template that offers a balance of design and functionality.

Development Highlights

  • Ecommerce Using React: My codebase showcases how React can be leveraged to build dynamic and responsive eCommerce sites.
  • React Ecommerce App: The structure of the application is designed to serve as a robust React eCommerce platform.
  • React Ecommerce Boilerplate: Developers can use this project as a boilerplate, enjoying a pre-configured environment that accelerates development cycles.

Instructions

  1. To run the app you first need to downlod and install Node.js and npm on your computer. When you download them you need to configure path variables. Here is the link where you can install them: https://nodejs.org/en
  2. When you install Node.js and npm on your computer you need to download the project. When you download the project, you need first to open the first terminal and write: npm install
  3. After that in the same terminal write: npm run dev
  4. The third step is mandatory if you don't have json-server installed on your computer. Open a second terminal write the following: npm install -g json-server
  5. When you do it, you need to open second terminal and run JSON server on port 8080. Just write in the second terminal: json-server --watch src/data/db.json --port 8080

Have problems while running the app? Here is the recorded video instruction how to run it:

https://www.youtube.com/watch?v=4VGZhDXticc

Key Features:

  • Extensive Product Range: Over 100 distinct clothing and shoe items, catering to a wide array of styles and preferences.
  • User Accounts: Robust login and registration functionality, allowing customers to create and manage their personal accounts.
  • Order Management: Users can view their order history
  • Shopping Cart: A dynamic cart system where customers can add items, adjust quantities, or remove products as needed.
  • Wishlist: Users can curate a list of desired items for future purchase, enhancing the shopping experience.
  • Advanced Search and Filters: A powerful search engine with filters to sort products by price, date of addition, category, brand, gender, and stock availability. = Category and Brand Sorting: Intuitive categorization and brand-specific pages for easier navigation and product discovery.
  • Gender-specific Collections: Separate sections for men's, women's, and unisex items, tailored to suit different gender preferences.
  • Stock Indicators: Real-time updates on product availability to ensure customers are informed about in-stock items.

Technologies Used: Front-End: HTML5, CSS3, JavaScript (with React.js framework)

Responsive Design:

Mobile-First Approach: The website is designed to be fully responsive and mobile-friendly, ensuring a consistent experience across all devices.

Conclusion

Kuzma Clothing & Shoes is dedicated to providing an exceptional online shopping experience. With our comprehensive range of products and user-centric features, we aim to be the go-to destination for fashion enthusiasts seeking convenience, variety, and style.

Project screenshots:

Home page in dark mode

screencapture-localhost-5173-2023-11-25-10_21_08

Home page in light mode

screencapture-localhost-5173-2023-11-25-20_35_59

Shop page

screencapture-localhost-5173-shop-2023-11-25-10_24_06 (1)

Single product page

screencapture-localhost-5173-shop-product-204453531-2023-11-25-10_25_56

Wishlist page

screencapture-localhost-5173-wishlist-2023-11-25-20_33_49

Login page

screencapture-localhost-5173-login-2023-11-25-20_38_13

Register page

screencapture-localhost-5173-register-2023-11-25-20_38_47

Cart page

screencapture-localhost-5173-cart-2023-11-25-20_31_06

User profile page

screencapture-localhost-5173-user-profile-2023-11-25-20_31_48

Order history page

screencapture-localhost-5173-order-history-2023-11-25-20_32_37

About

License:MIT License


Languages

Language:JavaScript 97.9%Language:CSS 1.8%Language:HTML 0.3%