Skip to content

A full-stack eCommerce application that utilizes Node, React, Redux, Express, and MongoDB. Also includes user authentication, review/rating system, product pagination, admin dashboard for organizing users, orders, and products, and full-featured checkout process.

Notifications You must be signed in to change notification settings

rh9891/TheKnittyGritty

Repository files navigation

The Knitty Gritty

License: MIT Vite React TypeScript Node.js Express Axios PayPal React Router React Icons MongoDB Mongoose Redux Toolkit React Bootstrap Cloudinary

Table of Contents

Description

Welcome to The Knitty Gritty – your cozy corner of the internet for all things yarn. Whether you're a seasoned stitcher or just starting your fiber journey, we've got the yarns, tools, and inspiration you need to create something beautiful.

The Knitty Gritty is a full-stack eCommerce application built with React, Vite, Redux Toolkit, Node.js, Express, and MongoDB. It features:

  • 🧺 A fully functional shopping cart with PayPal and credit/debit card payments
  • 🌟 A product rating and review system to help shoppers choose with confidence
  • 🛠 Admin tools for managing products, orders, and customers
  • 📦 Product pagination for easy navigation

Everything’s designed with a yarn-lover’s experience in mind - from browsing to checkout and beyond.

User Story

AS AN online customer,
I WANT TO search for products,
SO THAT I CAN find the ones I want to buy.

GIVEN an eCommerce application,
WHEN I search for a product by name or description,
THEN I can view products and their respective images with details for each product.

WHEN I have found a product that I would like to purchase,
THEN I can add it to my cart from the product page.

WHEN I authenticate myself,
THEN I can see my account details and past orders.

WHEN trying to register for an account,
THEN I am informed clearly of any errors, so that I can be properly authenticated to create an account.

WHEN I go to make a purchase,
THEN I can submit my credit card details or Paypal information and get authorization to complete my checkout.

WHEN I have made a purchase,
THEN I will get my order fulfilled in a timely manner.

Features of the Application

  • Easy login and registration process with simplified forms and authentication.
  • Product search feature for user-friendly filtering.
  • Extensive, detailed product descriptions.
  • Top-rated products, advertisement, and special offers featured on carousel to engage the user.
  • Shopping cart with multiple features that aids user in proceeding to checkout.
  • Shipping process for user to add their shipping address and figure their delivery cost.
  • Order summary page for user to verify purchase before committing to payment.
  • Secure in-app payments through credit card integration and Paypal.
  • For an optimal checkout process, the user is provided with a detailed invoice of their order.
  • After completing purchase, user is provided with shipping status. (Admin product management allows ability to mark order as delivered upon delivery.)
  • Users can view product reviews and ratings to make informed purchasing decisions, while also helping build trust and credibility for the company.
  • Product pagination to aid in user-friendly shopping experience.
  • Admin management for all order details, product inventory, product creation/edit/deletion, and users.
  • Full-featured checkout process (delivery method, payment method/integration, order summary, detailed invoice, etc.)
  • Database seeder for products and users.

Preview of The Knitty Gritty

The Knitty Gritty Landing Page

The Knitty Gritty Top-Rated Page

The Knitty Gritty Product Page

The Knitty Gritty Cart Page

The Knitty Gritty Admin Users Page

The Knitty Gritty Admin Orders Page

The Knitty Gritty Admin Products Page

Links

Quick Start

Run the application locally with these steps:

$ npm install
$ npm run dev

Below is a sample customer login for accessing most features of the application:

The Knitty Gritty Customer Login:

Email: [email protected]
Password: GoldenGirl1
PayPal Sandbox Account Login:

Email: [email protected]
Password: GoldenGirl1

Built Using

This project was built using the following technologies:

License

The MIT License (MIT)

Copyright (c) 2025 Romie Hecdivert

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

A full-stack eCommerce application that utilizes Node, React, Redux, Express, and MongoDB. Also includes user authentication, review/rating system, product pagination, admin dashboard for organizing users, orders, and products, and full-featured checkout process.

Topics

Resources

Stars

Watchers

Forks

Languages