Crypto Live Tracker is a Next.js application designed to provide real-time tracking and analytics of cryptocurrency data. It leverages various technologies including React, TypeScript, Tailwind CSS, and Axios for fetching data from external APIs.
- Node.js installed on your machine.
- A package manager such as npm, yarn, pnpm, or bun.
-
Clone the repository to your local machine.
-
Navigate to the project directory.
-
Install the dependencies by running one of the following commands based on your package manager:
npm run dev # or yarn dev # or pnpm dev # or bun dev
To start the development server, run:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result. The page auto-updates as you edit the files.
├── app
│ ├── (routes)
│ │ ├── (home)
│ │ │ └── page.tsx
│ │ ├── layout.tsx
│ │ └── providers.tsx
│ ├── favicon.ico
│ ├── globals.css
│ └── layout.tsx
├── components
│ ├── crypto-table
│ │ ├── cells
│ │ │ ├── change-cell.tsx
│ │ │ ├── crypto-cell.tsx
│ │ │ ├── price-cell.tsx
│ │ │ └── sparkline-cell.tsx
│ │ ├── columns
│ │ │ └── table-columns.tsx
│ │ ├── crypto-table.tsx
│ │ └── index.ts
│ └── ui
│ ├── badge.tsx
│ ├── button.tsx
│ ├── command.tsx
│ ├── container.tsx
│ ├── data-table
│ │ ├── data-table-faceted-filter.tsx
│ │ ├── data-table-pagination.tsx
│ │ ├── data-table.tsx
│ │ └── index.ts
│ ├── dialog.tsx
│ ├── popover.tsx
│ ├── select.tsx
│ ├── separator.tsx
│ ├── skeleton.tsx
│ ├── sparkline.tsx
│ └── table.tsx
├── config
│ └── index.ts
├── hooks
│ ├── useCryptoData.ts
│ ├── useKlinesData.ts
│ └── useTable.ts
├── lib
│ └── tw.ts
├── services
│ └── api.service.ts
└── utils
├── formatter.ts
└── types.ts
src/
: Source code of the application.app/
: Next.js pages and API routes.components/
: Reusable React components.config/
: Configuration files, including environment variables.hooks/
: Custom React hooks, e.g.,useCryptoData.ts
for fetching cryptocurrency data.lib/
: Library code and utilities.services/
: Services for external API calls, e.g.,api.service.ts
for fetching data from Binance.utils/
: Utility functions and types, includingtypes.ts
for type definitions.types/
: TypeScript type definitions.
next.config.mjs
: Next.js configuration file.tailwind.config.ts
: Tailwind CSS configuration.tsconfig.json
: TypeScript configuration.
Environment variables are defined in .env.local
and referenced in src/config/index.ts
. These include:
NEXT_PUBLIC_BASE_API_URL
: Base URL for the API.NEXT_PUBLIC_BASE_WS_URL
: Base URL for WebSockets.
Defined in package.json
, these scripts are used for development and production:
dev
: Start the development server.build
: Build the application for production.start
: Start the production server.lint
: Lint the codebase using ESLint.
The application is deployed to Vercel using the GitHub repository. Refer to the Next.js deployment documentation for more information.
-
Install
ESLint
andPrettier
extensions in VS Code -
Create a new branch
git checkout -b new-feature
- Make changes to the code, test your changes and commit your changes
git commit -m "new-feature"
- Push your changes to the remote branch
git push -u origin new-feature
- Create a pull request on GitHub.
- next.js
- typescript
- shadcn-ui
- tailwindcss
- axios
- @tanstack/react-query
- @tanstack/react-table
- react-icons
- jest
- testing-library
- ts-jest
- ts-node
- Oğuzhan Kuşlar - @kushadige - [email protected]