Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anchaldevbytes/shopper
An ecommerce app based on dummyjson.com api. It inclueds all the basic features required for ecommerce app.
https://github.com/anchaldevbytes/shopper
axios ecommer frontend nextjs nextjs14 react redux stripe tailw
Last synced: 16 days ago
JSON representation
An ecommerce app based on dummyjson.com api. It inclueds all the basic features required for ecommerce app.
- Host: GitHub
- URL: https://github.com/anchaldevbytes/shopper
- Owner: AnchalDevBytes
- Created: 2024-01-26T13:16:41.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-09-28T16:18:50.000Z (4 months ago)
- Last Synced: 2024-11-10T17:21:31.699Z (2 months ago)
- Topics: axios, ecommer, frontend, nextjs, nextjs14, react, redux, stripe, tailw
- Language: JavaScript
- Homepage: https://shopperproject.vercel.app/
- Size: 2.13 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shopper Project
Welcome to the shopper Project! This project is a full-fledged e-commerce web application with various features including product filtering, product details, wishlists, shopping cart, and a dummy payment system integration using client-side-only Stripe.
![Home page](./src/assets/1home.png)
## Features
- **Product Filtering:** Filter products based on rating, category, brand, and prices.
- **Product Detail and Recommendations:** View detailed information about each product and see recommendations for similar products.
- **Wishlist:** Add products to your wishlist for future reference.
- **Shopping Cart:** Add products to your shopping cart and proceed to checkout.
- **Dummy Payment System:** Integration with a client-side-only Stripe payment system for a simulated checkout experience.## Login/Test Users
```
username : atuny0
password : 9uQFF1Lh
``````
username : hbingley1
password : CQutx25i8r
``````
username : rshawe2
password : OWsTbMUgFc
```## Dummy Stripe User Credentials
```
Email : [email protected]
Card no : 4242 4242 4242 4242
CVV : 155
Expires on: 12/24
Cardholder name: test userCountry : United State
Address1 : test adres for USA
City : alaska
Zip code : 99501
```## Other Screenshots
### More Categories
![Categories](./src/assets/2categories.png)### Product Detail Page
![Product Detail Page](./src/assets/3detail.png)### Product Cart
![Cart Page](./src/assets/4cart.png)## Demo
Check out the live demo [here](https://shopperproject.vercel.app/).
## Technologies Used
- React.js
- Next.js
- Redux Toolkit
- Tailwind CSS
- Stripe (for dummy payment integration)## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/anchalraj31082004/shopper.git
```
2. Go to the project directory and open with VS-Code
```bash
cd shopper
code .
```3. Rename the ```.env.example``` and paste your Stripe API key
4. Install Dependencies
```bash
npm install
```5. Run the Developement Server
```bash
npm run dev
```6. Open http://localhost:3000 in your browser to view the application.
### This project is currently in [developement](https://github.com/anchalraj31082004/shopper) , so you may face many bugs. Kindly reach out to me for further enquiry and reporting issues if you have. You can create issues in the repo itself and connect me on [twitter](https://twitter.com/AnchalTwt) if you feel like.