Git Product home page Git Product logo

nextjsecommercestore's Introduction

Create a readme with:

  • title
  • description
  • all technologies used
  • 1 or 2 screenshots
  • setup instructions
  • deployment instructions

Next.js E-Commmerce vine store

d This is a Next.js vine e-commerce store project.


Features


  • Show all products in shop

All products page

  • Single product page
    • Show details of single product
    • Increase/Decrease quantity of single product and add it to the cart

All products page

  • Shopping cart
    • Increase/Decrease quantity for products in the shopping cart
    • Click on product to go back to the products page
    • Delete product from cart

All products page

  • Checkout
    • Enter delivery and billing address
    • Decide if billing address is different from billing address
    • Chose delivery option (premium/standard)
    • Buy now button leads to thank you page
  • User accounts
    • Login as admin or standard user
    • Admin can change products description and price and can delete products from cart
    • Standard users can buy products. Order is stored in the database

IMPORTANT: Cookies need to be activated


Technologies use


  • Next.js
  • Ley (for database migration)
  • Cypress and Jest for testing
  • Cookie management (cookies-js)
  • Password management (argon2, crypto, CSFR)

Getting Started


First, make sure you have a postgres database up and running. Define your enviroment variables in an .env file

PGHOST=########
PGDATABASE=###########
PGUSERNAME=###########
PGPASSWORD=###########
CSRF_TOKEN_SECRET=###########

and run the migration via

yarn migrate up

Run npm or yarn:

npm
# or
yarn

Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Data base structure



Database structure


Deployment on Heroku


  • Add environment variable to for CSRF on Heroku
  • Clone repository
  • Create a new project on Heroku and configure automatic deploy on push
  • Connect it to your repository

nextjsecommercestore's People

Contributors

uebriges avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.