Code Optimal
Code Optimal
  • Видео 6
  • Просмотров 7 576
Build a Personal Finance Dashboard Frontend with React, Nextjs, Tailwind CSS, and Shadcn UI Charts
In this comprehensive tutorial, you will learn how to build the frontend for a personal finance dashboard using industry-leading technologies.
Source Code: www.patreon.com/CodeOptimal
Timestamps:
00:00 Intro
02:15 Set Up and Layout
08:07 Side Navigation
15:26 Overview Cards
23:56 Radar Chart
31:06 Tree Map
39:08 Cash Flow Stream
47:00 Wallet Cards
53:09 Spending Categories and Trend
01:05:21 Transaction list
01:14:22 Financial Goals
01:20:26 Investment Cards
01:24:20 Portfolio Performance
01:31:38 Pie Chart
01:37:45 Bar Chart
01:43:30 Investment Holdings List
01:54:39 Settings Page
Просмотров: 453

Видео

Build a Full Stack Restaurant Menu Builder SaaS with Nextjs14, Convex, Clerk, Shadcn UI, and dnd kit2:39:19Build a Full Stack Restaurant Menu Builder SaaS with Nextjs14, Convex, Clerk, Shadcn UI, and dnd kit
Build a Full Stack Restaurant Menu Builder SaaS with Nextjs14, Convex, Clerk, Shadcn UI, and dnd kit
Просмотров 1,2 тыс.2 месяца назад
In this comprehensive tutorial, we will build a full-stack restaurant menu builder SaaS that allows restaurants to create menus for their customers. We will follow industry best practices and use leading development tools. Source Code: www.patreon.com/CodeOptimal Source code will be added to description soon Timestamps: 0:00 Intro and Setup 4:00 Navigation 20:00 Menu Styler and Zustand 59:20 Me...
Build an Order Management Dashboard with Next.js 14, Shadcn UI, Nivo Charts, and Tailwind CSS59:16Build an Order Management Dashboard with Next.js 14, Shadcn UI, Nivo Charts, and Tailwind CSS
Build an Order Management Dashboard with Next.js 14, Shadcn UI, Nivo Charts, and Tailwind CSS
Просмотров 3,6 тыс.3 месяца назад
In this project we'll build an Order Management Dashboard using industry best practices. We'll use Next.js 14, Shadcn UI, Nivo Charts, and Tailwind CSS Source Code: www.patreon.com/CodeOptimal Timestamps: Intro and Set Up: 0:00 Header and Left Nav: 5:00 Order Tracker: 21:00 Pie Chart 31:00 Funnell 39:00 Analytics Page: 44:00 Finish Home Page: 54:00
Build a Cryptocurrency Landing Page with Next.js 14, Aceternity UI, and Tailwind CSS23:06Build a Cryptocurrency Landing Page with Next.js 14, Aceternity UI, and Tailwind CSS
Build a Cryptocurrency Landing Page with Next.js 14, Aceternity UI, and Tailwind CSS
Просмотров 3814 месяца назад
Build a mobile-responsive landing page using modern technologies, including the trending component library Aceternity UI Timestamps 0:00 Intro and Setup 2:30 Background Boxes 7:20 Header Text 10:10 Canvas Reveal Effect 13:20 Card Hover Effect 16:30 Infinite Moving Cards 18:50 Floating Nav Bar
Build a Mobile Responsive Landing Page Using Next.js 14, Tailwind CSS, and Shadcn UI24:18Build a Mobile Responsive Landing Page Using Next.js 14, Tailwind CSS, and Shadcn UI
Build a Mobile Responsive Landing Page Using Next.js 14, Tailwind CSS, and Shadcn UI
Просмотров 2475 месяцев назад
In this tutorial we’ll be building a fully responsive landing page using Next.js 14, Shadcn UI, and Tailwind CSS. By the end of this tutorial you will have a solid understanding of how to build landing pages using industry best practices. Timestamps: 0:00 Intro and Setup 2:45 Header Component 7:20 Hero Component 10:50 Customer Component 14:30 Pricing Component 22:40 Footer Component
Build a Real Estate Marketplace Frontend Using Next.js 14, MapBox, Shadcn UI, and Tailwind CSS23:34Build a Real Estate Marketplace Frontend Using Next.js 14, MapBox, Shadcn UI, and Tailwind CSS
Build a Real Estate Marketplace Frontend Using Next.js 14, MapBox, Shadcn UI, and Tailwind CSS
Просмотров 1,7 тыс.6 месяцев назад
In this project, you are going to learn how to build a real estate marketplace frontend using industry best practices. The project will focus solely on frontend development and not on functionality. We will utilize Next.js 14, Mapbox, React Map GL, Shadcn UI, and Tailwind CSS for this purpose.