NFT Marketplace in React, Typescript & Solidity - Full Guide
What you'll learn
- Create a true NFT marketplace!
- Understand complex topics in practical and fun way
- Get complete toolkit to work with any Blockchain
- Develop a real app on the Blockchain
- Knowledge of React JS
- Base knowledge of Solidity
- Familiarity with Blockchain
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, etc. No config is necessary.
Ethereum is a technology that lets you send cryptocurrency to anyone, but in the first place, It also powers applications that everyone can use and no one can takedown. It's the world's programmable blockchain.
Solidity is an object-oriented, high-level language for implementing smart contracts. Smart contracts are programs that govern the behavior of accounts within the Ethereum state.
Pinata is a pinning service that allows users to host files on the IPFS network. The InterPlanetary File System (IPFS) is a protocol and peer-to-peer network for storing and sharing data in a distributed file system.
What is this course covering?
The course covers everything you need for a decentralized NFT application according to the ERC721 standard. Students of this course will learn about NFTs by creating a real-world application.
Students will learn what ERC721 smart contract is and how to create one.
The frontend for dApps covered in the course is created with React JS library and Next JS framework. CSS and design are built with the Tailwind framework.
NFT Marketplace Application:
This central part of the course covers the creation of an interactive NFT marketplace. Clients of this platform will be able to purchase NFTs with Ether digital currency.
The application is created in the Next JS framework, built on top of the React JS.
The first part of the course covers the setup of the pages layouts, creation of the first pages, and components. The Tailwind CSS framework covers the styling part of the application.
Students will explore how to provide Web3 JS code into the application, code responsible for communication with a crypto wallet and, therefore, with the blockchain.
We will use the Provider/Consumer concept to provide this layer, which is very common in React JS. This will guarantee that all of the components and pages will be able to access functionalities responsible for communication to the blockchain.
The application's state and data management are handled through the SWR(stale while revalidate) library. This will provide a reactive feel to the application and a reactive rendering of components upon receiving new data.
After all, necessary communication with blockchain is achieved, the students will start to work on smart contract implementation.
The course follows the recognized ERC721 token standard.
The smart contract is an essential part of the project. It serves as the blockchain "storage" of NFTs and provides functionality to verify ownership of an NFT and linkage to the media storage.
The last part of the course covers preparing and storing data related to NFT. So-called NFT Metadata.
NFT metadata data will be stored on Pinata (IPFS) based storage. Students will learn to gather data from the form and later submit it to Pinata storage. The following important part is to link this metadata and create an NFT.
The most mentionable topics covered in this application are:
Next JS Integration with Web3 and Blockchain
Reactivity with Hooks and SWR
Creation of NFT(ERC721) Smart Contract
NFT data manipulation and storage on Pinata
Who this course is for:
- Juniors to mid-level devs interested in blockchain tech
- People looking for the practical Solidity/Ethereum/NextJS development guide.
- This course is for everyone eager to understand how to build an app from scratch
Eincode mission is to provide the best online learning experience for its audience.
High-quality content and programming concepts explained in real-life projects are fields where Eincode shines!
Eincode covers mainly courses focusing on programming guides for web and mobile development. If you are looking for complete and comprehensive guides, then Eincode is the right choice.
Instructor Filip Jerga also publishes courses.
Cheers & Keep Coding!
My name is Filip Jerga, and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on various technologies and projects, from C++ development for ultrasound devices to modern mobile and web applications in React and Angular.
Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort into explaining web and software engineering concepts straightforwardly, hands-on, and understandable.