Crypto Live Tracker Documentation

Overview

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.

Built With

Getting Started

Prerequisites

Node.js installed on your machine.
A package manager such as npm, yarn, pnpm, or bun.

Installation

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
```

Running the Development Server

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.

Project Structure

├── 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, including types.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.

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.

Scripts

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.

Deployment

The application is deployed to Vercel using the GitHub repository. Refer to the Next.js deployment documentation for more information.

Contributing

Install ESLint and Prettier 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.

Dependencies

Contact

Oğuzhan Kuşlar - @kushadige - [email protected]

kushadige / crypto-tracker Goto Github PK

crypto-tracker's Introduction