justcodebryan / cryptocurrency-price-page

Architect Design

Purpose

To show the realtime price that fetch from backend, the frontend can refresh the data and continuously request the latest data from backend, by polling.

Solution

Using React.js to build up the whole frontend application.

Divide the pages and services via domain.

Folder Structure

├── public
└── src
    ├── api
    ├── assets
    ├── components
    ├── hooks
    ├── pages
    ├── routes
    ├── services
    ├── styles
    ├── types
    └── utils

This application uses Domain Driven Design to build up the folder structure.

• public -> store static files, like icon, etc.
• src/api -> request layer using axios.
• src/assets -> include some static files.
• src/components -> has some common components inside.
• src/hooks -> some common hooks.
• src/pages -> each pages.
• src/routes -> the routes of the pages.
• src/services -> the services of each page.
• src/styles -> global style and some scss and css variables.
• src/types -> the definition of types from each page.
• src/utils -> common utils function used in the project.

Each page will have corresponding files in pages/, services/ and types/.

When there is a bug that is not related to the common components, utils or hooks, you need to search the files mentioned above to find the bug and fix it.

Tech Stack

Main Package

• React.js
• Vite.js
• TypeScript
• axios

Dev Dependencies

• pnpm
• Nodemon
• ESLint
• Prettier
• StyleLint
• CommitLint
• Husky

Startup

1. Install Dependencies

pnpm install
# alias: pnpm i

2. Config dot environment file

cp ./.env ./.env.dev.local

3. Start development server

pnpm dev
# pnpm run dev

FAQ