Skip to content

This is a prototype Gallery (Web App) for purchasing NFTs via hyperlinks in WebGL 3D demo environments.

Notifications You must be signed in to change notification settings

Zukemon/nftgall

Repository files navigation

AltR GALLERY

Table of Contents

  1. Overview
  2. Usage
  3. Setup
  4. Technologies
project_demo.clip.mov

Overview:

AltR Gallery is a platform for showcasing digital art (NFTs) using WebGL rendered interractive 3D scenes and models accompanied by music (and audio visualiser). This was made possible using the Flask App, Three JS and Blender among other tools for the best results and using a made up currency Beta(ß) for demonstration purposes only.

Usage:

When the user enters the URL, they'll be brought to the landing page where they must register or login if already registered. Here the user can also browse thumbnails for the available demos.

Tabs include:
• 'Collections' tab: showing all purchases made.
• 'Records' tab: showing all your transactions and total balance.
• 'Password Change' tab: for password change.

3D environment:
• Clicking on the thumbnails the user can enter any 3D environment and purchase the NFT they want. 

(The default cash for registered users is set at $500. Assuming that in real life scenerio they have a coupon code or something similar to register with, gift cards, or credit cards.)

Setup:

(using Flask Framework)

• The main project folder contains two Python scripts, 'app.py' and 'helpers.py' and one SQL database file, 'gallery.db'. The 'app.py' file basically handles all the routing and logic for users to navigate the app easily, taking in GET and POST requests from the user which also allow for parsing data to and from a SQL database with tables for 'users' and 'purchases' made. Also included in the main project folder there are subfolders for 'static' files and 'templates' as arranged according to the Flask app configuration.

• The 'static' folder has four JS files per NFT demo display. These are all very similar and product of the same functions with only slight variations in file names, inputs and outputs. Each file contains code with THREE JS libraries that enable uploading, setting and updating animated glb/ gltf 3D models, including HDRI backgrounds/ environments exported from Blender with added lights and an audio visualizer. Then we have a 'styles.css' file, a 'three.js-master' module nodes folder containing the required THREEJS dependencies, subfolders for images, 3D models (.glb) files, music and a folder named 'world' for the various HDRI backgrounds used.

• The 'templates' folder has all the html pages used to display the app data for the user to make requests. The layout html files help make things a lot easier by handling redundancy issues thanks to jinja code. These templates help execute the 'buy', 'sell', 'collections', 'records' functions and 3D scenes per NFT demo model.

Web App

YouTube Demo

Technologies

Languages Python JavaScript HTML5 CSS3
Frameworks & Libraries Flask ThreeJS
Hosting Heroku AWS
Databases SQL

Commands to run app on local server (OS X):

• Download code. Go to directory. Create virtual environment

"pip install virtualenv"

• Install requirements

"pip install -r requirements.txt"

• Activate virtual environment

"source venv/bin/activate"

• Enter command "flask run"

Follow the link while app is running succesfully and app should now be visible in your browser.

Use "ctrl c" to quit process.

About

This is a prototype Gallery (Web App) for purchasing NFTs via hyperlinks in WebGL 3D demo environments.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages