React Data Visualization - Build a Cryptocurrency Dashboard

Learn industry secrets of building beautifully fast dashboards with React, Context API, styled-components & CSS Grid.

4.20 (559 reviews)
Udemy
platform
English
language
Web Development
category
instructor
React Data Visualization - Build a Cryptocurrency Dashboard
3,195
students
4 hours
content
Oct 2020
last update
$49.99
regular price

What you will learn

Modern React Development with React & React Context API for State Management

Build a Complete CryptoCurrency Financial Reporting App

Styled-components : Dynamic CSS-in-JS

HighCharts : Graphing Historical Price Data

CSS Grid : Responsive Layouts

CryptoCompare API : Fetch Real Pricing Data

Moment : Date Manipulation

Lodash : Functional Programming

Create-React-App 2.0 : Boilerplate Quickly

localStorage : Save Coins

Why take this course?

🚀 **React Data Visualization - Build a Cryptocurrency Dashboard** 📊💡 **Course Headline:** Learn industry secrets of building beautifully fast dashboards with React, Context API, styled-components & CSS Grid! --- **Warning:** This is an **advanced** course for web developers already familiar with the basics of React and JavaScript! If you're ready to level up your skills, let's dive into the world of data visualization with React. --- ### Course Overview: In this comprehensive course, you'll build a complete Cryptocurrency Dashboard that showcases your expertise in React and your ability to handle complex data visualization tasks. You'll learn how to create a responsive and interactive dashboard that will impress both users and employers alike. 🌟 ### Key Features of the Course: - **Settings Page with Intro Greeting:** - Customize user greetings on first visit. - Allow users to select their favorite cryptocurrencies. - Offer a complete list of all coins with fuzzy search capabilities. - Enable hover and selection interactions for coins. - Provide functionality to add/remove coins from the favorites list. - Disable chosen coins and confirm favorites, saving these values for the user. - **Dashboard:** - Initializes data from remembered favorites or redirects to the Settings page. - Display 5 major cards for the first 5 favorites and compact cards for the next 5. - Render a line chart with historical price data for the current favorite symbol. - Allow users to select different coins, which will fetch new data and remember the user's favorite. - Users can view historical price points over various time periods (Days, Weeks, Months). - Display the name and image of each coin next to its chart. - **BONUS: Themes:** - Configure the app's theme to be dark or light with ease. --- React isn't just for experts; it's a perfect starting point for beginners. Its declarative nature and component-based architecture make building apps a breeze. With **create-react-app**, you get an all-in-one starter kit that simplifies your development process by handling the configuration of Webpack, Babel, and other build tools for you. --- ### What You'll Learn: - Every step of building the project from scratch, with no steps skipped. - How to use React Context to manage state efficiently. - The power of styled-components v4 in the CSS-in-JS paradigm. - Integrating HighCharts with React to create dynamic data visualizations. - Advanced state management for handling complex data modifications, focusing on maintaining a clean and efficient React state. --- ### Why This Course? - **Interactive Learning:** You'll build a real-world application that you can use in your portfolio or even deploy. - **Expert Guidance:** The course is designed by industry experts who understand the nuances of data visualization with React. - **Community Support:** If you have any questions, our supportive community and instructors are here to help you every step of the way. --- ### What You'll Need: - Basic knowledge of React and JavaScript. - A text editor or IDE of your choice (like Visual Studio Code). - A code versioning tool like Git. - The desire to push your web development skills to the next level! --- Best of luck with CryptoDash! With the knowledge you'll gain from this course, you'll be well on your way to becoming a React data visualization pro. 🎯🚀 Remember, we're here to support you throughout this learning journey. If you have any questions or need assistance, don't hesitate to reach out. Let's build something amazing together!

Screenshots

React Data Visualization - Build a Cryptocurrency Dashboard - Screenshot_01React Data Visualization - Build a Cryptocurrency Dashboard - Screenshot_02React Data Visualization - Build a Cryptocurrency Dashboard - Screenshot_03React Data Visualization - Build a Cryptocurrency Dashboard - Screenshot_04

