Skip to content

theskeletoncrew/treat-toolbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Github Social Image

Treat Toolbox | Twitter @TreatToolbox | Discord: Skeleton Crew

Feeling generous? Your contributions help fund future development.
Send tips to our Solana wallet: CH6afYjjydFLPSrfQYEUNCdSNohLCAQV6ir6QnYeZU3t

About

Treat Toolbox is an open-source utility for managing the creation of generative-art NFT projects. The project was built by the team that created The Skeleton Crew for use on their own project.

Using Treat Toolbox, the final artwork for a project is created from a set of layered PNGs, each associated with user-defined "traits" and their specified rarities. The system is especially well-suited for Solana based projects, as it is capable of exporting the artwork and metadata (PNG+JSON) pairs that are necessary for setting up Metaplex's Candy Machine.

Benefits of Treat Toolbox:

  • Fully web-based; no fumbling with shell scripts
  • Built to be usable even by non-technical team members
  • Handles Traits, Rarities, Artwork, and more
  • Eliminates potential for duplicates
  • Provides methods to avoid known conflicts in your art
  • Exports directly to PNG+JSON for use with Metaplex Candy Machine

Today, the system is made to run locally, using an instance of the Firebase emulator as it's backing data and file storage. In the future, a hosted version may be made available.

Setup

Prerequisites:

  • Your machine should have npm, nodejs v14, and the java runtime installed.

First, you will need to get setup with Firebase, and install the Firebase emulator:

  1. Install the Firebase CLI

  2. Go to the Firebase Console and login.

  3. Create a new project

  4. Under Firestore Database click “Create database”. Start in Production Mode. Choose an appropriate location.

  5. Go back to the "Project Overview" page, and under “Get Started by adding Firebase to your app”, click the </> icon named "Web". Register your app (hosting is not necessary).

  6. Under “Use npm”, copy the keys provided for the firebaseConfig. Enter these in the appropriate places in the .env file included in Treat Toolbox.

NEXT_PUBLIC_FIREBASE_API_KEY=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=myproject.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=myproject
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=myproject.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=1111111111111
NEXT_PUBLIC_FIREBASE_APP_ID=1:1111111111111:web:3333333333333333333333
  1. Go back to the "Functions" page, and click “Upgrade project”. Update your plan to get access to Firebase Functions (you wont be billed as long as you only use the emulators).

  2. Run firebase login and follow the prompts to sign in.

  3. Run firebase init in the root of the checked out repo.

Use an existing project (the one you created in step 3).

Use the answers below:

Which Firebase features do you want to set up for this directory? 
Choose Firestore, Functions, Storage, Emulators.

What file should be used for Firestore Rules? 
firestore.rules [just press enter]

File firestore.rules already exists. Do you want to overwrite it with the Firestore Rules from the Firebase Console?
N [No]

What file should be used for Firestore indexes? 
firestore.indexes.json [just press enter]

File firestore.indexes.json already exists. Do you want to overwrite it with the Firestore Indexes from the Firebase Console?
N [No]

What language would you like to use to write Cloud Functions? 
Typescript

Do you want to use ESLint to catch probable bugs and enforce style? 
n [No]

File functions/package.json already exists. Overwrite? 
N [No]

File functions/tsconfig.json already exists. Overwrite? 
N [No]

File functions/src/index.ts already exists. Overwrite? 
N [Np]

File functions/.gitignore already exists. Overwrite? 
N [No]

Do you want to install dependencies with npm now? 
Y [Yes]

What file should be used for Storage Rules? 
storage.rules [just press enter]

File storage.rules already exists. Overwrite? 
N [No]

Which Firebase emulators do you want to set up? 
Functions, Firestore, Storage

Which port do you want to use for the functions emulator? 
5001 [just press enter]

Which port do you want to use for the firestore emulator? 
8080 [just press enter]

Which port do you want to use for the storage emulator? 
9199 [just press enter]

Would you like to enable the Emulator UI? 
Yes

Which port do you want to use for the Emulator UI (leave empty to use any available port)? 
[just press enter]

Would you like to download the emulators now? 
y [Yes]
  1. Next, start the emulators:
npm install --prefix=functions
# This builds the functions and starts the emulator set up to save to a folder called "backup" under the "functions" folder.
npm run serve --prefix=functions

Notes: If you have been using a older version of Treat Toolbox, your backup may be in a different location. You can move the folder under the functions folder when the emulator isn't running.

If the emulators fail to start, see firestore-debug.log. One common cause for failure is that you may need to install the java runtime

  1. When the emulators start, the API url for your cloud functions will be output in the form:

functions[us-central1-api]: http function initialized (http://localhost:5001/projectdemo-a111a/us-central1/api).

Copy this url and enter it in the file .env for the value NEXT_PUBLIC_FIREBASE_FUNCTIONS_API_ENDPOINT.

  1. Then, in a separate terminal inside root of the checked out repo, start the development web server:
npm install
npm run dev
  1. Open http://localhost:3000 with your browser and start using Treat Toolbox!

Working with Treat Toolbox

Check out the Product Documentation

Here's a video of the basic usage of Treat Toolbox: https://vimeo.com/633276431

Quick Start

Want to give treat toolbox a spin, but dont have artwork handy? Take a look at the samples we provided in the test-images directory. Just create three traits: "Curve", "Dot" and "Squiggle". Give each of them trait values, for ex. for "Squiggle", create the values "Green", "Magenta", "Purple", "Royal Purple", and "Teal". Then with the rarities you specify, you can run off a set of compositions and see the system at work.

Troubleshooting

For now, Treat Toolbox is lacking robust error reporting. If something feels off, check for errors in either one of the two running terminals (the web frontend or the firebase emulators) or alternatively, open the web console from the browser and check for errors there. If you do run into a problem, please file an Issue, or better yet, open a PR!

Made with Treat Toolbox

Help us get the word out about this tool by using the banner provided below as a way to comply with MIT LICENSE attribution requirements. Let's make sure that every artist who wants to launch an NFT Collection on Solana has the means to do so! Please link the banner to https://treattoolbox.com.

Treat Toolbox Badge

Releases

No releases published

Packages

No packages published

Languages