Git Product home page Git Product logo

karlhorky / nextjs-e-commerce-store Goto Github PK

View Code? Open in Web Editor NEW

This project forked from elenacoazzoli/nextjs-e-commerce-store

0.0 2.0 0.0 7.23 MB

Pastabilities: an e-commerce store for pasta products. This web app allows users to browse through different pasta types, check each individual product description and add items to a shopping cart in order to buy them.

Home Page: https://pastabilities-webshop.herokuapp.com/

JavaScript 18.23% TypeScript 81.64% Shell 0.14%

nextjs-e-commerce-store's Introduction

Pastabilities, Next.js e-commerce store

The e-commerce store is a full-stack application that simulates a real webshop page that sells pasta products.

Desktop version : this shop is optimised to be used in resolutions with a width bigger than 1680px.

The shop displays a products page where all items are listed. The main features are:

  • The user can browse through different pasta products and filter by pasta category (e.g. fresh pasta).
  • The user can select and order an amount of pasta packages and is able to add them to the shopping cart.
  • The user can always check how many items are in the shopping cart by looking at the header.
  • From the shopping cart, products can be removed or the user can proceed to the checkout page and finalise the order.

Technologies used

Client: Next.js, React, TypeScript, Styled Components, Jest

Server: Node.js, PostgreSQL

Screenshots

Landing page

Products overview page

Product description page

Shopping cart page

Setup guide

To run this project locally, the following steps are needed:

  1. Clone this repo on your local machine and connect to your GitHub account

  2. Download and install PostgreSQL (if not installed yet).

  1. Create a User and a Database for the project.

  2. Create a copy of the .env.example on the root of the project and modify it with your credentials. The file should include these four environment variables:

  • PGHOST=localhost
  • PGDATABASE=<nameOfYourDatabase>
  • PGUSERNAME=<nameOfYourUsername>
  • PGPASSWORD=<nameOfYourPassword>
  1. Rename this file to .env .
  2. On the command Line go to the project directory and install the required dependencies with:
yarn
  1. Install the dotenv-cli globally with:
yarn global add dotenv-cli
  1. Run the migrations for your local database with:
yarn migrate up
  1. Start the server with:
yarn dev

Deployment instructions

The following instructions can be used to deploy the application online using Heroku:

  1. Create a repository with your version of the app.
  2. Sign up on Heroku: https://signup.heroku.com/ and create an account
  3. Create a new App with your preferred name
  4. Choose a name and select your region
  5. On "deploxment method", go to "Connect to GitHub" and select your repository
  6. Click on the "Enable Automatic Deploys" button
  7. Go back to the Overview tab and click on "Configure Add-On". Search for "Postgres" and select "Heroku Postgres" from the results
  8. Trigger the deployment by pushing into your github repository

nextjs-e-commerce-store's People

Contributors

elenacoazzoli 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.