[FRONT-END TEST] Binance Websocket Price Tracker

[matheusdesouzapereira]

Overview

This PR implements an application for managing price updates via Binance WebSocket, focusing on good practices in React, TypeScript and responsive design.

Project Structure (Atomic Design)

📦 src/
├── 📁 assets/               # Static resources
├── 📁 components/           # Atomic Design Components
│   ├── 📁 atoms/            # Basic components (Button, Input, etc.)
│   ├── 📁 molecules/        # Combinations of atoms (SymbolCard, etc.)
│   ├── 📁 organisms/        # Complex components (Watchlist, etc.)
│   └── 📁 templates/        # Core layouts
├── 📁 contexts/             # React contexts
├── 📁 hooks/                # Custom Hooks
├── 📁 services/             # API and WebSocket logic
├── 📁 styles/               # Global styles and SASS variables
├── 📁 types/                # TypeScript types
├── 📁 utils/                # Utility functions
└── 📁 pages/                # Application pages

How to Run the Project

1. Install the dependencies:

npm install

2. Start the server:

npm run dev

3. Run the tests:

npm test

Expected Visual

• Clean and responsive interface based on the provided template
• Binance symbol listing
• Functionality to create and manage watchlists
• Real-time updates via WebSocket
• Responsive design for mobile, tablet and desktop

Desktop:

Mobile:

Tests done