How to build crypto price predictor using react and flask

Daichi Toyoda
7 min readMay 16, 2024

--

Cryptocurrencies have taken the financial world by storm, offering exciting opportunities for traders and investors. However, navigating the volatile crypto markets requires more than just luck — it demands strategic insights and predictive analytics. In this blog post, we’ll embark on a journey to develop a sophisticated cryptocurrency price predictor using React for the frontend and Flask for the backend. By leveraging the power of machine learning and real-time data, we’ll unlock insights into potential market trends, empowering traders to make informed decisions and navigate the turbulent crypto waters with confidence.

The Crypto Market Landscape

The cryptocurrency market is a dynamic and ever-changing ecosystem, characterized by its decentralized nature and high volatility. Traders and investors face the challenge of predicting price movements amidst market fluctuations, regulatory changes, and technological advancements. Understanding market dynamics, sentiment analysis, and technical indicators are essential for success in this fast-paced environment.

Understanding React and Flask

React and Flask serve as powerful tools for building dynamic web applications with robust frontend and backend functionality, respectively. React, a popular JavaScript library, enables the creation of interactive user interfaces, while Flask, a lightweight Python web framework, facilitates the development of scalable backend services. By combining these technologies, we can create a seamless user experience and leverage the strengths of both frontend and backend development.

Designing the Architecture

Before diving into implementation, it’s essential to design a scalable and modular architecture for our crypto price predictor. The architecture should encompass components for data collection, processing, prediction, and presentation, ensuring a cohesive workflow from data ingestion to user interface.

Among the various machine learning models for crypto price prediction, the Linear Regression model is most optimal for predicting crypto prices because it is simple to understand and implement, and works well with linearly separable data. This model assumes a linear relationship between the input variables (independent variables) and a single output variable (dependent variable).

When this assumption holds true, Linear Regression can provide a good baseline model for crypto price prediction. However, it’s important to note that crypto prices are influenced by a multitude of factors and may not always exhibit a linear relationship. Therefore, more complex models may sometimes offer better predictive performance. Always remember to validate the assumptions of your model and test its performance using appropriate metrics.

Here is my code. I used coinbase api for getting dataset. If you want to take a look my code, please clone Crypto_Forcast in my github

import requests
import numpy as np
from sklearn.linear_model import LinearRegression
from sklearn.preprocessing import MinMaxScaler
from datetime import datetime, timedelta

def get_market_chart(coin, period):
# Get dataset

# Use only the 'time' and 'close' columns
X = ohlc[:, [0, 1]] # Time
y = ohlc[:, 1] # Close price

# Reshape y to have the same shape as X
y = y.reshape(-1, 1)

# Scale the data
scaler = MinMaxScaler()
X = scaler.fit_transform(X)

# Train the model
model = LinearRegression()
model.fit(X, y)

# Make a prediction
y_pred = model.predict(X)

# Combine the dates and predictions into a dictionary
predictions = [[date, pred[0]] for date, pred in zip(dates, y_pred)]

return predictions

Gathering Data: The Fuel for Prediction

Data is the lifeblood of any predictive model. In the context of cryptocurrency price prediction, we need reliable historical price data, market sentiment indicators, and fundamental metrics to train our machine learning models effectively. We’ll explore various data sources and APIs to collect and preprocess data for training and testing our prediction models.

In my case, I used coinbase api for dataset. If you are not familiar with the coinbase API, please refer to the documentation of coinbase pro.

Building the Flask Backend

The Flask backend serves as the foundation of our crypto price predictor, handling data retrieval, preprocessing, and model inference. We’ll design RESTful API endpoints to expose data endpoints and integrate with our machine learning models for real-time prediction. Flask’s flexibility and simplicity make it an ideal choice for building scalable backend services.

mkdir crypto-price-predictor
cd crypto-price-predictor

# Initialize Python virtual environment
python3 -m venv venv

# Activate the virtual environment
source venv/bin/activate

# Install Flask
pip install Flask

# Initialize React app
npx create-react-app client

Now, let’s create the Flask backend. We’ll create a simple API endpoint that returns historical cryptocurrency price data. Create a new Python file named app.py in the root directory of your project.

This is my code.

# app.py
from flask import Flask
from flask_cors import CORS
from flask_jwt_extended import JWTManager
from routes import register_routes

app = Flask(__name__)
app.config['JWT_SECRET_KEY'] = 'crypto_forcast'
jwt = JWTManager(app)

CORS(app)

register_routes(app)

if __name__ == '__main__':
app.run(debug=True)

After that, build simple routes for crypto predictor. I removed code related to authentication. If you wanna take a look the code, please refer my repo.

# routes.py
from flask import jsonify, request
from flask_jwt_extended import jwt_required, get_jwt_identity
from models import User
from services import get_market_chart
from coinbase import get_coins_search, get_coins_summary, get_coins_histories

def register_routes(app):
@app.route('/api/prediction', methods=['POST'])
def get_coins_prediction():
data = request.get_json()
coin = data.get('coin')
period = data.get('period')
predictions = get_market_chart(coin, period)
return jsonify(predictions)

@app.route('/api/get_coins_summary', methods=['GET'])
def coins_summary():
result = get_coins_summary()
return jsonify(result)

