Create a Mobile Responsive NFT Collection Website with ReactJS

Overview

In this video, you'll learn how to create a fully responsive NFT collection website landing page using React JS. The video covers the entire process of creating the landing page from scratch, including the use of various tools and technologies. This website uses different libraries such as swiper for carousel, react-confetti to add confetti animation etc. Before starting this video you can checkout the following demo link👇

Link🔗: NFT website template in ReactJS

What You'll Learn

By watching this video tutorial, you will learn the following:

• Complex Animaitions in React.
• How to create Scrolling effects using gsap.
• How we can leverage advantages of component structure.
• How to use confetti in React JS for awesome background effects.
• Uses of Lazy and suspense in reactJS to make components load faster.
• How to use different Hooks from react-use.
• How to draw SVG path on scroll.

Key Features of This NFT Website

• Multiple sections such as home, about, showcase, team, faq etc.
• Cool Background Effects
• Unique design
• Mobile Responsive
• Unique approach to showcase your NFTs
• Speed optimization by code-splitting
• Smooth animations using gsap
• Animating svg on scroll
• Easy to customize

Libraries Used

For this project, you will use the following libraries:

• CRA (create-react-app)
• Styled-components
• gsap
• react-use
• typewriter-effect
• react-confetti

Code Links

You can find the starter code for this project at: NFT website starter code (Give ⭐ to this repo if you like it)

And, for the final code,

Link-1: Gumroad: NFT collection website code

Resources

You can find all the resources used to make this website from the following:

• Fonts are from Fontsource.
• Special Thanks to Robert for creating Bigheads.
• All the svg files used in this website are from Icons8 and FreeSVG.

Time Stamps

The video tutorial has the following time stamps for you to follow along:

• Channel Intro: @0:00:00
• Demo: @0:00:10
• Let's get started @0:06:48
• Code Clean Up @0:09:00
• Creating Global Styles @0:11:06
• Creating Necessary Files @0:19:05
• Navigation Component @0:22:52
• Home Section @0:41:34
• About Section @1:09:14
• RoadMap Section @1:32:54
• Showcase Section @2:21:36
• Team Section @2:44:50
• Faq Section @3:03:50
• Banner & Footer Section @3:22:46
• Working With Navbar @3:47:15
• Scroll To Top Component @3:52:00
• Making it Responsive @4:01:34