• Stars
    star
    329
  • Rank 128,030 (Top 3 %)
  • Language
    JavaScript
  • Created over 2 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Build a cool NFT Collection website landing page with React JS . This website is created using Gsap for cool scrolling and animation. If you want to learn how to create this website then you can follow below tutorial link in the ReadMe.

How to Create NFT Collection Landing Page in React JS

GitHub stars   GitHub forks   Github Followers  

This repository contains starter code for NFT Collection Website in ReactJS.

For the Demo and Final Code checkout this link👇:
Checkout this mobile responsive NFT collection website built with ReactJS

If you want to learn how to create it please follow below tutorial👇:
https://youtu.be/edr2o59Twrs
YouTube Video Views

⭐⭐⭐⭐ This repo is nominated in Top How To Nft Open-Source Projects on Github.

NOTE:

There is one change in the Button.js File.
Wrap Btn inside Link component like below for the link to work.

<a href={link} aria-label={text} target="_blank" rel="noreferrer" >
<Btn>{text}</Btn>
</a>

Images of The NFT Collection Website:

HOME ABOUT HOME MENU

Resources Used in This Project

Character Figures: https://bigheads.io/
Fonts: https://fontsource.org/
Svg Icons From: https://icons8.com & https://freesvg.org/

External Libraries used in this project:

styled-components
GSAP
type-writer effect
react-confetti
react-use

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

More Repositories

1

Next.js-Developer-Portfolio-Starter-Code

⭐Build a stunning portfolio website with Next.js, Tailwind CSS and Framer-motion. If you want to learn to create this you can follow the tutorial link given in the Read me file.
CSS
741
star
2

Nextjs-tailwindcss-blog-template

⭐Build SEO optimized personal blog website with Next.js, Tailwind CSS and Contentlayer. If you want to learn to create this you can follow the tutorial link given in the Read me file.
MDX
435
star
3

react-portfolio-final

Build a Stunning portfolio with React JS and framer-motion. This portfolio is created using framer-motion for cool transitions and animation. If you want to learn how to create this portfolio then you can follow below tutorial link in the ReadMe
JavaScript
345
star
4

Agency-website

Agency Landing Page. It is build on top of the React JS, with styled-components and GSAP for smooth scrolling animations. Create this awesome website in React by following the tutorial given in the readme file.
JavaScript
176
star
5

Next.js-Creative-Portfolio-Website

Interactive 3D Portfolio Website with Next.js, Three.js & Tailwind CSS | Checkout the tutorial link ⚡
JavaScript
148
star
6

Nextjs-contentlayer-blog

⭐Build SEO optimized personal blog website with Next.js, Tailwind CSS and Contentlayer. If you want to learn to create this you can follow the tutorial link given in the Read me file.
MDX
119
star
7

wibe-studio

Build a stunning Fashion Studio Website Landing page with React JS. This website is created using locomotive-scroll for smooth scrolling. Also, GSAP and Framer-Motion for some custom animations and effects. You can learn to make this website by visiting the tutorial link from the description.
JavaScript
115
star
8

react-sidebar

Create awesome sidebar for your portfolio or any projects, It is build using ReactJs and styled-components. React router is already configured, Also it has page transition effect using framer-motion.
JavaScript
113
star
9

React-responsive-navbar

Create responsive navbar with React Js. This navbar is responsive which means you can also use this in smaller devices like mobile / tablets. Follow the tutorial link given in the readme file to learn it.
JavaScript
105
star
10

React-Portfolio-starter-code-files

Build a Stunning portfolio with React JS and framer-motion. This portfolio is created using framer-motion for cool transitions and animation. If you want to learn how to create this portfolio then you can follow below tutorial link in the ReadMe
JavaScript
104
star
11

3D-Landing-page-for-Apple-iPhone

Create awesome landing page for Apple iPhone 14 using Three JS and React JS. This website uses threeJS to render 3D model of iPhone and GSAP for scrolling animations. If you want to learn how to create this website then you can follow tutorial link given in the ReadMe.
JavaScript
85
star
12

React-Redux-Todo-App

