Blockhouse Dashboard

This project consists of a Django backend and a Next.js frontend for the Blockhouse Dashboard. It's intended purpose is a financial dashboard web application.

Setup and Running the Application

Clone the repository:

git clone https://github.com/1leozhao/blockhouse-dashboard.git
cd blockhouse-dashboard

Prerequisites

• Python 3.8+
• Node.js 14+
• npm 6+

Backend Setup

1. Create and activate a virtual environment:

   python -m venv venv
   source venv/bin/activate
   

2. Install the required packages:

   cd backend
   pip install Django djangorestframework django-cors-headers psycopg2-binary
   

3. Run migrations:

   python manage.py migrate
   

4. Start the Django development server:

   python manage.py runserver
   

Frontend Setup

1. Navigate to the frontend directory

   cd frontend
   

2. Install dependencies

   npm install
   

3. Start the development server

   npm run dev
   

Usage

1. Ensure both backend and frontend services are running.
2. Access the specified port. localhost:8000

API Endpoints

• Candlestick Data: http://localhost:8000/api/candlestick-data/
• Line Chart Data: http://localhost:8000/api/line-chart-data/
• Bar Chart Data: http://localhost:8000/api/bar-chart-data/
• Pie Chart Data: http://localhost:8000/api/pie-chart-data/

Test Cases

python manage.py test chart_api

Libraries & Tools

• Backend:

  • Django
  • Django REST Framework
  • django-cors-headers
  • psycopg2-binary

• Frontend:

  • React
  • Next.js
  • Chart.js
  • TypeScript
  • react-chartjs-2

• Tools:

  • pip
  • npm
  • Git

Reflection

The Blockhouse Dashboard project represents a significant integration of modern web technologies, combining a Django backend with a Next.js frontend to create a dynamic and responsive user interface. Throughout the development process, I gained valuable experience in setting up RESTful APIs, managing state in React, and implementing responsive design principles.