https://github.com/sbrunomello/simdex-web
interface of cryptocurrency exchange simulator platform.
https://github.com/sbrunomello/simdex-web
angular authentication cryptocurrency exchange frontend integration interface nodejs opensource plataform simulator typescript
Last synced: 2 months ago
JSON representation
interface of cryptocurrency exchange simulator platform.
- Host: GitHub
- URL: https://github.com/sbrunomello/simdex-web
- Owner: sbrunomello
- License: mit
- Created: 2023-10-28T18:21:43.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-21T02:01:43.000Z (over 2 years ago)
- Last Synced: 2025-01-20T21:46:50.184Z (over 1 year ago)
- Topics: angular, authentication, cryptocurrency, exchange, frontend, integration, interface, nodejs, opensource, plataform, simulator, typescript
- Language: TypeScript
- Homepage:
- Size: 35.4 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Simdex Web – Angular UI for Simulated DEX Platform
**Simdex Web** is the frontend application for the [Simdex](https://github.com/sbrunomello/simdex) platform – a simulation of a decentralized cryptocurrency exchange. Built with Angular, it offers a responsive dashboard where users can register, log in, view real-time prices, and interact with coin data in a realistic exchange layout.
---
## 🌐 Live Features
- 🧾 **Login and Registration** (connected to Spring Boot backend)
- 📈 **Coin Price Tracker** with live data
- 🪙 **Coin Table** for top market pairs
- 🔄 Modular UI structure with dashboard, sidebar, and components
- 🧪 Designed for realistic crypto UI simulation
---
## 🛠 Technologies Used
- Angular `^16`
- TypeScript
- SCSS / CSS
- RxJS (reactive state)
- Angular Routing
- Capacitor-ready (for mobile builds)
- RESTful communication with backend API
---
## 🧩 Project Structure Highlights
```
/src/app
│
├── core/services
│ ├── auth.service.ts → Login/registration logic
│ └── coin.service.ts → Fetches coin price data
│
├── modules/dashboard
│ ├── dashboard.component.ts
│ └── sidebar/ → App navigation
│
├── shared/components
│ ├── coin-price/ → Displays price from API
│ ├── coin-table/ → Lists crypto pairs
│ ├── login/ → Login form
│ ├── register/ → Registration form
│ ├── navbar/ → Top navigation
│ ├── footer/ → Footer content
│
├── directives/
│ └── outside-click.directive.ts → Detects external click (e.g. dropdown)
```
> Components follow modular and testable Angular best practices.
---
## ▶️ How to Run Locally
### Prerequisites
- Node.js (v18+ recommended)
- Angular CLI (`npm install -g @angular/cli`)
- Backend API running ([Simdex Backend](https://github.com/sbrunomello/simdex))
### Steps
```bash
git clone https://github.com/sbrunomello/simdex-web.git
cd simdex-web
npm install
ng serve
```
Access the app at:
`http://localhost:4200`
---
## 💡 API Integration
All data is fetched from the Spring Boot backend running at `http://localhost:8080`. It includes:
- `POST /auth/register`
- `POST /auth/login`
- `GET /api/v2/price` → Real-time BTC price (via CMC)
---
## 🧪 Development Notes
- Supports component unit testing with Karma + Jasmine
- Includes styles split per component (CSS or SCSS)
- Easy to extend with lazy-loaded modules
---
## 🚀 Future Roadmap
- [ ] Wallet simulation with fake balance
- [ ] Token buy/sell interaction (demo only)
- [ ] Visual charts with TradingView or Chart.js
- [ ] Internationalization (i18n)
- [ ] PWA support and mobile build via Capacitor
---
## 📬 Contact
- [GitHub](https://github.com/sbrunomello)
Developed with by Mello