Open Source NFT Display and Gallery

[IMPACT] Please describe your proposed solution.

The Problem

There are no ready made packages to help developers add NFTs to their projects with ease. If you want to build an app which uses NFTs, you either have to build everything yourself, or you use an out of the box ready solution like NMKR, which doesn’t allow you to customize much.

If you want to get started quickly to build out a platform, yet still have the flexibility to make it look and have any features you may want, you don’t have an option. You must build it all yourself: the NFT gallery to view NFTs, an NFT display to view the details of an NFT, and the code to read the blockchain, the metadata, and the decentralized storage.

This means only developers with good understanding of NFTs on Cardano can get started easily. Everyone else must go through a steep learning curve to not only implement the frontend components, but implement the reading and displaying of all the information of the NFTs.

The Solution

The solution is to develop an open-source javascript framework that implements the following:

An NFT display to view a single NFT in detail, supporting viewing multiple images, and gifs, and any links or text within the metadata.
An NFT Gallery to view collections, the NFTs in your wallet, or a set selection of NFTs
Helper functions to read Cardano for NFT data, including the metadata, and any decentralized storage
A fully customizable starting point for any developer building a project with NFTs.

This will:

provide a simple framework to build cNFT project prototypes
speed up development times for building cNFT projects
lower barriers to entry for new Cardano developers
increase the number of cNFT projects
allow other cNFTs use cases to be explored by developers.

The framework will be agnostic to the use case of the developer. cNFTs can be used in any way, and this framework will not care. Point 5 refers to existing solutions that shorten NFT implementation time to be entirely on the topic of NFT marketplaces. ie. NMKR Custom NFT store.

[IMPACT] How does your proposed solution address the challenge and what benefits will this bring to the Cardano ecosystem?

Alignment with the Challenge

One of the stated aims of the challenge is: Creation and improvement of tools and software that help make it easier for projects to develop on Cardano. This proposal addresses this aim directly as it aims primarily to make developing NFT projects easier. The proposal will allow developers to quickly build out projects that use CNFTs, decreasing development time and time to prototype.

The challenge also highlights in the types of proposals:

Native asset tools & software - Development tools, libraries and SDKs to improve how the community and developers can issue and manage native assets.

This proposal builds out such software to manage native NFT assets.

The project is also open-source from day 1. The entire point of this is to allow for the open source Cardano developer community to benefit from this work, and take it forward.

What impact will this project have for Cardano?

The project will add an open-source base for NFT projects to build upon. This will cut development times and make it simpler for anyone to start NFT projects.

This will have a tangible impact on Cardano open-source community, as there is no such example of an open-source library that allows you to play with Cardano NFTs. There are many minters, some NFT marketplace projects even, but nothing of the sort we are building. Combining these open-source projects you'll be able to create a full featured NFT project on Cardano with ease.

See these github search results to verify if there are any open source NFT displays for Cardano:

https://github.com/search?q=cardano+nft+display&type=repositories

https://github.com/search?q=cardano+nft&type=repositories

[IMPACT] How do you intend to measure the success of your project?

Since this is an open source framework to be made available to the public on github, it’ll be easy to measure the success of the project. We will look primarily at this activity:

the number of stars on the repository,
the number of forks, clones, and traffic for an open source repository,
the number of feature requests.

Together, these metrics provide a good picture of how much engagement our project receives from developers. The higher the numbers, the greater the success.

With this project, the number of cNFT projects, and the speed at which they can create and test prototypes will increase. This will help developers onboard to Cardano, provide an easier on-ramp for new developers to start building on Cardano, and thus improve the productivity and growth of Cardano. All this impact is difficult to measure, but the metrics listed above will provide a very good proxy.

As we develop the framework, it’ll be available on github as a public repository. So our outputs will be shared as we develop it. To spread these outputs we will share it on official Cardano and IOG developer channels on Discord and Telegram, as well as in community groups such as Gimbalabs, Konma, and Catalyst Swarm. We will also provide updates on our progress through our Twitter account to reach more of the Cardano developer community.

This will get our work into the hands of hopeful developers looking to build cNFT projects. We expect this to result in forks of our own project, further development of the framework by others, and use of the project as a base on other projects.

[CAPABILITY/ FEASIBILITY] What is your capability to deliver your project with high levels of trust and accountability?

To complete this project successfully: we need to build the JS framework, and get it into the hands of developers to use it. This means there are two critical capabilities needed:

developing the framework,
promoting it on the right channels.

As a team we have extensive capabilities and expertise on building software, including JS:

building traditional backend services with Python, postgreSQL, Rest API development,
20+ years of software development expertise with C++, C#, Python, PHP, JavaScript
frontend development with React JS, HTML, css,
2+ years of AGILE project management expertise, with a senior project management expert of 10+ years experience,
Extensive experience with design tools such as Adobe Suite and Figma,
Plutus Pioneers Program graduate

