Crypto Inc

Crypto Inc is a sleek and powerful Admin Dashboard Template designed for cryptocurrency, Web3.0, and blockchain projects, built with Next.js, Tailwind CSS, and Shadcn/ui. Engineered for seamless data visualization, analytics, and intuitive user experience, it empowers you to manage and monitor your crypto ecosystem with precision and style.

Learn how to use the template by following the steps below.

Getting Started

First, install the dependencies:

npm install

Second, add your Coin Market Cap API key to the .env.local file. We use the Coin Market Cap API to fetch the latest cryptocurrency data for the Market page.

COIN_MARKET_CAP_API_KEY=your-api-key

Finally, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Editing Pages

The template comes with 2 main layouts:

1. app/(dashboard-layout) - The layout for the dashboard pages.
2. app/(page-layout) - The normal layout for the other pages.

Dashboard Layout

There are 6 pages on the dashboard layout: Portfolio, Market, Rewards, Staking, Transactions, and Settings.

1. To edit the Portfolio page, modify app/(dashboard-layout)/portfolio/page.tsx.
2. To edit the Market page, modify app/(dashboard-layout)/market/page.tsx.
3. To edit the Rewards page, modify app/(dashboard-layout)/rewards/page.tsx.
4. To edit the Staking page, modify app/(dashboard-layout)/staking/page.tsx.
5. To edit the Transactions page, modify app/(dashboard-layout)/transactions/page.tsx.
6. To edit the Settings page, modify app/(dashboard-layout)/settings/page.tsx.

Page Layout

There is only the Auth page on the page layout and to to edit the Auth page, modify app/(page-layout)/auth/page.tsx.

Editing Components

The template comes with a set of components that you can use to build your pages, all the components are located in the components directory and you can modify them to suit your needs.

There is also a components directory on some pages and layout which is different from the global components directory, these components directory contains components that are specific to that page or layout.

SEO

The template comes with built-in SEO support, you can modify the SEO settings by editing the lib/utils.ts file and changing the default values for the generateMetadata() function.

Each page uses the generateMetadata() function to generate the necessary metadata for the page.

Below are the other SEO settings and files you can modify:

1. app/favicon.ico - The favicon for the website, you can replace it with your own logo.
2. app/sitemap.ts - The sitemap for the website, you can modify it to include or remove pages.
3. app/robots.txt - The file used for search engine crawlers, you can modify which areas of the site crawlers are allowed or disallowed to access.
4. app/manifest.ts - The file that tells the browser how your Progressive Web App (PWA) should behave when installed on the user's desktop or mobile device.
5. public/product-demo.png - The image used for the Open Graph and Twitter Card tags, you can replace it with your own image.

Deployment

The easiest way to deploy a 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.

Before deploying your app to production, you need to rename the .env.local file to .env and add your domain url as value for the NEXT_PUBLIC_PROD_URL on that file.

FAQ