A modern and responsive dashboard for tracking cryptocurrency data, built with Next.js, TypeScript, and Tailwind CSS. The dashboard leverages the Coingecko API to provide real-time market data, including prices, market cap, and trading volume for a wide range of cryptocurrencies.
Add a description or caption if needed.
- Real-Time Data: Fetches the latest market data from the Coingecko API, ensuring that the dashboard is always up-to-date.
- Responsive Design: Fully responsive layout, optimized for both desktop and mobile devices.
- TypeScript: Strongly typed components and logic for enhanced code quality and maintainability.
- Tailwind CSS: Customizable and utility-first styling for fast and efficient design.
- Next.js: Server-side rendering (SSR) and static site generation (SSG) for optimal performance and SEO.
Check out the live preview of the application by following this link : https://tokena-dashboard.vercel.app/dashboard.
-
Clone the repository:
git clone https://github.com/Meschack/figma-to-code-ed2-week3.git cryptocurrency-dashboard cd cryptocurrency-dashboard -
Install dependencies:
pnpm install
-
Set up environment variables:
Create a
.env.localfile in the root of the project and add your configuration. For example:NEXT_PUBLIC_COINGECKO_API_KEY=YOUR_COINGECKO_API_KEY NEXT_PUBLIC_APP_BASE_URL=YOUR_APP_BASE_URL
-
Start the development server:
pnpm run dev
The application should now be running on http://localhost:3000.
To create a production build:
pnpm run buildThe project is ready to be deployed on platforms like Vercel, Netlify, or any server that supports Node.js.
Contributions are welcome! Please feel free to submit a pull request or open an issue.
This project is licensed under the MIT License. See the LICENSE file for details.
- Coingecko API for providing cryptocurrency data.
- Figma for the design of this dashboard.
- Shadcn UI to browse reusable components.
- The open-source community for the amazing tools and libraries.