Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More

JavaScript Mastery · Intermediate ·🖊️ Copywriting & Content Strategy ·3y ago
Every web developer needs to build a React Admin Dashboard Application. Learn how to create the best and most modern one simply by watching this course. This Admin Panel includes one Dashboard, Three Pages, Four Apps, and Seven fully functional charts! 💻JS Mastery Pro - https://jsmastery.pro ⭐Syncfusion Components: https://bit.ly/39pzH3R ⭐Syncfusion React Components: https://bit.ly/3lhzpyB If you want to get a finished, highly customizable Material UI version of a similar dashboard, check out Flexy React Material Dashboard - https://www.wrappixel.com/templates/flexy-react-material-dashboard-admin/?ref=257&campaign=Flexy 📚 Materials/References: GitHub Code (give it a star ⭐): https://github.com/adrianhajdin/project_syncfusion_dashboard Styles & Other Code: https://gist.github.com/adrianhajdin/7d0eea1cbab4ab21a69dc8c2faf9b831 Assets: https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/adrianhajdin/project_syncfusion_dashboard/tree/main/src/data You'll learn how to build a fully functional calendar, a kanban board, a WYSIWYG editor, and a color picker, as well as seven different charts! Alongside building this phenomenal application, in this video, you'll learn: - Advanced React Best Practices such as folder and file structure, hooks, and refs - Advanced State Management of the entire application using React Context API - And most importantly you’ll learn how to use Syncfusion - World's Best UI Component Suite for Building Powerful Web, Desktop, and Mobile Apps 💻 Join our Discord Community - https://discord.gg/n6EdbFJ 🐦 Follow us on Twitter: https://twitter.com/jsmasterypro 🖼️ Follow us on Instagram: https://instagram.com/javascriptmastery 💼 Business Inquiries: contact@jsmastery.pro Time Stamps 👇 00:00:00 Intro 00:08:16 Setup 00:51:38 Sidebar 01:06:21 Context API 01:15:25 Navbar 01:39:45 Homepage 01:54:44 Revenue Section 02:17:36 Data Tables 02:36:10 Calendar 02:44:02 Kanban 02:49:21 WYSWYG Editor 02:53:49 Color Picker 02:59:13 Theme Fix
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from JavaScript Mastery · JavaScript Mastery · 0 of 60

← Previous Next →
1 Learn Async/Await in This Real World Project
Learn Async/Await in This Real World Project
JavaScript Mastery
 2 JavaScript Exercise | Learn JavaScript with Exercism | #0 Setup
JavaScript Exercise | Learn JavaScript with Exercism | #0 Setup
JavaScript Mastery
 3 JavaScript ES6 for Beginners
JavaScript ES6 for Beginners
JavaScript Mastery
 4 ES7 and ES8 New Features
ES7 and ES8 New Features
JavaScript Mastery
 5 Learn JSON in a Real World React App
Learn JSON in a Real World React App
JavaScript Mastery
 6 How to Create PDFs With Node JS and React
How to Create PDFs With Node JS and React
JavaScript Mastery
 7 Must Have Visual Studio Code Extensions
Must Have Visual Studio Code Extensions
JavaScript Mastery
 8 Top 10 JavaScript Array Methods
Top 10 JavaScript Array Methods
JavaScript Mastery
 9 JavaScript Map and Set Explained
JavaScript Map and Set Explained
JavaScript Mastery
 10 Git Commands Tutorial for Beginners
Git Commands Tutorial for Beginners
JavaScript Mastery
 11 Build and Deploy a YouTube Clone Application Using React
Build and Deploy a YouTube Clone Application Using React
JavaScript Mastery
 12 React Hooks - Most Used Features
React Hooks - Most Used Features
JavaScript Mastery
 13 JavaScript Best Practices and Coding Conventions - Write Clean Code
JavaScript Best Practices and Coding Conventions - Write Clean Code
JavaScript Mastery
 14 Build and Deploy a Realtime Chat Application - Socket.io, Node.js, and React.js
Build and Deploy a Realtime Chat Application - Socket.io, Node.js, and React.js
JavaScript Mastery
 15 How to Create and Deploy a Portfolio Site in less than 30 Minutes
How to Create and Deploy a Portfolio Site in less than 30 Minutes
JavaScript Mastery
 16 SEO for Developers | 2020 SEO Tutorial
SEO for Developers | 2020 SEO Tutorial
JavaScript Mastery
 17 Web Development Roadmap 2020 [Learning Path] - Start Coding at Home!
