Git Product home page Git Product logo

startup-hero's Introduction

Startup Hero Creator

Description

An application that allows the admin to create artwork of a software engineer that can then be minted as an NFT. NFTs can be viewed on the Collection page, where they can be selected for merging into a single NFT.

If NFTs are merged, their attributes are combined, but their Name, Description and Image will be randomly selected. They will also gain points toward their Success attribute.

Architecture

project architecture

The general concept for how this NFT application works, is as follows:

  1. The Front End is responsible for creating the Artwork to be Minted as an NFT in the Smart Contract

  2. The Smart Contract Mints and assigns a TokenId and a URI to the JSON metadata hosted in the FLASK API

  3. To view the NFT in the Front End, a request is made to the Smart Contract to verify if the connected User has any NFTs assigned to their wallet address.

  4. If the User has any, the URI to the JSON Metadata for the NFT is returned to the Front End.

  5. The JSON Metadata is then requested from the FLASK API and, if successful, the image and related information are returned as an Object.

Installing Dependencies

There are 3 items that will need dependencies installed:

  1. Smart Contract

  2. React Application

  3. Flask Application

For the Smart Contract, install the required dependencies by running the following in the 'root' directory:

# install packages
npm install

For the React Application, in the 'client' directory, run the same command:

# install packages
npm install

For the Flask Application, in the 'nft_server' directory, run the following:

# setup virtual environment
py -m virtualenv .

# start it up
source ./Scripts/activate

# install dependencies
pip install Flask flask-cors requests python-dotenv

# create sqllite database
# rename empty.nfts.sqlite to nfts.sqlite
py db_nft.py

# run app
py app.py

Running the Application

This is my process for running things, if there's a better way, I'm open to learning more. I'm a general noob in the blockchain space and always looking to improve.

Once all the dependencies have been installed, the following commands will be all that's necessary going forward to run this system.

Priority #1, have a nice cup of coffee by your side, then time to get things started.

Ganache

Start up Ganache and then open a Terminal.

In the root directory of the project, run the following to deploy the smart contract to Ganache.

# Deploy the smart contract to Ganache
npm run ganache

Flask API Service

Start up the Flask API aka the NFT Storage Facility.

In the nft_server directory, run the following to get the NFT Storage Facility running on localhost:5000

# start the Flask App
# setup virtual environment
py -m virtualenv .

# activate virtual environment
source ./Scripts/activate

# run the app
flask run

React Application

Let's get the front end of the project running.

In the client directory, run the following to get the Startup Hero Creator React application running on localhost:3000

# start up React app
npm run start

If All Goes Well

you should see the following:

  1. The first account in Ganache will have a little less than 100 ether in their account
  2. On http://localhost:5000, you should see a white page with a grey box containing the text: NFT Storage Facility
  3. On http://localhost:3000, you see a React app running called Startup Hero.

The app is dependent on having Web3 available to connect to a Wallet. If Web3 is not available, you will see a Loading section running in place of where the Startup Hero Creator is located.

At this point, I would open Metamask and import the first account in Ganache. Right now, only an Admin can Mint artwork.

To explore the database, I use DB Browser for SQLite. Open the nfts.sqlite file and you should be able to browse the contents and verify the success of any POST requests made from the React application.

Thanks

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.