Build a CRUD application with React and Redux. Use Redux toolkit to build this todo app with cool animations using framer-motion. If you want to learn it then you can follow the tutorial given in the readme file.
JavaScript
69
star
13

devto-clone

build a Clone with React. Create this awesome devto clone with React using styled-components. Learn to fetch API and render different articles of dev.to
JavaScript
61
star
14

wibe-studio-starter-files

Build a stunning Fashion Studio Website Landing page with React JS. This website is created using locomotive-scroll for smooth scrolling. Also, GSAP and Framer-Motion for some custom animations and effects. You can learn to make this website by visiting the tutorial link from the description.
JavaScript
57
star
15

Nextjs-Creative-Portfolio-Starter-Code-Files

Interactive 3D Portfolio Website with Next.js, Three.js & Tailwind CSS | Checkout the tutorial link ⚡
JavaScript
48
star
16

React-Weather-app

Build a weather app in ReactJs using open weather API
JavaScript
45
star
17

CryptoBucks-Final-Code

⭐Build Feature Rich Crypto Screener App with React JS and Tailwind CSS. This App is created with context API, react-router and Cryptocurrency APIs. If you want to learn to create this you can follow the tutorial link given in the Read me file. crypto-
JavaScript
43
star
18

Apple-iphone-3d-landing-page-starter-Code

Create awesome landing page for Apple iPhone 14 using Three JS and React JS. This website uses threeJS to render 3D model of iPhone and GSAP for scrolling animations. If you want to learn how to create this website then you can follow tutorial link given in the ReadMe.
JavaScript
43
star
19

react-job-listing-website

Create Job listing website in React with functionalities like searching, sorting and filtering.
JavaScript
38
star
20

CryptoBucks-A-crypto-screener-application

⭐Build Feature Rich Crypto Screener App with React JS and Tailwind CSS. This App is created with context API, react-router and Cryptocurrency APIs. If you want to learn to create this you can follow the tutorial link given in the Read me file.
JavaScript
33
star
21

Smooth-Scroll-Next.js

Implement smooth scrolling in Next.js with the help of Lenis scroll and add parallax effect using GSAP.
JavaScript
32
star
22

react-pagination-component

Create custom pagination from scratch with React JS. Follow the tutorial link in the readme file to learn it.
JavaScript
29
star
23

React-Form-Component

A custom hook which will be used to handle form inputs and validate them. This hook is reusable so you can use it anywhere in your project or in other projects as well.
JavaScript
19
star
24

ReactJs-Text-Editor

Build text-editor in React JS. Learn to create this text editor with React by following the tutorial link given in the readme file.
JavaScript
19
star
25

reactjs-hamburger-menu

Create Hamburger menu with React JS from scratch. Learn to build this animated hamburger menu by following the link given in the readme file.
JavaScript
18
star
26

codebucks27

Create beautiful GitHub profile. Clone this repo and create your own cool github profile readme file.
14
star
27

React-Loading-Screen

Create different types of cool loading screens or loading indicator with ReactJs. Follow the tutorial link in the readme file.
JavaScript
13
star
28

AI-Powered-Twitter-Bio-Generator

AI powered twitter Bio Generator built Using Next.js and Groq | Shadcn | Llama 3
TypeScript
12
star
29

ReactJs-rock-paper-scissors-game

Create rock paper and scissors game with ReactJs and build cool UI. Learn to create this by following the tutorial from the readme file.
SCSS
12
star
30

React-Tutorials

Learn React JS with simple explanation and easy examples.
JavaScript
9
star
31

Weather-forecast-website

JavaScript
6
star
32

react-smooth-scroll

A simple way to add smooth scrolling in your React app using smooth-scrollbar. Learn how to add smooth scrolling in React website. webapp.
JavaScript
6
star
33

React-reusable-components

This repository contains React Reusable components. You can learn to create these components from here: https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA/
SCSS
6
star
34

React-sliding-signin-signup-form

Create cool login / register form with React JS.
JavaScript
4
star
35

React-Todo-app

Create TODO app in React Js.
JavaScript
3
star
36

Redux-Practice

Learn Redux in simple and easy way. Learn what is Redux-toolkit and how to use it in React app.
JavaScript
2
star