Crypto-Widget

DEMO LINK

Introduction

📌 A small tool that allows users to freely drag and drop the desired layout and integrates multiple crypto currency information.

Frontend : React + Redux-Saga + Vite
Backend  : Firebase

Technologies

▪️ React : Use React Hooks, Functional Components

▪️ Vite : Fastest build frontend tooling

▪️ Redux-Saga : Manage side effects, bring more efficiency

▪️ CustomHooks : Use custom hooks to reduce code redundancy

▪️ ApexChart.js : Data visualization

▪️ Firebase : Firestorage & Image Storage

▪️ Google OAuth : Authentication with Google (third-party)

▪️ Material-UI: The most popular UI library.

▪️ Styled-components : Use CSS-in-JS to style components

▪️ React-grid-layout: Drag and drop customer layout

▪️ Husky : Use Git Hooks to automate tasks before commit

▪️ Tailwind CSS : Use JIT mode, Lightweight & Efficiency

Unfinished Features

• Use WebSocket to get real-time crypto data (candle stick chart)
• Add unit test & component test
• Solid code refactor
• Add more crypto widgets ...

Project Setup

npm serve

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint: eslint or prettier

Statement

This is a personal project for practice, all data comes from the Internet, no commercial use