This project is created with James Fury.
I was kinda busy during this project, so I needed time to optimize this project
I hope you could pleased to understand this point as well
In the project directory, you can run:
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.
This project is developed by create-react-app and mui react.
./src/App.js
This project has a single router / the index router.
./src/pages/index.js
! I didn't use Redux in this project, because it was estimated to be a simple project.
./src/context/ThemeContext.js
./src/context/TokenContext.js
./src/component
Item & Modal Inner Content of NFT to display
Unfortunately, Mui icon library doesn't have Ethereum Icon.
So I made it with svg and made it as a module
./src/component/icon/ethereum.js
./src/content
This folder includes the layout (Default Layout wrapper and its components like navbar, page header, footer)
and the Token Grid (The way of displaying tokens as Grid items)
./src/data
This folder includes the data module (for Fake backend)
I took this data as an object from the Open Sea site GraphQL query result.
So the data displayed in this project is related to the original tokens from Open Sea, but static.
This data has 145 tokens.
I built this UI based on your altura site
I built this UI for potentially possible purpose for a big project.
Although this project uses static data from Local database, but is imagined that it is connected to the real DB service which has so many tokens.
So I implemented Smart rendering.
But you can't see further results without clicking the [LOAD MORE] Button in this project although Scroll Spy is possible.
This is because I wanted to show you (the user) the total token count and current displayed count so that you can get to know how many you got, and how many you can explore.
UX is the most important point of a web app because it is the way the user acts and finds everything.
Interactive UI/UX is the main recipe of live web app.
So I implemented some reactions to the user actions.
When user clicks the LOAD MORE button, the loader trigger occurs and you can see skeleton pre-rendered instead of real data.
The user can get to know that they are in loading as he/she can see the ripple effect of the skeleton object.
When user takes the mouse over the NFT item, the Banner of the NFT grows its scale.
Then when it is left, the Banner scale returns its origin.
When user clicks the card, the ripple effect triggers and before it is ended, you can see the Modal appeared.
The modal includes the Banner, Volume and Description of the Token.
I prefer working to speaking, thinking to coding.
So although I have so much to want to tell you about, I would complete my readme with this paragraph.
Thx for your reading and attention fully.
Kind regards.
Mr. James