Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kriziu/shoes-ecommerce

Shop made in Next.JS and Strapi containing products from https://nike.com
https://github.com/kriziu/shoes-ecommerce

ecommerce framer-motion graphql nextjs react strapi stripe typescript

Last synced: 2 months ago
JSON representation

Shop made in Next.JS and Strapi containing products from https://nike.com

Awesome Lists containing this project

README

        

# Shoes E-Commerce

Shop made in Next.JS and Strapi containing products from https://nike.com

Repository with CMS: https://github.com/kriziu/shoes-ecommerce-cms
## Features

- Image optimization by NextJS Image and Cloudinary
- Blazing fast page loading, very good SEO
- Products, discounts, images, etc. - all managed by Strapi CMS
- Reviews
- Payment with Stripe
- Sending emails using nodemailer
- Good looking animations
## Made using
- Next.JS
- Recoil
- GraphQL
- Strapi
- TailwindCSS
- Framer Motion
- Stripe
- Cloudinary
## Demo

LIVE DEMO https://shoes-ecommerce.herokuapp.com

## Environment Variables

To run this project, you will need to add the following environment variables to your .env file

`NEXT_PUBLIC_STRIPE_API_KEY`

`STRIPE_SECRET_KEY`

`STRAPI_IDENTIFIER` - strapi server user

`STRAPI_PASSWORD`

`NEXT_PUBLIC_STRAPI_URL`

`EMAIL_USER` - gmail user

`EMAIL_PASSWORD`

`PAGE_URL`

`NEXT_PUBLIC_CLOUDINARY_URL` (https://res.cloudinary.com/accountname/image/upload)
## Installation

First, clone CMS and do steps in this repository: https://github.com/kriziu/shoes-ecommerce-cms

Make .env.local file and paste variables from upper section, then install as normal Next.JS application.
## Screenshots

![front_page_animate](https://media3.giphy.com/media/AFbp4tFByUFeBjHoyu/giphy.gif?cid=790b7611d848b57fe68f48a28bc509749f68bca22d757406&rid=giphy.gif&ct=g)
![login_page_animate](https://media3.giphy.com/media/0y21oYZwuksjS2qjkz/giphy.gif)
![front page](https://i.imgur.com/KMUSuim.png)
![front page bottom](https://i.imgur.com/IlbI8SD.png)
![shoes page](https://i.imgur.com/8yf4kaL.png)
#### Hover over link:
![hover over link](https://i.imgur.com/N1v8KcN.png)
![product details](https://i.imgur.com/dBf2C08.png)
![register page](https://i.imgur.com/TeqjTx3.png)
![checkout page](https://i.imgur.com/IhJqtfQ.png)
![google pay](https://i.imgur.com/b4dGYga.jpeg)
![email](https://i.imgur.com/ogWBc7K.png)