So developing the framework will be no challenge. Promoting it on the other hand is very simple. The target of this project are developers and developers have several resources they use to get information. One is github itself, a good repository name will do the trick to allow developers to find the repository. Extra to that, we will write messages on any and all developer channels on Cardano to promote the repository and get feedback from other developers.

Managing Funds

We are a previously Catalyst funded organization, and we keep all our financial records available to the public. You can verify how we've spent our previous funding to validate the trust put in us by the Cardano community to manage our funds wisely. You can find our financials on our Discord server.

[CAPABILITY/ FEASIBILITY] What are the main goals for the project and how will you validate if your approach is feasible?

The goal of this project is to

provide a fully customizable open source base for future cNFT projects,
have this base be used by other developers in their projects,
and have it developed further by 5 other developers as an open source project.

Goal 1 will be easy to determine if we have reached it. Does the framework

have an NFT display, an NFT gallery, and a way to read NFTs from on chain including the metadata and the decentralized storage?
allow the developer to read the user’s wallet for NFTs?
allow for customization? Can the developer
display any NFT collection?
find any address’ NFTs?
display any sort of NFT combinations?
completely change the frontend but use some of the components as they wish?

Goal 2 is easy to know from the engagement on the github repository. The number of stars, forks, comments, feature requests all point to the project being used.

Goal 3 will also be easy to determine. Are there any non-team members forking and creating pull requests? If we get a single one to update the repository, that’s an open source success. We will aim at 5 individual developers here though to ensure a healthy sustainable repository going into the future.

[CAPABILITY/ FEASIBILITY] Please provide a detailed breakdown of your project’s milestones and each of the main tasks or activities to reach the milestone plus the expected timeline for the delivery.

Milestone 1 - Determine project scope, tech stack, write project specification document, and README

We will work to determine the project scope, what it will include and what it will not, the tech stack to use, and write a specification document that includes all the details. We will also write the README document of the repository for developers.

The tech stack decisions will include supported wallets, 3rd party service providers for on-chain data such as blockfrost, tangocrypto, lucid, and javascript frameworks. This will be decided through some trial and error, to see if we could support as many wallets, and frameworks to interact with blockchain as possible, to give the project’s users options for their own projects.

Expected Timeline: 6 weeks

Acceptance Criteria: A product specification document that outlines all the functionality of the project, the technologies to use, the screens to build.

Milestone 2 - Build NFT reader and wallet reader utilities

To display information about any NFT, we need to be able to read it from the chain. That means we need to build helper functionality to read specific NFTs, get information about collections, and query NFTs from on chain.

The utilities must also include the metadata, and any 3rd party storage that is pointed to in the go to any off-chain links provided such as decentralized storage and download any items there. Altogether, this will be a powerful tool for querying, and searching for NFTs on chain.

The utility should also be able to connect select wallets and read any NFTs from there.

Expected Timeline: 6 weeks

Acceptance Criteria: Utility functions are developed and shown to work. The functionality should cover: reading NFT data from on chain, reading entire collections from on chain, getting all data in 3rd party links in the metadata such as IPFS, and any other functionality decided in milestone 1.

Milestone 3 - Build the NFT display

Develop a customizable page where any cNFT can be displayed along with its images, gifs and any other metadata. This will be a simple page, visually, as each project will look to deploy their own designs. While simple, the page will be feature rich, as in it will be able to display any detail of a complicated NFT metadata. Any number of images, gifs, writing, and link metadata should be supported so that developers can customize the displays to their liking.

Expected Timeline: 4 weeks

Acceptance Criteria: A customizable page to display an arbitrary CIP-25 and/or CIP-68 compliant cNFT, along with any number of images, gifs, and metadata it contains.

Milestone 4 - Build the NFT gallery

Develop a gallery for NFTs which displays collections, the NFTs in the wallet, and a random selection of NFTs together. This page will serve developers to display any number of NFTs together. It will be used as a base to display entire NFT collections, NFTs in a wallet, NFTs in sale, or pages such as my favorite NFTs. It needs to be flexible to support all these uses.

Expected Timeline: 4 weeks

Acceptance Criteria: A customizable page to display an collections of cNFTs, search and filter them based on name, metadata, collection, and more based on the specifications from milestone 1.

[CAPABILITY/ FEASIBILITY] Please describe the deliverables, outputs and intended outcomes of each milestone.

Milestone 1 - Determine project scope, tech stack, write project specification document, and README

Output: Project Specification document, detailed README file in the github repository.
Outcomes:
A clear understanding of the projects scope for the team,
An initial set of functionalities agreed upon to build,
Selection of technologies to support/implement

Milestone 2 - Build NFT reader utilities

Output: A JS library to interact with cNFTs.
Outcomes:
A set of helper functions to interact with now ready.
Developers can use library to query NFTs, collections, and NFTs in wallets
The utilities needed for the NFT display and gallery are ready.

Milestone 3 - Build the NFT display

