Bitcoin Mining Calculator - Frontend

Project Overview

This project is a Bitcoin Mining Calculator built using React, Vite, TypeScript, and Tailwind CSS for the frontend. The calculator allows users to input various mining parameters (hash rate, power consumption, electricity cost, and initial investment) and receive detailed profitability data by interacting with a backend API built with FastAPI.

The project demonstrates clean component structure, responsive design, and good accessibility practices.

Technologies Used

React with Vite (for fast bundling)
TypeScript (for static typing)
Tailwind CSS (for styling)
Axios (for HTTP requests)
Vite (for development and build)

Features

Responsive design for mobile, tablet, and desktop devices.
Simple form to capture user input for calculating profitability.
Display detailed results including daily, monthly, and yearly profits.
Custom hook (useProfitability) for fetching profitability data.
Environment variable support for configuring the API URL.
Client-side form validation with error messages.

Prerequisites

To run this project, you need to have the following tools installed on your system:

Node.js: Download and install Node.js.
npm: Node package manager (comes with Node.js).
Vite: Vite will be installed as a dependency.

Setup Instructions

1. Clone the Repository

First, clone the repository to your local machine.

git clone https://github.com/fly0305/Hut8_Asher_Test.git
cd Hut8_Asher_Test

2. Install Dependencies

Install the required project dependencies using npm.

npm install

3. Configure Environment Variables

You need to set up environment variables for the project to connect to the backend API.

Create a .env file in the root of the project (same level as package.json) with the following content:

VITE_API_URL=http://localhost:8000

The VITE_API_URL should point to the FastAPI backend's base URL.

4. Run the Application

Start the development server using the following command:

npm run dev

This will start the Vite development server and the application should be available at:

http://localhost:3000

The development server will automatically reload if you make changes to the code.

5. Build for Production

To build the application for production, run the following command:

npm run build

This will generate the production build in the dist folder.

6. Preview the Production Build

To preview the production build locally, use:

npm run serve

This will serve the production build locally.

Project Structure

src
 ├── assets               # Static assets like images
 ├── components            # Reusable components
 │   ├── InputForm.tsx     # Form for collecting user inputs
 │   └── ResultsDisplay.tsx # Component to display the profitability results
 ├── hooks                 # Custom hooks
 │   └── useProfitability.ts # Hook for fetching profitability data
 ├── services              # API-related logic
 │   └── api.ts            # Axios API service for interacting with backend
 ├── App.tsx               # Main application component
 ├── main.tsx              # Vite entry file
 └── styles                # Tailwind CSS configuration and global styles

How It Works

User Input: The user fills out the form with mining details, such as hash rate, power consumption, etc.
API Call: The form data is submitted to the backend using a custom hook (useProfitability), which sends a POST request to the FastAPI backend.
Results: The response from the API is displayed in a user-friendly manner with detailed profitability data.
Responsive Design: The UI is designed to be responsive and adjusts to various screen sizes.
Validation: The form includes client-side validation to prevent the submission of negative or zero values, with error messages displayed for invalid inputs.

fly0305 / Hut8_Asher_Test