Crypto Chart is a full-stack MERN app that lets users view candlestick charts of cryptocurrencies for selected asset pairs and periods.
- You can change the asset pairs and candlestick period by changing the settings in config/default.json
- The default settings are ETH/USD, XRP/USD as currency pairs and candlesticks are daily
- Only UTC Time Zone is supported for now
-
To prove my skills
Both the client and server sides are written in TypeScript, and the code is checked by ESLint. Each responsibility is properly separated in the code, which makes the code easy to understand and maintain. I believe this project will allow me to prove my skills.
-
Expandable and Practical
Currently only basic functions are implemented, but I believe that with support for other exchanges and the addition of technical indicators, it will become a practical application.
-
Client
- TypeScript
- React
- Redux, Redux Toolkit
- Tailwind CSS
- ApexCharts
- Vite
- Prettier
- ESLint
-
Server
- TypeScript
- Express
- Node.js
- MongoDB
- mongoose
- ws (WebSocket)
- Kraken REST API
- Kraken WebSockets API
- Prettier
- ESLint
Components are divided by feature, and data is fetched from the server side with custom hooks.
The selected asset pair and period are stored in the Redux store. Upon accessing the home screen, configuration and constant data are fetched from the server side and stored in Redux.
ApexCharts is used to render candlestick and volume charts.
Vite is the tool used for building the client side.
MongoDB is used to store OHLCV data obtained from the Kraken API and provide it upon server request.
Websocket is used to get OHLCV data from the exchange
Note: Node version 20.15.1 is used in this project.
npm run install-all
cp server/.env.example server/.env
MONGODB_URI
is the URI of the MongoDB database to be used.
If you want to change the asset pairs or candlestick period, change the settings in server/config/default.json.
{
"kraken": {
"apiUrl": "https://api.kraken.com",
"wsUrl": "wss://ws.kraken.com",
"baseAsset": {
"symbol": "ZUSD",
"altname": "USD"
},
"quoteAssets": [
{
"symbol": "XETH",
"altname": "ETH"
},
{
"symbol": "XXRP",
"altname": "XRP"
}
],
"dataNum": 365,
"period": {
"daily": 1440
}
}
}
For the list of asset pairs, see the following API documentation.
https://docs.kraken.com/rest/#tag/Market-Data/operation/getTradableAssetPairs
npm run dev-initialize-data
npm run dev
npm run build
npm run start