Web Development Roadmap 2020 [Learning Path] - Start Coding at Home!
JavaScript Mastery
 18 Random Quote Generator - React Fetch API Data | Build and Deploy a Real Advice App Project
Random Quote Generator - React Fetch API Data | Build and Deploy a Real Advice App Project
JavaScript Mastery
 19 Build a COVID-19 Tracker Application - React JS Project (Hooks, Material UI, Charts js)
Build a COVID-19 Tracker Application - React JS Project (Hooks, Material UI, Charts js)
JavaScript Mastery
 20 JavaScript ES2020 - The Most Requested Feature Explained in 10 Minutes
JavaScript ES2020 - The Most Requested Feature Explained in 10 Minutes
JavaScript Mastery
 21 Modern React Event Handling Using Hooks
Modern React Event Handling Using Hooks
JavaScript Mastery
 22 Deno JS - Intro + Real Life Example
Deno JS - Intro + Real Life Example
JavaScript Mastery
 23 Build and Deploy a React PWA - Why Progressive Web Apps are the Future of the Web
Build and Deploy a React PWA - Why Progressive Web Apps are the Future of the Web
JavaScript Mastery
 24 Build a REST API with Node JS and Express | CRUD API Tutorial
Build a REST API with Node JS and Express | CRUD API Tutorial
JavaScript Mastery
 25 Build and Deploy an ARTIFICIAL INTELLIGENCE React App | Alan AI, JavaScript
Build and Deploy an ARTIFICIAL INTELLIGENCE React App | Alan AI, JavaScript
JavaScript Mastery
 26 Master Async JavaScript using Async/Await | Quokka JS
Master Async JavaScript using Async/Await | Quokka JS
JavaScript Mastery
 27 Spaced Repetition in Programming | mem.dev
Spaced Repetition in Programming | mem.dev
JavaScript Mastery
 28 Stop Copy & Pasting Code | mem.dev
Stop Copy & Pasting Code | mem.dev
JavaScript Mastery
 29 GitHub Profile README | Create an Amazing Profile Readme | Setup + Templates
GitHub Profile README | Create an Amazing Profile Readme | Setup + Templates
JavaScript Mastery
 30 NEW GitHub CLI 1.0 is here! | GitHub CLI Tutorial - Demo & Commands
NEW GitHub CLI 1.0 is here! | GitHub CLI Tutorial - Demo & Commands
JavaScript Mastery
 31 React Custom Hooks | Learn Custom Hooks & Build a Project
React Custom Hooks | Learn Custom Hooks & Build a Project
JavaScript Mastery
 32 Learn how to deploy an NPM Package
Learn how to deploy an NPM Package
JavaScript Mastery
 33 JavaScript Algorithms for Beginners
JavaScript Algorithms for Beginners
JavaScript Mastery
 34 Level UP your GitHub Game - Get Hired Quickly
Level UP your GitHub Game - Get Hired Quickly
JavaScript Mastery
 35 The Best Way to Host & Deploy a React Application
The Best Way to Host & Deploy a React Application
JavaScript Mastery
 36 Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 1/2]
Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 1/2]
JavaScript Mastery
 37 Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 2/2]
Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 2/2]
JavaScript Mastery
 38 ECommerce Web Shop - Build & Deploy an Amazing App | React.js, Commerce.js, Stripe
ECommerce Web Shop - Build & Deploy an Amazing App | React.js, Commerce.js, Stripe
JavaScript Mastery
 39 JavaScript Crash Course 2021 - Master JavaScript in One Video!
JavaScript Crash Course 2021 - Master JavaScript in One Video!
JavaScript Mastery
 40 MERN Auth - Login with Email (JWT) + Google OAuth Authentication | React, Node, Express, MongoDB
MERN Auth - Login with Email (JWT) + Google OAuth Authentication | React, Node, Express, MongoDB
JavaScript Mastery
 41 Chat Application using React JS - Build and Deploy a Chat App in 1 Hour (Microsoft Teams)
Chat Application using React JS - Build and Deploy a Chat App in 1 Hour (Microsoft Teams)
JavaScript Mastery
 42 MUST USE Websites & Tools for Web Developers
MUST USE Websites & Tools for Web Developers
JavaScript Mastery
 43 Learn Material UI in One Hour - React Material UI Project Tutorial [2022]
Learn Material UI in One Hour - React Material UI Project Tutorial [2022]
JavaScript Mastery
 44 Shopify ECommerce Store with React & Next JS | BuilderIO