@app.route('/api/get_coins_search', methods=['GET'])
def coins_search():
result = get_coins_search()
return jsonify(result)

@app.route('/api/get_coins_histories', methods=['POST'])
def coins_histories():
data = request.get_json()
coin = data.get('coin')
period = data.get('period')
result = get_coins_histories(coin, period)
return jsonify(result)

Next, create coinbase.py collect dataset using coinbase api.

# coinbase.py
import requests

def get_coins_summary():
response = requests.get(f'https://coinbase.com/api/v2/assets/summary?include_prices=true&resolution=week&filter=listed&base=USD')
return response.json()

def get_coins_search():
response = requests.get(f'https://coinbase.com/api/v2/assets/search?base=USD&filter=listed&include_prices=true&resolution=week')
return response.json()

def get_coins_histories(coin, period):
response = requests.get(f'https://api.coinbase.com/v2/prices/{coin}-USD/historic?sort=rank&period={period}')
return response.json()

Finally, create service.py to predict crypto price using linear regression model.

import requests
import numpy as np
from sklearn.linear_model import LinearRegression
from sklearn.preprocessing import MinMaxScaler
from datetime import datetime, timedelta

def get_market_chart(coin, period):
# Get OHLC data
response = requests.get(f'https://api.coinbase.com/v2/prices/{coin}-USD/historic?sort=rank&period={period}')
ohlc_data = response.json()

# Assuming 'ohlc_data' is a list of [time, open, high, low, close] lists
prices = ohlc_data['data']['prices']
histories = [[datetime.utcfromtimestamp(int(price['time'])).strftime('%Y-%m-%d %H:%M:%S'), float(price['price'])] for price in prices]
ohlc = np.array([[price['time'], price['price']] for price in prices])

# Use only the 'time' and 'close' columns
X = ohlc[:, [0, 1]] # Time
y = ohlc[:, 1] # Close price

# Reshape y to have the same shape as X
y = y.reshape(-1, 1)

# Scale the data
scaler = MinMaxScaler()
X = scaler.fit_transform(X)

# Train the model
model = LinearRegression()
model.fit(X, y)

# Make a prediction
y_pred = model.predict(X)

# Create a list of dates for the predictions
start_date = datetime.now()

if period == 'day':
dates = [(start_date + timedelta(minutes=i*5)).strftime('%Y-%m-%d %H:%M:%S') for i in range(len(y_pred))]
else:
dates = [(start_date + timedelta(minutes=i*30)).strftime('%Y-%m-%d %H:%M:%S') for i in range(len(y_pred))]

# Combine the dates and predictions into a dictionary
predictions = [[date, pred[0]] for date, pred in zip(dates, y_pred)]

return predictions

Crafting the React Frontend

The React frontend complements the Flask backend by providing an intuitive user interface for interacting with our crypto price predictor. We’ll design responsive UI components, integrate data visualization libraries, and implement real-time updates to display predicted price trends and insights. React’s component-based architecture and state management capabilities empower us to create dynamic and interactive user experiences.

This is UI what I built using react.

Dashboard page
Prediction page 1
Prediction page 2

I will summarize frontend field because flask backend is main for prediction. If you wanna refer my frontend, please clone my repo.

Harnessing Machine Learning for Prediction

Machine learning lies at the heart of our crypto price predictor, enabling us to analyze historical price data and extract meaningful patterns for prediction. We’ll explore various machine learning algorithms, including regression, time series analysis, and deep learning, to model price movements and generate accurate predictions. By training and fine-tuning our models with historical data, we can enhance prediction accuracy and adapt to evolving market conditions.

Evaluating Model Performance

Model evaluation is essential for assessing the effectiveness and reliability of our prediction algorithms. We’ll employ techniques such as cross-validation, backtesting, and performance metrics analysis to evaluate model performance and identify areas for improvement. By benchmarking against baseline models and conducting rigorous testing, we can validate the efficacy of our prediction strategies and refine our models for optimal performance.

Future Directions and Enhancements

As the cryptocurrency market evolves and new technologies emerge, there are endless opportunities for enhancing our crypto price predictor. We’ll discuss potential future directions, including integrating advanced machine learning techniques, incorporating real-time data streams, implementing sentiment analysis and social media data integration, and exploring decentralized finance (DeFi) applications. By embracing innovation and staying ahead of the curve, we can continue to push the boundaries of crypto price prediction and empower traders with actionable insights and predictive analytics tools.

Conclusion: Pioneering the Future of Crypto Trading

In conclusion, building a crypto price predictor with React and Flask represents a significant step towards democratizing access to predictive analytics in the cryptocurrency market. By leveraging the combined power of frontend and backend technologies, machine learning, and real-time data analysis, we can unlock valuable insights into market trends and empower traders to make informed decisions. As we continue to refine our prediction models, explore new technologies, and embrace innovation, we pave the way for a future where predictive analytics and data-driven strategies drive success in crypto trading and investment.

Thank you for reading. I hope my code will help you in your work.
If you like my code, please star it and fork my code on my github.🎉

--

--

Daichi Toyoda

Software engineer focused on building web platforms which combine AI and Blockchain