This is a real-time order book visualization application for cryptocurrency trading. It uses a WebSocket connection to fetch live order book data from a mock API and displays the top 5 bids and asks for the selected cryptocurrency and exchange.
BSD-2-CLAUSE License
This is a web application built using the T3 Stack, which includes React, Next.js, TailwindCSS, tRPC, Prisma, and PostgreSQL. The app displays live data for 5 cryptocurrencies (BTC, ETH, XRP, LTC, DOGE) and allows users to create a watchlist to track their favorite cryptocurrencies. Users can also view historical data and detailed information for individual cryptocurrencies.
npm i
to install the dependencies..env
file as seen in .env.example
. // DB - POSTGRESWS_URL
is private and owned, only those with access can run the project.prisma migrate dev
to create the database schema.npm run dev
to start the development server.http://localhost:3000
in your browser to see the app running.The project is live at: https://order-book-one.vercel.app/
TypeScript is a superset of JavaScript that adds optional static typing. It was chosen for this project because it provides several benefits:
React is a popular JavaScript library for building user interfaces. It was chosen for this project because of its component-based architecture, which allows for the creation of reusable and modular UI components. React's virtual DOM and efficient rendering capabilities also make it a suitable choice for building a real-time data-driven application like this cryptocurrency order book app.
Next.js is a React framework that provides server-side rendering (SSR) and other features that improve the performance and SEO of web applications. It was chosen for this project because it allows for the creation of a fast and SEO-friendly web application, which is important for a public-facing application like this one.
TailwindCSS is a utility-first CSS framework that makes it easy to build custom user interfaces. It was chosen for this project because it allows for rapid development of responsive and visually appealing user interfaces, while also providing a high degree of customization.
tRPC (TypeScript-RPC) provides several benefits that are particularly well-suited for the cryptocurrency order book application:
Type-Safe API Design:
Efficient Real-Time Data Handling:
Scalability and Maintainability:
Testability and Reliability:
Integration with TypeScript:
By leveraging tRPC's features, the cryptocurrency order book application can benefit from a type-safe and efficient API layer that is well-suited for handling real-time data updates, scaling as the application grows, and maintaining a high level of reliability and testability.
Prisma is an open-source database toolkit that includes an ORM. It was chosen for this project because it provides a type-safe and easy-to-use interface for interacting with the PostgreSQL database, which is used to store the data received from the connection.
PostgreSQL is an open-source relational database management system. It was chosen for this project because it is a reliable and widely-used database that can handle the data storage requirements of the application.
SHADCN and Ant Design are two UI libraries that were used in this project. SHADCN was chosen as the primary UI library because it provides a clean and modern design that aligns with the overall aesthetic of the application. Ant Design was used as a secondary UI library to provide additional UI components (Table).
useHooks is a custom hooks library that was used in this project to encapsulate common functionality and improve code reusability.
DayJS is a library for handling date and time operations. It was chosen for this project because it provides a simple and intuitive API for working with dates and times, which is important for displaying historical cryptocurrency data.
Phosphor Icons is an icon library that was used in this project to provide a consistent and visually appealing set of icons throughout the application.
In addition to the core technologies and libraries used in this project, I have also incorporated Husky, Prettier, and ESLint to enforce code quality and consistency.
Husky: Husky is a tool that allows you to run scripts before Git commits and pushes. In this project, Husky is used to run Prettier and ESLint checks before each commit, ensuring that the codebase maintains a consistent style and adheres to best practices.
Prettier: Prettier is a code formatter that automatically formats the code according to a set of predefined rules. By using Prettier, the project ensures that the codebase has a consistent code style, making it easier to read, understand, and maintain.
ESLint: ESLint is a tool that identifies and reports on patterns in JavaScript and TypeScript code. In this project, ESLint is used to enforce TypeScript-specific rules, catch potential errors, and promote best practices. This helps maintain the overall code quality and reliability of the application.
The use of these tools, in combination with TypeScript and tRPC, provides a robust development environment that promotes code quality, consistency, and maintainability. This is particularly important for a real-time, data-driven application like the cryptocurrency order book, where code reliability and scalability are crucial.
By enforcing code standards and best practices through Husky, Prettier, and ESLint, the project ensures that the codebase remains clean, readable, and easy to work with, even as the application grows in complexity. This, in turn, facilitates collaboration, simplifies future development and maintenance tasks, and helps prevent the introduction of bugs or security vulnerabilities.
server/trpc/
directory. I was not able to render the UI at the rate of the data being sent by the WebSocket and save it to the database, so I had to throttle the data to be able to display it on the screen.This project is licensed under the BSD 2-Clause License, as the WS_URL
is private and owned by Low Observable Technology (https://lo.tech/).