Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alper-sayin/currency-exchange-dashboard
Currency Exchange Dashboard- Django REST Framework+React
https://github.com/alper-sayin/currency-exchange-dashboard
cors css django django-rest-framework postgresql react react-hooks reactjs reactjs-components recharts-js restful-api serializer-django serializers viewsets
Last synced: about 1 month ago
JSON representation
Currency Exchange Dashboard- Django REST Framework+React
- Host: GitHub
- URL: https://github.com/alper-sayin/currency-exchange-dashboard
- Owner: alper-sayin
- License: mit
- Created: 2024-11-17T02:15:05.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-11-17T23:04:37.000Z (about 1 month ago)
- Last Synced: 2024-11-18T00:20:17.585Z (about 1 month ago)
- Topics: cors, css, django, django-rest-framework, postgresql, react, react-hooks, reactjs, reactjs-components, recharts-js, restful-api, serializer-django, serializers, viewsets
- Language: JavaScript
- Homepage:
- Size: 22.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Table of Contents
1. [Introduction](#introduction)
2. [Key Features](#key-features)
3. [Technologies Used](#technologies-used)
4. [Project Structure](#project-structure)
5. [Installation & Setup](#installation--setup)
6. [Usage & Screenshots](#usage--screenshots)
## Introduction
A full-stack web application providing currency exchange rates, historical data visualization, and currency calculator. Built with Django REST Framework and React.
## Key Features
- Currency Exchange Rates: Interactive dashboard displaying current rates with trend indicators
- Historical Data Visualization: Interactive charts showing rate trends over multiple time periods
- Currency Calculator: Instant currency conversion with swap functionality
- Responsive Design: Fully responsive interface adapting to all screen sizes
## Technologies Used
### Backend
- Django & Django REST Framework
- PostgreSQL Database
### Frontend
- React.js
- Recharts for data visualization
- Custom CSS for styling
## Project Structure
```
|-- backend/
| |-- exchange/
| | |-- models.py # Database models
| | |-- serializers.py # API serializers
| | |-- views.py # API endpoints
| | |-- urls.py # API routing
|-- frontend/
|-- src/
| |-- components/
| | |-- CurrencyDashboard.js
| | |-- CurrencyCalculator.js
| | |-- HistoricalRates.js
| |-- App.js
|-- manage.py
```
## Installation & Setup
After fetching the files in repository or cloning the repository(`git clone (https://github.com/alper-sayin/Currency-Exchange-Dashboard.git)`) to desired folder, setting up virtual environment and satisfying the requirements([requirements.txt](requirements.txt)), [frontend/package.json](frontend/package.json), open the terminal in your IDE, you should apply:
### Backend Setup
Run all commands in project root directory
- `psql -U postgres`
- `CREATE DATABASE test_currency_exchange;`
for database creation in your postgresql server
- Then `python manage.py makemigrations`
- `python manage.py migrate`
for database migrations.
- `python manage.py load_historical_dates`
for seeding the database with currency exchange rates.
After all that our backend is ready for launch
- `python manage.py runserver`
### Frontend Setup
- Open another terminal in frontend directory
- `npm start` for running the server.
- Server automatically will be launched on http://localhost:3000 interacting with Django server(http://localhost:8000).
***Both servers should run simultaneously
## Usage & Screenshots
Current currency exchange rates & trends according to previous rates
Reversing rates
Changing base currencies
Navigating to historical rates via clicking the particular currency exchange rate
10-year rates chart
5-year rates chart
1-year rates chart
1-week rates chart
Currency exchange calculator
Swapping currencies
