React Data Visualization - Build a Cryptocurrency Dashboard

Explore creating functional components in React using plain JavaScript functions, pass props like name, render JSX expressions, and import components to assemble a crypto dashboard.

Learn how styled components let you write CSX inside JavaScript with template literals, generate unique class names, and apply dynamic styles via props like primary.

learn to style react components with styled-components using template literals and props to create dynamic css-in-js styles, and practice extending components with primary variants while navigating major version changes.

Apply Google fonts to the cryptocurrency dashboard by changing the background to dark blue and applying the font-family in CSS to update the text.

Create an app layout wrapper by adding a new file, importing styled components, exporting a simple div with 40px padding, and wrapping the app to space the header.

Build an app bar using CSS grid in a React app, defining columns with grid template columns, and using styled-components to add logo, crypto dash, dashboard, and settings links.

Style the app bar by creating a logo and transforming side controls into styled components, using an active prop for color changes and hover effects.

Create and use a React context to pass state via a provider and consumer, then build an app provider to manage state with setPage and reflect updates.

Create a settings page that greets first-time users, lets them choose favorite coins, save preferences with localStorage, and route to the dashboard on subsequent visits.

Integrate the CryptoCompare API with the crypto-compare npm wrapper, fetch the coin list using async/await, and store it in state to render a coin grid on the settings page.

Create a shared page wrapper in React that renders a page's content only when the current page equals the provided name; otherwise it returns null.

Prefetch crypto data and guard against undefined coin lists by wrapping content with a loading indicator, using a content component and coin list context to render dashboard after coins load.

Build a coin grid in settings page using a css grid, react context, and styled components, mapping coin keys into grid items with a five column repeat for responsive layout.

Create and import a shared styles file to export colors, sizes, fonts, and box shadows for the cryptocurrency dashboard, supporting dark and light themes and consistent styling across the app.

Develop reusable tiles in a React data visualization dashboard by styling a shared tile with styled components, applying a grid gap, and adding hover and selectable states.

Refactor a coin tile component for a cryptocurrency dashboard, display first 100 coins with a get coins to display function, and add a top favorites bar above the lower grid.

Display a top section coin grid above the confirm favorites button, showing 10 coins, with red delete highlighting and a hover X delete icon.

Manage a favorites state for crypto coins and implement add and remove operations with lodash. Persist favorites to local storage and enforce a max favorites limit.

Learn to build responsive grids for cryptocurrency dashboards using css grid with auto-fit and auto-fill, minmax expressions, and repeat to adapt columns to any device.

Implement a search component using styled components to filter coins with a fuzzy search algorithm, wiring it into the settings page, and styling a two-column grid with a labeled input.

implement fuzzy search to filter cryptocurrencies by symbol or name, debounce input, and update the app with filtered coins; map results back to the coin list and reset on clear.

Fetches pricing data from the crypto compare API for favorites. Displays current prices and 24-hour change on the dashboard with loading states.

Create a cryptocurrency dashboard by building a price grid with styled components, rendering real-time coin prices, and implementing compact tiles for the second row, with number formatting and change indicators.

Implement the current favorite feature by selecting a coin in settings, persisting it to the local store, and highlighting it as the spotlight coin on the dashboard.

Learn to build a coin spotlight tile in a React data visualization dashboard that displays the current favorite coin's image and name, updating in real time as the selection changes.

Integrate highcharts into a React app using the react-highcharts wrapper, configure charts with a JavaScript object, and render a dynamic price chart from the highcharts demos.

Style the Highcharts theme to the crypto dashboard by importing a dark blue theme and applying it with set options in a React app.

Fetch historical data for the current favorite from the crypto compare API using 10 data points and moment to generate date values, and plot on a high charts date-time x-axis.

Assign a unique key to price tiles using an index and fix the dashboard first-visit bug by introducing a first visit flag that hides the control button.

Add a chart select dropdown to switch chart views between days, weeks, and months, wire it to update historical data and axis labels in a cryptocurrency dashboard.

Implement a light theme by toggling a light theme boolean, updating styles and document body color, and adjusting high chart colors for a cryptocurrency dashboard.