We got inspired by the growing market of blockchain technology in 2021. NFT marketplace projects were growing fast and is one of the most important fragments of every blockchain platform, including de-fi, gaming, lending & borrowing,...

We have seen that the NEO platform lacks NFT marketplace apps and projects. The number of dApps built on NEO is lesser than on other platforms. We want to be one of the first builders on the NEO platform. We want to use our accumulated programming knowledge to accelerate the APP's development.

NEO N3 provides available services related to Oracle, and IPFS brings convenience and a sense of discovery for developers.

NEO N3 comes with a very wide Techstack that includes different programming languages. However, there are not many documents and products to be an example.

So, The first motivation is the desire to seize the opportunity. The second motivation is the desire to make a complete product to be able to understand NEO N3 deeply.

What it does

Integrate with NeoLine Wallet
Minting NFT on NEO
Setup Royalty fee
Buying/Selling/Auctioning NFTs on the marketplace
Integrate with NeoFS to upload file to IPFS system
Building a stats page to monitor the NFT marketplace

How we built it

Since NEO N3 has built-in Oracle and NEOFS (an IPFS system), our first development criterion is to use what NEO already supports.

Our tech stack:

Neow3j library for writing smart contracts, because, on https://developers.neo.org/, most of the latest tutorials use Java, with quick support from the discord channel.
Neow3j library to write API for dApp, in charge of processing raw data after getting data from Blockchain Nodes.
NeoFS gateway to provide endpoints for downloading and uploading files.
NeoFS Node to provide rRPC endpoint for creating container id as well as required from the configuration of NeoFS gateway
Custom Web gRPC is generated from NEOFS-API to be able to interact with NEOFS Node from the web app.
Envoy proxy to bridge the compatibility between gRPC web and native NEOFS Node gRPC.
Nginx proxy to map nodes on the server with real domain with SSL certificate.
Libraries like Neo Wallet Adapter interact with NeoLine Wallet, and invoke functions of smart contracts.
NodeJS, NextJS and Material UI to complete the web-app frontend and enhance the customer experience.
NEOXP cli, NeoCLI, NEOFS cIi, NEO GUI to run on private net and testnet.

Challenges we ran into

When we first started learning about NEO, we found the tech stack used to be quite wide. From that moment on, we noticed challenges. By the time we actually started working, in addition to the tech stack problem, we had additional problems that required understanding the nature of how the NEO N3 Blockchain works.

Challenge 1: How NEO N3 works, and pick a starting point to learn to write smart contracts. We wanted that language, library and a starting point to serve as many purposes as possible, we originally planned to choose C#. But after reading the documentation, tutorials, and support from different NEO teams, we're leaning towards Java and Neow3j. However when reading about NEOFS only supports Go & C#. We were a bit wobbly, but for the sake of directly interacting with NEOFS from the web-app scope, we couldn't use Go & C# either, so Java & Neow3j were our last resort

Challenge 2: How NEOFS works and how to interact with NEOFS from a React app. We found an example on GIT but it doesn't actually work due to old libraries, old API and sketchy installation documentation. However, we also understand what components must be installed for the system to work. To do this took us almost a week to complete.

Step 1: Install the latest NEOFS node
Step 2: Install NEOFS gateway
Step 3: Configure Docker for testing environment of NEOFS node
Step 4: Configure connection parameters between Gateway and NODE
Step 5: Install and configure Envoy proxy to make gRPC web compatible and native NEOFS node gRPC
Step 6: Use protoc to create and convert .proto files of NEOFS-LIB to Javascript and Typescript
Step 7: Use the Google-protobuf, grpc-web and other cryptographic libraries that support NodeJS, to call the gRPC endpoints.
Step 8: Pair and make decisions to optimize user experience when using NEO FS. In fact, we have pre-made Container Ids and use an account to upload and download files, users don't have to do it just to mint NFT

Challenge 3: Encryption, decryption and data structure mechanism to store information in Strings (Storage, MAP...), when to use byte string, when to convert to a byte array, Hash160... Returned data about how from the smart contract side and how to disassemble and dispose of it. It took us a few days to understand and apply.

Challenge 4: Interact with the wallet via Frontend, and which JS library to use to invoke smart contracts. There are some useful libraries that haven't been updated in a few months, some types of data structures are supported in smart contracts, but not in JS such as passing param with data types of MAP. Latency and instability, it is difficult for us to know when the data has been successfully stored on the Chain, usually, the Wallet has completed the transaction to charge GAS, and transfer NEO... but it takes a while for the data to be stored and can be called from Blockchain.

Accomplishments that we're proud of

Complete basic NFT Marketplace on NEO functions in 4 weeks
Overcome technical challenges to accomplish goals.
Gain a lot of in-depth knowledge about Blockchain.

What we learned

How NEO Block works, the role and connection of components in the system
How to use the Neow3J library to write smart contracts and interact with smart contracts. Models, ideas, how NEOFS works, and how to configure Nodes yourself.
How it works and frontend libraries like neon-js to interact with Wallets and Smart Contracts.
General knowledge of libraries and APIs in various languages. Through what we learned, we are also more confident to participate in the development of the NEO ecosystem in other areas such as DE-FI and infrastructure.

What's next for neo-artistic.com - NFT Marketplace on NEO

Go live on NEO mainnet
Optimize the Web Frontend page to look more artistic
NFT LaunchPad / NFT Staking / NFT Defi
More functions regarding NFT Marketplace
Mentors or support from NEO to grow our project
Calling out artists and users. Using tactics from successful NFT projects to apply to our project
Longterm, become a multi-chain NFT marketplace