Output: A fully functional, customizable NFT display page with HTML, CSS, and JS.
Outcomes:
Developers now have a fully featured open-source NFT display they can easily integrate into their projects.
Developers can customize the page easily, with extensive metadata support for different file types, or scrap the functionality to have simple pages.

Milestone 4 - Build the NFT gallery

Output: A fully functional, customizable NFT gallery page with HTML, CSS, and JS.
Outcomes:
Developers now have a fully featured open-source NFT gallery they can easily integrate into their projects.
Developers can customize the page easily, build any custom page for NFT displays such as NFT collections, NFTs in a wallet, my favorite NFTs.

[RESOURCES & VALUE FOR MONEY] Please provide a detailed budget breakdown of the proposed work and resources.

As a team we will set aside 1 day each every week, meaning 8 hours of work for 4 people or 32 hours total. Rating that work at 25 USD/hr that is 800 USD per week.

We estimate the project will last about 14 weeks, but development is always fraught with unknowns and time estimates usually take much longer. There is also the risk of ADA/USD price volatility, which may impact our budget dramatically.

That’s why to include potential setbacks and unknowable risks, we’ve extended the project timeline to 20 weeks. So including those risks the budget for the project is 16,000 USD for 20 weeks of 32 hours of development work.

We don’t expect any additional costs for this project due to the nature of it.

At the time of submission ADA/USD is 0.29 parity, so our budget is: 16,000/0.29 = 55172 ADA

[RESOURCES & VALUE FOR MONEY] Who is in the project team and what are their roles?

Cem - I completed a Master's degree in Electrical & Electronics Engineering. My thesis was about to create a complete Video on Demand system with client-server architecture with its own network protocol called Reliable UDP. After graduating, I set up a high-security financial data center in 2004. Then, in 2019, I started a new cyber security startup with three of my staff. The same year, the startup was funded by the largest bank in Turkey.

I started programming when I was 12 years old, and about 6 years later, I met the Internet, which introduced so many things to me. Open source was the biggest among them. Later on, I wrote a book about Linux and open-source systems. For me, open-source philosophy was the key to real human potential. It was making the secrets of the institutions public.

In the corrupt financial system we are used to living in, a person or group named Satoshi designed the decentralized digital currency called Bitcoin. And afterward, new techniques that were not part of our current order began to develop. Then, in 2021, I met Cardano, where like-minded people find each other. So when I dig deeper into Cardano, I suddenly found myself in the Cardano4Climate community trying to do things to stop climate change with a bunch of people all around the world.

With friends from Cardano4Climate, we formed up littlefish Foundation. It is a system, a reason for being. Encourage people to do anything for the good of the common. It is an experiment to build collective intelligence.

Now, I decided to retire from all of my real-world business to solely think, dream and work for the littlefish Foundation.

<https://www.linkedin.com/in/ckaraca/>

<https://github.com/ckaraca>

Cem is the senior engineer on the project. He will determine the scope of the project with Chakhan and guide the development of the project.

ChaKhan - Co-founder of littlefish Foundation. In Project Catalyst and involved in Cardano since Fund 7. Organization building, governance, token engineering with long term interest in economics, game theory, behavioral psychology, political science, and history. 3+ years experience as a Backend Developer. Python, REST, Postgres, data modeling. Electrical and Electronics Engineering Major.

https://www.linkedin.com/in/çağkan-acarbay-b2210b136/

<https://github.com/cagkanacarbay/>

Chakhan is the project lead and product owner. He will determine the scope with Cem and manage the project.

Donald Isufi - FrontEnd Developer, BSc in Electrical and Electronics Engineering, 2+ years experience in React, Next.js, Typescript, Redux, and Tailwind CSS. With a key active role at the “littlefish Foundation”, I've contributed to Cardano blockchain projects and spearheaded successful proposals (Fund 8: Coordinating Action). Additionally, I maintain a prolific writing record on “DAO Work” and Ocean Technologies while managing all technical aspects of the littlefish.

Linkedin: <https://www.linkedin.com/in/donaldisufi/>

GitHub**:** <https://github.com/Nald97>

Donald is the frontend engineer of the project. He will implement the NFT gallery and displays.

Emir Olgun - Physics major 1 year experience in Data Analysis, 2 year experience in market research project management, 1 year experience in Cardano smart contract development. Physics major, Selt-taught programmer, JavaScript, Python. Completed Gimbalabs Plutus Project-Based Learning Summer 2022, followed Plutus Pioneers Program. Currently managing Littlefish Fund 9 proposals of Ocean Technologies and Tools of DAO Work.

<https://www.linkedin.com/in/emir-olgun-404048234/>

Emir is the blockchain specialist on the team. His role is to implement the parts of the project concerning blockchain. He will work actively on the NFT utilities.

[RESOURCES & VALUE FOR MONEY] How does the cost of the project represent value for money for the Cardano ecosystem?

For just about 0.64% of the challenge budget, this proposal offers a quick and easy way for developers to get started building cNFT projects on Cardano.

bookmarked!