With the rise of NFTs and blockchain technology, there are a vast amount of hurdles between a digital artist and getting their art onto a blockchain. NFT Randomizer aims to remove one of those hurdles by giving digital artists an easy way to randomize their photoshop layers / attributes, as well as give them full control on rarity values applied to each.
The user starts by registering an account and logging in. After logging in the user will be taken to the projects page where they can add / edit / delete projects. Once a project is selected from the project page the user is taken to the layers page for that project, where they can add / edit / delete layers for that project. Once the user is done adding their layers they can go to the attributes page where they can add / edit / delete attributes and rarities for each layer. There is a rarity counter for each layer to let the user know if they've hit the 100% goal for each.
The user then can go to the check inputs page where they can double check that everything looks correct and that all rarities are 100%. If rarities are not all at 100% the user will not be allowed to generate a CSV until they are. Once rarities are 100% they can enter how many NFTs they want to mint and hit "Generate".
Once the user hits "Generate" they will be taken to the Results page. Here their randomly generated CSV will be shown on the page, and a download button below will allow them to export the CSV.
Once the CSV is exported, the user can take the next steps in Photoshop to export images by CSV and watch their NFTs come to life!
This version uses React, Redux, Express, Passport, and PostgreSQL (a full list of dependencies can be found in package.json).
Before you get started, make sure you have the following software installed on your computer:
Create a new database called nft_randomizer and create the tables needed by running the follow SQL statements:
CREATE TABLE "user" (
"id" SERIAL PRIMARY KEY,
"username" VARCHAR (80) UNIQUE NOT NULL,
"password" VARCHAR (1000) NOT NULL
);
--Table for projects. All projects are linked via foreign keys to a specific user.
CREATE TABLE "projects" (
"id" SERIAL PRIMARY KEY,
"project_name" VARCHAR(120) NOT NULL,
"user_id" INT REFERENCES "user" ON DELETE CASCADE
);
--Table for layers. All layers are linked to a specific user and specific project of that user.
CREATE TABLE "layers" (
"id" SERIAL PRIMARY KEY,
"layer_name" VARCHAR(120) NOT NULL,
"project_id" INT REFERENCES "projects" ON DELETE CASCADE,
"user_id" INT REFERENCES "user" ON DELETE CASCADE
);
--Table for attributes. All attributes are linked to a specific user, specific project of that user, and specific layer of that project.
CREATE TABLE "attributes" (
"id" SERIAL PRIMARY KEY,
"attribute_name" VARCHAR(120) NOT NULL,
"rarity_value" INT NOT NULL,
"layer_id" INT REFERENCES "layers" ON DELETE CASCADE,
"user_id" INT REFERENCES "user" ON DELETE CASCADE,
"project_id" INT REFERENCES "projects" ON DELETE CASCADE
);If you would like to name your database something else, you will need to change nft_randomizer to the name of your new database name in server/modules/pool.js
Directory Structure:
src/contains the React applicationpublic/contains static assets for the client-sidebuild/after you build the project, contains the transpiled code fromsrc/andpublic/that will be viewed on the production siteserver/contains the Express App
Clone the repository and npm install, then npm run server, then npm run client.
On the landing page register as a new user, and then login.
Upon login you will be brought to the projects page. Here you can add new projects and manage current projects.
To proceed, select a project to work on. Selecting a project will take you to the layers page.
On the layers page you can add and manage layers for the selected project. When all layers are entered, select "Next to Attributes". This will take you to the attributes page.
On the attributes page, you can add and manage attributes for each layer, and rarity values assigned to those attributes. The rarity values of all attributes per layer are tracked at the top next to the layer name. It is important to have all layers at 100% rarity. If the rarities totaled for a layer are not 100% it will be shown in red, when it is 100% it will be shown in green. Once finished putting in all attributes and rarities for each layer, select "Check Inputs". This will take you to the check inputs page.
On the check inputs page this is an overview of all information you've entered, one final check before selecting how many NFTs are going to be minted. The rarity values are shown here as well. At the bottom there's an input for how many NFTs to generate. If the rarities are not all at 100% the user will be given an error reminding them that all layers need to be exactly 100% rarity.
With all rarities at 100%, enter the amount to be minted and select "Generate". This will take you to the "Results" page. Here a table is appended with your randomized results, where every row is unique. Selecting the "Download CSV" button will export the results as a CSV that can be plugged in to photoshop.
Thank you to Prime Digital Academy for equipping me with the skills create an app like this. Thank you to my instructor Matt Black for guiding me along the way to this point. Thank you to the Gemini Cohort for being supportive