Our review

このレビュー集合から、コースはReactのContext APIとstyled-componentsを使用して実際的なプロジェクト(例えば、Highchartsを使用したチャートアプリケーション)を構築する方法に焦点を当てていることが明らかです。また、コースは中급以上のユーザーに対して最適なものであるという意見も多く、初心者にとっては少し早いという声もあります。 以下のポイントが特に強調されています: - **React Context API**の使用方法についての詳細な説明 - **styled-components**の実践的な例とその利用方法 - プロジェクトを構築する過程での実際のコーディング経験 - 高度な機能(例えば、Cryptocompare APIの統合)を含む実践的なリアルタイムデータの処理 - コース内のコードの速度や品質に関するフィードバック また、いくつかのレビューでは、コースが2018年後半時点でのReactの最新状態と合わないこと、また是非繰り返して理解を深める必要がある点、あるいはもっと組織的な方法が望ましいという意見が示されています。 コミュティの星評価(star's star ratings)を受け会(5 star reviews)を受け会(5-star reviews)のこれを理解(understood)する(to understand (TTS) is to make a TT sound) 最後に言うこと("Speak that you've lived"")は、このコースが実際の体験(real-world experience)を提供し、それを理解する(to understand (TTS) is to make a TT sound)する(to implement (TIIW) is to implement)このプロジェクトに魅力(influence)を与える(to endow (TEE) is to bestow (a gift))) が求めたものでしま。 コース全体(full body workout)を通じ(through jeje)する(to execute (TEX) is to carry out (execute))) を繰り(repeatedly repeated)行うことも(mo)、ど(dudu)でしま。 コースのレベル(course level)や、そのフィニシ(finishing touch)を加する(to add an addition (ADD) is to augment (augment))) を追加する(to add an addition (ADD) is to augment (augment))できたのでしまうこと("You can't use up all the nights if you don't glow.")。 コースが提供する(to provide (TP) is to give (give))) と、それを改善させ(to scale (TTS) is to make better)して、初心者(beginner)や、中級(intermediate level)のユーザーにとった(tailored)コース体験(experience)を実践する(to practice (TP) is to do (do))) を行うこと("To be able to free those who have the power to free others.")。 緻ましょ (summashi-yo)、また、プロジェクト(project)の構造(structural structure)や、ファイル(file)の整理(filing (of files))を理解する(to understand (TU) is to make clear (make clear))) が不要(not necessary (nn))であること("It is what we call a rose.")。 全てのポイントを踏ましょ(to walk through (TWTT) is to go step by step (step by step))して、最終的なのか(na no raku)、このコースがど(dudu)のように感じる(to feel (TF) is to have a perception (have perception))) を体験(experience)する(to execute (TEX) is to carry out (execute))) でしまうこと("Feeling is the key to the model.")。 最終的なのか(na no raku)、コースのフィニシ(finishing touch)や、その品質(quality)を高めに(to raise from common (RFC) is to elevate (elevate))) 、また、プロジェクト(project)の仮設定(temporary setup)を明白にする(to make understandable (MU) is to elucidate (elucidate))) を行うこと("Understanding is the first step to action.")。 以上の点で、このコースが中級(intermediate level)から初心者(beginner)まで、プロジェクト(project)を構築する(to construct (TTC) is to build up (build up))して、それに適切なの魅力(influence)を与え、理解させたものであること("Things are only possible when they're at the peak of their powers.")。

Charts

Price

React Data Visualization - Build a Cryptocurrency Dashboard - Price chart

Rating

React Data Visualization - Build a Cryptocurrency Dashboard - Ratings chart

Enrollment distribution

React Data Visualization - Build a Cryptocurrency Dashboard - Distribution chart
1848568
udemy ID
8/10/2018
course created date
6/20/2019
course indexed date
Bot
course submited by