This project was built with:

Altcointstory

Flavius Boboutanu

Web Designer

UX Designer

Website CSS

HTML5

Java

Wix Studio

This project is a full-suite crypto dashboard that integrates multiple custom widgets and visualizations into a modern, responsive website. The goal was to create an engaging, data-driven experience using real-time and historical crypto data with a distinct retro/dark aesthetic. The project combines several components:

1. Crypto Fear & Greed Dashboard

Daily Sentiment Index:

Data Integration:

Uses the Alternative.me API to fetch the Crypto Fear & Greed Index.

Stores one record per day in a Wix database collection (CryptoIndexHistory) to build a historical log.

Header Widget:

Displays the current index in the site header with dynamic color-coding (red for fear, green for greed, neutral for balanced).

Animates updates using fade-out/fade-in effects.

ASCII-Style Gauge:

A retro, terminal-inspired ASCII meter that shows the current index value and sentiment classification.

Uses custom JavaScript to update text and styling based on data

Historical Charts (Stacked Layout)

Line Chart:

Built with Chart.js, it displays daily historical index values.

Includes decimation options for performance on large datasets.

Pie (Doughnut) Chart:

Shows the distribution of sentiment classifications (Extreme Fear, Fear, Neutral, Greed, Extreme Greed) over a chosen time range.

Uses chartjs-plugin-datalabels to display percentages inside each slice—configured to hide labels for 0% values.

Range Selectors:

Buttons (7 Days, 30 Days, All Time) let users choose the timeframe.

On initial load, the dashboard defaults to 7 days.

Historical Fear and Greed Index chart

Responsive Design:

The dashboard is built with a flexible, column-based layout so that it adapts to desktop, tablet, and mobile.

Custom CSS and media queries ensure that charts and widgets scale gracefully.

2. Crypto Heatmap (Treemap Visualization)

Dynamic Treemap Layout:

Uses D3.js to create a treemap (heatmap) of the top 50 cryptocurrencies by market cap.

Each coin’s rectangle size is proportional to its market cap, and its background color is determined by its 24h price change.

Adaptive Font Sizing:

Font sizes for the coin symbol, current price, and percentage change adjust dynamically based on the cell’s area.

The largest coins (e.g., BTC) display their symbol in a bold, prominent style.

Custom Styling:

The heatmap follows the site’s visual identity:

Background: #201014 (a deep, dark shade)

Accent: #ECA400 (vibrant orange)

Text: White or cream (#FFEDDF)

Each cell features hover effects that highlight borders and bring the cell forward.

3. Crypto Price Chart Widget

Historical Price Chart:

Fetches historical price data (e.g., for Bitcoin over the last 30 days) from the CoinGecko API.

Renders a responsive line chart with Chart.js.

The chart is styled using your site’s colors:

Line Color: #ECA400 (orange)

Background Fill: A subtle translucent orange

Text & Ticks: White/cream for clear visibility on a dark background.

Customization:

The timeframe and coin can be easily changed via API parameters.

Additional features such as tooltips and smooth curve transitions are included.

4. Crypto Price Marquee

Scrolling Ticker

A horizontally scrolling marquee that lists multiple crypto prices (BTC, ETH, DOGE, etc.) along with their price changes.

Uses localStorage to store baseline prices so new visitors instantly see up/down arrows for each coin.

Crypto price marquee

API Integration

Periodically fetches from CoinGecko to update prices.

Color-coded changes (green for up, red for down).

Responsive

Adjusts font size and spacing for mobile vs. desktop.

5. Sortable/Filterable Crypto Table

Real-Time Data Table

Fetches live crypto data (e.g., from CoinGecko or a custom API) and displays it in a table with columns like Rank, Name, Price, 24h%, Market Cap, Volume, etc.

Allows sorting (by rank, price, percentage change) and filtering (search by name, or set min/max price).

User-Friendly UI

Dark background (#201014), white text, and orange highlights.

Hover effects on rows, clickable headers for sorting.

Integration with Wix

Possibly uses Wix Data or direct API calls in Velo code.

Dynamically updates as new data arrives.

Market Cap top 100 c

6. Responsive Exchange Widget

Embedded iFrame

For external exchange widgets (e.g., Coin360) made responsive via a CSS “padding-bottom” technique.

Maintains aspect ratio and scales with screen width.

7. Animated CTA Button (Exchange / Signup)

Pulsating Glow

A gold-gradient button that softly pulses via CSS keyframes to draw attention.

On hover, slightly enlarges and intensifies the glow.

Mobile Optimization

Media queries ensure the button’s size and text remain readable on smaller screens.

Dark & Retro Style

Uses #ECA400 for the gradient, #201014 for text or background, and #FFEDDF for any additional labeling.

Tech Stack & Methodology

Wix Studio / Velo:

Backend data queries, storing Fear & Greed history in CryptoIndexHistory, building postMessage flows for dynamic widgets.

Chart.js:

For line and pie charts (index history, distribution, or price data).

Additional plugins (e.g., chartjs-plugin-datalabels) for in-chart labeling.

D3.js:

For creating a treemap (heatmap) with dynamic sizing and coloring.

CoinGecko & Alternative.me APIs:

Real-time and historical data for crypto prices and Fear & Greed index.

HTML, CSS, & JavaScript:

For building the marquee, iFrame responsiveness, CTA animations, and custom stylings.

Responsive Design:

Uses flex layouts, media queries, and dynamic calculations to ensure all widgets adapt fluidly to different devices.

Project Impact

Comprehensive Crypto Overview

Users can see market sentiment (Fear & Greed), top coins by market cap (treemap), price charts (line chart), a marquee ticker, and a sortable table of coins—all in one cohesive dashboard.

Engaging UI

Retro/dark styling with vibrant orange accents, subtle animations (pulsating CTA, fade-in/out updates, marquee scrolling).

Customizable & Extensible

Timeframes, coin selection, data sources, and styling can be tweaked with minimal code changes.

Professional & Responsive

The entire suite is mobile-friendly and adjusts gracefully to different screen sizes, thanks to responsive containers and dynamic layouts.

Like this project

This project is a full-suite crypto dashboard that integrates multiple custom widgets and visualizations into a modern, responsive website.

Likes

Views