This app was made for Lumx Studio's - Frontend Developer Challenge, it's an NFT Collection dashboard to visualize the collection info and market data.
View Live
Table of Contents
The project was made using the following tools and standards for good development experience and good code quality:
- Commitlint to check the commit message following Angular's style.
- lint-staged to ensure no lint or TypeScript errors were committed.
- Prettier to format the code following the ESlint Standard.
Note 1: Although it not followed gitflow, I tried to follow the best practices for git commits.
Note 2: Tests were also not fully implemented because that would demand much time, so only snapshots were made for the components.
- Next.js
- Typescript
- React.js
- Tailwind CSS
- React Query
- axios
- react-chartjs-2
- Storybook
- recoil
- Vercel
- GitHub Actions
- Jest
Vercel Deploy
Storybook Deploy
This project use pnpm as package manager.
- Clone the repo
git clone https://github.com/strict-dev/lumx-nft-collection
- Install NPM packages
pnpm install
- run dev server
pnpm dev
- Running the Storybook server
pnpm storybook
-
Components
- Collection Info
- Header
- Hyper Trend
- Loader
- Period Selector
- Sales card
-
Pages (this is a SPA application 😅)
- Home
-
Api
- /api/collection (get collection info)
Note: Nextjs api route to fetch mocked data to simulate a real api
- There's some Layout shift when the page is loaded, this is because the page is rendered with Loader skeleton component that need some refinement on the layout. It's affects the CLS Web Vitals score.
Distributed under the MIT License. See LICENSE.txt for more information.
- Email hello@rafo.work