anki2001ta / pets_and_care

This is the frontend section of my pets and care website, Its an Ecommerce website for pets and pets product ,here we can buy pets .

Home Page:https://pets-and-care.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

PETS & CARE

Pets n Care is an Ecommerce Website,that mainly sells cute and friendly pets (pet partner) aswell pets grooming and food product.The main focus of the entire website is to provide shelter to pets and care them.

πŸ›  Built with

Technologies used in the project:

Javascript

React

React-Router

Redux

Chakra-UI

πŸ’» Screenshots

Home Page: Screenshot (333)

Screenshot (334)

Sign Up Page Screenshot (335)

Login Page: Screenshot (336)

Product Page: Screenshot (337)

Screenshot (351)

Single Product Page: Screenshot (349)

Cart Page: Screenshot (362)

Cart Summary:

Screenshot (363)

Payment Page: Screenshot (364)

Screenshot (365)

Checkout Page: Screenshot (366)

My Account Page

Admin Page:

✨ Features

  • working on :Responsive
  • Private Routing
  • Search Funtionality
  • Filter and Sorting
  • Custom Components
  • Crausels
  • Form Validation (Login,Signup) -Dynamic Routing

Pages

  • Home Page
  • Login/Logout Page
  • Sign Up Page
  • Admin Panel
  • Product Page -Dogs Page -Cats Page -Birds Page -Rabbits Page -Food Page -Grooming Page

πŸš€ Demo

Front-end deployed URL:

πŸ“ Folder structure

  • public - This holds all of our static files

  • src

    • Resources - This folder holds assets such as images, docs, and fonts

    • components - This folder holds all of the different components that will make up our pages

    • pages - These represent a unique page on the website i.e. Home or About.

    • redux - It consists of store, reducer, action and actiontypes and is responsible for global state management of our app.

    • App.js - This is what renders all of our browser routes and different pages

    • index.js - This is what renders the react app by rendering App.js.

  • package.json - Defines npm behaviors and packages for the client

.gitignore - Tells git which files to ignore

README - This file!

Installation

Clone the project

git clone https://github.com/anki2001ta/pets_and_care.git

Client-side usage

Go to the project directory

$ cd Pets       // go to client folder
$ yarn # or npm i               // npm install packages
$ npm run start                // run it locally

// deployment for client app
$ npm run build  // this will compile the react code using webpack and generate a folder called docs in the root level

✍ Contributors

About

This is the frontend section of my pets and care website, Its an Ecommerce website for pets and pets product ,here we can buy pets .

https://pets-and-care.vercel.app


Languages

Language:JavaScript 86.0%Language:CSS 13.2%Language:HTML 0.9%