Shopify ECommerce Store with React & Next JS | BuilderIO
JavaScript Mastery
 45 React Video Chat App | WebRTC Video Chat Zoom Clone | Tabnine
React Video Chat App | WebRTC Video Chat Zoom Clone | Tabnine
JavaScript Mastery
 46 TypeScript Crash Course 2021
TypeScript Crash Course 2021
JavaScript Mastery
 47 Build and Deploy a Premium Next JS React Website | Landing Page, Business Website, Portfolio
Build and Deploy a Premium Next JS React Website | Landing Page, Business Website, Portfolio
JavaScript Mastery
 48 Full Stack MERN Project - Pagination & Search | React + Redux, Node, Express, MongoDB
Full Stack MERN Project - Pagination & Search | React + Redux, Node, Express, MongoDB
JavaScript Mastery
 49 Build a BETTER Facebook Messenger Chat Application | React JS, Firebase, Chat Engine
Build a BETTER Facebook Messenger Chat Application | React JS, Firebase, Chat Engine
JavaScript Mastery
 50 Build and Deploy THE PERFECT Portfolio Website | Create a Portfolio from Scratch
Build and Deploy THE PERFECT Portfolio Website | Create a Portfolio from Scratch
JavaScript Mastery
 51 Full Stack MERN Project - Implement MERN Comments | React + Redux, Node, Express, MongoDB
Full Stack MERN Project - Implement MERN Comments | React + Redux, Node, Express, MongoDB
JavaScript Mastery
 52 Turn an API into a Startup?! Build & Sell an API with JavaScript
Turn an API into a Startup?! Build & Sell an API with JavaScript
JavaScript Mastery
 53 Exclusive First Look at GitHub Copilot - All you need to know
Exclusive First Look at GitHub Copilot - All you need to know
JavaScript Mastery
 54 Build and Deploy a Google Maps Travel Companion Application | React.js
Build and Deploy a Google Maps Travel Companion Application | React.js
JavaScript Mastery
 55 Build and Deploy a Full Stack Realtime Chat Messaging App with Authentication & SMS Notifications
Build and Deploy a Full Stack Realtime Chat Messaging App with Authentication & SMS Notifications
JavaScript Mastery
 56 Build and Deploy a React Cryptocurrency App and Master Redux Toolkit in One Video
Build and Deploy a React Cryptocurrency App and Master Redux Toolkit in One Video
JavaScript Mastery
 57 Build and Deploy a Group Video Chat Application with Messaging, Polls & More
Build and Deploy a Group Video Chat Application with Messaging, Polls & More
JavaScript Mastery
 58 Build and Deploy Google Search 2.0 with React & Tailwind CSS (simple!)
Build and Deploy Google Search 2.0 with React & Tailwind CSS (simple!)
JavaScript Mastery
 59 Top 10 Web Development Chrome Extensions You Simply Need to Try!
Top 10 Web Development Chrome Extensions You Simply Need to Try!
JavaScript Mastery
 60 Build and Deploy THE BEST Modern Blog App with React | GraphQL, NextJS, Tailwind CSS
Build and Deploy THE BEST Modern Blog App with React | GraphQL, NextJS, Tailwind CSS
JavaScript Mastery

Related AI Lessons

⚡
Wie oft sollte man einen Text vor Abgabe prüfen?
Learn how to effectively review and edit your writing to ensure clarity and accuracy, and why multiple checks are crucial before submission
Dev.to AI
 ⚡
How to Keep Humanity in the Writing of a Technical World
Learn to maintain humanity in technical writing by focusing on storytelling, empathy, and clarity, making your content more relatable and engaging to readers.
Medium · Machine Learning
 ⚡
How copywriters attract leads right now: Proven 10x plays (not 2x tactics)
Copywriters use 10x plays to attract leads without free work or cold spam
Copyhackers
 ⚡
The authority book move that separates you from every copywriter with a ChatGPT account
Creating an authority book showcases copywriting expertise that AI can't replace
Copyhackers

Chapters (13)

Intro
8:16 Setup
51:38 Sidebar
1:06:21 Context API
1:15:25 Navbar
1:39:45 Homepage
1:54:44 Revenue Section
2:17:36 Data Tables
2:36:10 Calendar
2:44:02 Kanban
2:49:21 WYSWYG Editor
2:53:49 Color Picker
2:59:13 Theme Fix
Up next
🕘 How to start a copywriting career in just 1-hour/day
Alex Cattoni
Watch →