EmilFattakhov/space-race-plot-o-meter

Autonomys Network Space Race Plot-O-Meter

Welcome to the Autonomys Network Space Race Plot-O-Meter project! This application displays real-time blockchain data in a visually engaging thermometer, ranging from 0 PiB to 20 PiB, using Auto SDK, JavaScript and pure CSS.

Prerequisites

Node.js: Version 14 or higher is recommended.
npm: Node Package Manager, comes with Node.js.

Features

Real-Time Data: Fetches and displays the latest spacePledged data from the Autonomys blockchain every second.
Dynamic Visualization: A thermometer that visually represents the data, with animations and effects.
Cosmic Theme: A space-inspired design using pure CSS, including a moving starfield and nebula effect.
Pure CSS Design: No images required; all visuals are created using CSS.

Getting Started

Forking the Repository

Fork the Repository on GitHub:
- Navigate to the original repository on GitHub.
- Click on the Fork button at the top-right corner of the page.
- This will create a copy of the repository under your GitHub account.

Cloning the Repository

Clone Your Forked Repository:

Open your terminal or command prompt and run the following command, replacing <your-username> with your GitHub username:
```
git clone https://github.com/<your-username>/autonomys-space-race-plotometer.git
```
Navigate to the Project Directory:
```
cd autonomys-space-race-plotometer
```

Installing Dependencies

Initialize npm:

If a package.json file isn't already present, initialize npm:
```
npm init -y
```

Install Required Packages:

npm install express @autonomys/auto-consensus @autonomys/auto-utils

Update package.json:

Ensure your package.json includes the following:

{
 "name": "autonomys-space-race-plotometer",
 "version": "1.0.0",
 "description": "Autonomys Network Space Race Plot-O-Meter",
 "main": "server.js",
 "type": "module",
 "scripts": {
   "start": "node server.js"
 },
 "dependencies": {
   "express": "^4.17.1",
   "@autonomys/auto-consensus": "^1.0.0",
   "@autonomys/auto-utils": "^1.0.0"
 }
}

Adjust versions as necessary.

Starting the Server

Run the Express Server:

npm start

You should see:

Server running at http://localhost:3000

Usage

Access the Application:

Open your web browser and navigate to:
```
http://localhost:3000/
```
You should see the Autonomys Network Space Race Plot-O-Meter displaying real-time data with dynamic visuals.

Project Structure

Your project directory should look like this:

autonomys-space-race-plotometer/
├── server.js
├── package.json
└── public/
    └── index.html

server.js: The Express server file.
package.json: Contains project metadata and dependencies.
public/index.html: The main HTML file for the front-end.

EmilFattakhov / space-race-plot-o-meter

readme