Chakra UI Dashboard - With Next.js

Veröffentlicht am: 01 Juni 2021
auf dem Kanal: Benjamin Carlson

31,032

561

Code along as I take a Dribbble dashboard design and code it using Chakra UI and Next.js! Along with Chakra UI, we use the react hook useState to make the content a bit more dynamic. This dashboard is fully responsive and follows best practices! This design uses the default Chakra UI theme but if you have a custom theme, you can modify it accordingly.

Helpful Links:
Code: https://github.com/bjcarlson42/chakra...
Demo: https://chakra-nextjs-dashboard.verce...
Chakra Docs: https://chakra-ui.com/
Chart.js Docs: https://www.chartjs.org/docs/latest/
React chart 2 docs: http://reactchartjs.github.io/react-c...
Feather React Icons: https://react-icons.github.io/react-i...
Dribbble Design: https://dribbble.com/shots/15640240/a...

This video is part of the "From Design To Code" Playlist:    • Design 🎨 to Code 💻

0:00 Introduction
1:01 Part 1 - Setup + Starter Files
3:00 Part 2 - The First Column
14:27 Part 3 - The Second Column
29:39 Part 4 - The Third Column
43:52 Part 5 - Making It Responsive

My Coding Gear:
⌨️ Keyboard - Apple Magic Keyboard - https://amzn.to/3g8A8QI
💻 Laptop - Apple MacBook Pro (2018 / 15 inch) - https://amzn.to/3wddJHL
🖥️ Monitor - Samsung CF390 Series - https://amzn.to/3pDc9fO

My Camera Gear:
📹 Camera - Canon EOS M50 - https://amzn.to/3ixAZfq
🔭 Awesome Camera Lens - Sigma (16mm / f1.4) - https://amzn.to/3pH1K2B
🎤 Microphone - Blue Yeti - https://amzn.to/2TdXLyq
💡 Lights - Neewer LED Lights - https://amzn.to/3gbm6ht

My Favorite Software:
📽️ Final Cut Pro - https://www.apple.com/final-cut-pro/
❗ Student Discount For FCP - https://www.apple.com/us-hed/shop/pro...
🚀 VSCode - https://code.visualstudio.com/

View All My Gear - https://benjamincarlson.io/gear

Support Me:
👨🏼‍💼 Join this channel to get access to perks -    / @benjamincarlson
💸 Sponsor me on GitHub - https://github.com/sponsors/bjcarlson42

Who Am I?
I’m Benjamin Carlson, a developer, student, and YouTube creator living in CT, USA. I make videos on programming, computer science, and productivity. I also started a programming tutorial website called Coffeeclass (https://coffeeclass.io) that complements this YouTube channel. Finally, I have a newsletter (https://buttondown.email/benjamincarlson) where I send out updates on my recent videos, writing, and anything I’m currently working on or find interesting. You can expect emails every 2 to 3 weeks.

Connect With Me:
📧 Email - [email protected]
🚅 Website - https://benjamincarlson.io
🐦 Twitter -   / bjmncrlsn
🚀 Github: https://github.com/bjcarlson42
💼 LinkedIn -   / bjcarlson42
✍️ Medium -   / benjamincarlson
📓 Newsletter - https://buttondown.email/benjamincarlson

If you need to contact me, the best way is email. I try to respond to everyone but it may take some time!

Disclaimer: Some of the above links are affiliate links. This means I may receive a small commission at no expense to you. This allows me to continue to post videos like this one!

#chakra #nextjs #designToCode

Auf dieser Seite können Sie das Online-Video Chakra UI Dashboard - With Next.js mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Benjamin Carlson 01 Juni 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 31,032 Mal angesehen und es wurde von 561 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

33,515,265

345K