NFT eCommerce App

NFT Online Store, the app that allowse people to easily purchase fashion NFTs.
Explore the docs »

View Demo · Report Bug · Request Feature

About The Project

NFT Online Store App started as an MVP group final project at CodeOp bootcamp. I later forkedt the project and continue to work on design as well as new features. The full-stack app is built using React, Node/Express, Vite, and MySQL. Deployed on Heroku and migrated DB on Stackhero.

The app is meant to help people buy fashion NFTs as well as learn more about digital assets. It now allowes users to select and buy varius NFTs, create an account on the platform as well as contact us using the form. It will hopefully soon send the order receipt via email, send email if a person left items in the cart or even allow the user to communicate with an agent via the chat option.

(back to top)

Built With

(back to top)

Getting Started

To get a local copy up and running follow these steps (for MAC users).

Prerequisites

• Clone the Repo and run npm installin project directory. This will install server-related dependencies such as express.
• cd client and run npm install. This will install client dependencies (React).
• Create Stripe Account or use the TEST API KEY they provide.
• Create SendGrid account and generate a new API KEY.

Database Prep

• Access the MySQL interface in your terminal by running

mysql -u root -p
create database ecommerce;

• On the root of your project add a .env file to the project folder of this repository containing the MySQL authentication information for MySQL user. For example:

  DB_HOST=localhost
  DB_USER=root
  DB_NAME=ecommerce
  DB_PASS=YOURPASSWORD
  SUPER_SECRET=YOURSUPER_SECRET_PASSWORD
  STRIPE_KEY=************
  SENDGRID_API_KEY=**********

• Run the following commands to your MySQL console: CREATE DATABASE ecommerce; and then USE ecommerce;.
• Run npm run migrate in the project folder of this repository, in a new terminal window. This will create the required tables in your database: "payments", "orders", "users", "guests", "artists", "products", and "product_order".
• Make sure you understand how the tables are constructed. In your MySQL console, you can run DESCRIBE tablename; to see the structure of each table. Please mind that "tablename" in DESCRIBE tablename; needs to be replaced by the name of the table that you want to describe.

(back to top)

Development

• Run npm start in project directory to start the Express server on port 5000.
• In another terminal, do cd client and run npm run dev to start the client in development mode with hot reloading in port 5173.

Resources

• MDN docs
• Express docs
• MySQL docs
• React docs
• STRIPE
• SENDGRID