Skip to content

LuceLatin/Bitcoin-blockchain-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bitcoin Blockchain Explorer Web App

A full-stack web application that provides real-time insights into the Bitcoin blockchain, allowing users to explore blocks, transactions, and network data through a clean and responsive user interface.

The project focuses on combining a modern frontend with a lightweight backend API layer to securely fetch, process, and present blockchain data in a user-friendly way.


Features

  • View latest Bitcoin blocks and transactions
  • Search functionality for blocks and transaction hashes
  • Real-time data fetching from external blockchain APIs
  • Responsive UI optimized for desktop and mobile devices
  • Backend API layer for request handling and environment-based configuration
  • Clean separation between frontend and server logic

Tech Stack

Frontend

  • React
  • JavaScript
  • HTML5, CSS3

Backend

  • Node.js
  • Express
  • Axios

Tools & Libraries

  • Nodemon
  • dotenv
  • CORS

Project Structure

/bitcoin-blockchain-app
  /client   # React frontend
  /server   # Express backend API

Getting Started

Prerequisites

  • Node.js (v18+ recommended)
  • npm

Installation

git clone https://github.com/LuceLatin/Bitcoin-blockchain-app.git
cd Bitcoin-blockchain-app

Backend Setup

cd server
npm install
npm start

Frontend Setup

cd ../client
npm install
npm start

Environment Variables

Create a .env file inside the server folder:

RPC_USER=your_rpc_username
RPC_PASSWORD=your_rpc_password
RPC_HOST=your_rpc_host
RPC_PORT=your_rpc_port
RPC_URL=your_rpc_url

These variables are used to connect the backend server to a Bitcoin node via RPC.


What I Learned

  • Building a full-stack architecture with a dedicated API layer
  • Integrating third-party blockchain APIs securely
  • Structuring frontend and backend for scalability and maintainability
  • Handling async data fetching and error states in React
  • Designing responsive, user-focused interfaces

Future Improvements

  • Transaction and address analytics dashboard
  • Pagination and advanced filtering
  • UI performance optimization
  • Authentication for personalized dashboards

Author

Luce Latin
Frontend / Full-Stack Developer

LinkedIn: https://hr.linkedin.com/in/luce-latin-a185022bb GitHub: https://github.com/LuceLatin

About

Full-stack Bitcoin blockchain explorer built with React, Node.js, and Express, featuring real-time API integration.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors