Show me a better crypto tracker in terms of featues, functiopnalities and ui ux, I'll wait 😎 (Jk)
A crypto tracker web app built using =>
- next js
- TS
- redux-toolkit
- tailwind.
with the home page and coin detail page.
- Top 10 coins section
- Pagination with 4 pages, 20 coins on each page
- Filtering out on category between all coins, metaverse, and gaming category coins.
- search filter to search for coins
- sorting from low to high and high to low based on current price
- added a favourites section for the user to bookmark coins and they get added in a list with state management using redux, added both star marking the coins as well as even removing it.
- added currency switching between usd and inr
- the coin detail page with additional details about the coin, such as chart, market-cap, volume and other stats
- reccomended coins section at the coin detail page
- tailwind for styling
- and yes fully responsive
DO STAR THE REPO 🌟
Image preview, Home page =>
Resposive version =>
Coin Deatil Page =>
DO STAR THE REPO 🌟
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.