Skip to content

kaarenliangg/online-shop-client

Β 
Β 

Repository files navigation

πŸ›’πŸΎ Pocket Cart

Discover a curated selection of high-quality products and join us in creating a world where every pet thrives!🐢🐱🐭🐦🐹

πŸ“– Table of Contents

  • General Info
  • Planning & Problem Solving
  • Built With
  • Getting Started
  • Features
  • Screenshots
  • Room for Improvement
  • License
  • Contributing
  • Contact

πŸ“„ General Info

Pocket Cart is a web-based platform that offers a convenient and comprehensive shopping experience for pet owners. With a wide range of products including food, treats, flea, tick and worm treatments, litter, accessories, and toys for various pets, our website is designed to meet the needs of pet owners and ensure the happiness and well-being of their beloved companions.

This project is led by a dedicated team comprising Dom, Karen, Riley, Roxanne, and Stuart. As part of our journey in the General Assembly Software Engineering Immersive course, we have come together to create this eCommerce website, leveraging our skills and knowledge in web development. Despite being located in different time zones, we collaborate effectively to ensure continuous progress and deliver a high-quality product to our users.

✏️ Planning & Problem Solving

image

image

🦾 Built With

React

Gatsby

Rails

TailwindCSS

Node.js

stripe



βš™οΈ Getting Started

Prerequisites

Please note that these instructions assume you have Node.js and npm installed on your machine. If not, please install them before proceeding.

Node.js

Head to Node.js and install the correct version for your operating system.

npm

npm install npm@latest -g

Installation

You can clone these repositories and run them locally on your machine. Use the following command to clone them:

For the front end:

git clone https://github.com/Griffy92/online-shop-client.git

For the back end:

git clone https://github.com/Griffy92/online-shop-server.git

Running the Project

After cloning the repositories, navigate to the project directory and install the necessary dependencies. Given that this project uses Gastby and React as front end and Rails as the back end, you can use the following commands:

For the front end:

cd online-shop-client
npm install
npm run clean
npm run develop

For the back end:

cd online-shop-server
rails db:migrate
rails db:seed
bundle install
rails server



πŸ›οΈ Features

There are several aspects of Pocket Cart at the moment: Admin, User Authentication, Search, Filter, Cart, Orders, Shipping and Payment.

  • Admin

    • Product Management: Access an admin dashboard to manage products, including adding new products, updating existing product details, and removing products from the inventory.
    • Inventory Management: Monitor and track product stock levels and manage inventory to ensure availability of products.
    • Order Management: View and filter customer orders.
    • User Management: Manage user accounts, including creating new accounts, and handling user permissions and roles.
  • User Authentication

    Sign Up, Sign In, Password Reset (You will get an email to reset your password), Log Out, Confirmation Email (Once you place an order successfully).

  • Search

    Use the search functionality to find specific products by keywords, product names, or categories.

  • Filter

    Utilize advanced filtering options to narrow down product listings based on category, price range, new item and more. Easily find the products that match your preferences and requirements.

  • Cart

    • Add to Cart: Select your desired products and add them to your shopping cart.
    • Manage Cart: View and modify the items in your cart, update quantities, and remove products if needed.
  • Order

    • Proceed to the checkout process to review your order details and provide shipping information.
    • Review your historical orders once you logged in.
  • Shipping & Payment

    Enjoy a seamless and secure shopping experience with a variety of payment methods. We integrate with Stripe to ensure the safety and convenience of your financial transactions.



πŸ“Έ Screenshots

Home Page

image

Sign In Page

image

My Account Page

image

Search

image

Cart

image

Product Page

image

Payment Page

image

Admin Page

image

Order Confirmation

image

Password Reset

image



πŸš€ Room for improvement

  • Improved UI
  • Optimize the application to ensure mobile compatibility and a seamless user experience on all devices
  • Add "Buy Now" button for better customer experience

πŸ” License

This project is licensed under the MIT License.

🌱 Contributing

Contributions are welcome! If you would like to contribute to this project, please follow these steps:

  • Fork the repository
  • Create a new branch for your feature or bug fix
  • Make your modifications and commit changes
  • Push your changes to your forked repository
  • Submit a pull request explaining your changes

πŸ“§ Contact



image

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.1%
  • CSS 0.9%