powerlevel9000 / e-commerce

This is a e-commerce product base website with advance funtionality like "Add to cart, modal, total sub total payment etc" this is build with the help of free code camp yt channel while learning React

Shopholic

App Mock

Mobile view & tablate view

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ
• 📝 License

📖 Shopholic

This Project is for online shoping of the mobile product

Shopholic is a React-oriented project, This is a e-commerce product base website with advance funtionality like "Add to cart, modal, total sub total payment etc" this is build with the help of free code camp yt channel while learning React

🛠 Built With

Tech Stack

In this project I used many skills, tech and libraries

Documentation

• HTML

Styling

• CSS

Dynamics And Logics

• JavaScript

Frame Work

• React
• Context Api

Key Features

Following features you should observe

• You can add your product in cart
• You can remove your product from cart
• your total amount of product in cart
• modal opening on taping cart button
• Details page on tapping on respective product image

(back to top)

🚀 Live Demo

This link will guide you to my project

• Live Demo Link

(back to top)

💻 Getting Started

For having local file and project you can fork this repo

And for making changes you you should follow prerequisites

Prerequisites

To edit this project you need:

• Node.js installed

• A Terminal

• A web browser

• An IDE

• suggested IDE

  • visual studio code
  • atom
  • visual code

Setup

Clone this repository to your desired folder:

• And run npm i in root dir to install node modules
• Then run npm start
• All this makes our project open in the browser

Usage

Execute the following thing:

• for selling and buying the products
• check details of the product

Run tests

• To run all test cases you need to run npm test in the root dir
• Linters for files run in the root dir
  • npx eslint "**/*.{js,jsx} for JS or jsx linting
  • npx stylelint "**/*.{css,scss}"for CSS or SCSS linting
  • --fix flag for instant fixable fix

Deployment

You can deploy this project using:

• Fork our Repo and clone it or download zip and extract it
• Edit some changes
• Run npm run build to make our project production ready
• deploy it using GitHub pages (gh-pages run npm i -D gh-pages )
• also, you can use netlify to deploy it

(back to top)

👥 Authors

👤 Adarsh Pathak

• GitHub: @PowerLevel9000
• Twitter: @PowerLevel9002
• LinkedIn: @Adarsh Pathak

🔭 Future Features

Describe 1 - 3 features you will add to the project.

• Payment Gateway
• improve functionality
• improve styling
• Some more pages

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like my Project give it a Star ✨🌟

(back to top)

🙇 Acknowledgements

@john-smilga for great experince in react tutorial

❓ FAQ

ask questions to be here

• Question_1 How to add a product to cart

  • Answer_1 there is few option to do that:
    • with cart button appearing on hovering the product
    • from details page after hitting the product image

• Question_2 How to remove a product from cart

  • Answer_2 there is few option to do that:
    • with remove button with respective product in cart page
    • be decrementing the quantity to 0 in cart page

• Question_3 How to clear cart

  • Answer_2 just tap on clear cart on cart page

  conform on modal for clear cart

(back to top)

📝 License

This project is MIT licensed.

(back to top)