DEV Community: Sadee

How to build a Bento portfolio using ReactJs + Typescript

Sadee — Sun, 05 Jul 2026 13:13:53 +0000

Build a high-performance Bento-style portfolio website designed to showcase your developer skills and tech stack to recruiters.

This tutorial focuses on constructing clean, performant components from scratch. You will learn how to implement interactive elements like custom buttons and dialogs, ensuring your personal site is not just visually appealing but technically impressive. This approach is tailored for developers who want a professional, modern layout that effectively highlights their project experience.

By following this guide, you will gain the code snippets and structural knowledge needed to deploy a Bento-style portfolio that stands out. We prioritize a developer-centric workflow, ensuring your site remains lightweight and fast. This build is ideal for anyone looking to refine their frontend skills while creating a polished digital resume.

To level up your frontend skills join scrimba's course and get 20% OFF: https://scrimba.com/t/t0dj6pq6f1?via=codewithsadee

Tech Stack & Tools:

React & TypeScript
Tailwind CSS
Radix UI Primitives, CVA, tailwind-merge, clsx
Framer Motion (Animations)
EmailJS (Serverless Mailing)
Vercel Analytics & Speed Insights

What You Will Learn:

Setting up a production-ready React + TS environment
Designing a flexible, scalable UI component system
Hooking up a secure mailing system without a backend
Optimising your site architecture to nail a 100 Lighthouse score
Smooth animation orchestration with Motion
Continuous deployment on Vercel

✅ Prerequisite

Basic React knowledge is enough to follow along.

🔗 Essential links:

🕐 Timestamp
0:00 - Intro
1:25 - Project initial
11:37 - Header
16:35 - Setup and apply framer motion
18:54 - Button component with radix UI
31:17 - Contact dialog
45:17 - Form submission
1:09:27 - Outro

Subscribe for weekly frontend development tutorials, and comment below with which portfolio feature you want to build next.

Build an Advance Weather APP With ReactJS

Sadee — Wed, 11 Feb 2026 13:22:45 +0000

🚀 Want to become a Fullstack Developer? https://scrimba.com/fullstack-path-c0fullstack?via=codewithsadee (Get 20% OFF Scrimba’s Fullstack Developer Path using my link)

In this video, we’ll build a fully-featured Weather App from scratch using React and TypeScript.

This is not just another beginner weather app.
We’ll focus on real-world features, clean architecture, and modern React patterns used in production apps.

🚀 What we’ll build

Fast search command with keyboard shortcuts
Light / dark theme switch
Unit conversion (Celsius & Fahrenheit)
Get weather based on user’s current location
Interactive weather map using Mapbox
Bar and area charts to visualize weather data

🛠 Tech Stack

React + TypeScript
ShadCN (reusable UI components)
Mapbox (maps & visualization)
OpenWeather API (weather data)

📚 What you’ll learn

This project is designed to help you understand how React is used in real applications:
useContext for shared state
useMemo & useCallback for performance
useRef, useState, useEffect
Creating clean and reusable custom hooks
Structuring a real-world React + TypeScript project

✅ Prerequisite

Basic React knowledge is enough to follow along.

🔗 Essential links:

🕐 Timestamp
0:00 Intro
2:39 Project initial
13:49 Light and dark mode
23:00 Top app bar
27:29 Search implementation
1:05:33 Unit dropdown & weather provider
1:38:13 Page header
1:42:17 Implementing geolocation api
1:47:27 Current weather card
2:04:00 Weather map using Mapbox
2:29:23 Hourly weather tab
2:37:19 Overview chart
2:53:18 Precipitation chart
2:58:50 Wind chart
3:03:41 Humidity chart
3:07:18 Cloud cover chart
3:09:49 Pressure chart
3:12:38 UV index chart
3:14:51 Visibility chart
3:17:43 Feels like chart
3:20:22 Footer
3:21:04 Outro

Build a SaaS Admin Dashboard with React, Shadcn UI & TypeScript

Sadee — Wed, 26 Nov 2025 13:45:41 +0000

Build a SaaS Admin Dashboard with React, Shadcn UI & TypeScript

In this video, you will learn how to build a modern SaaS Admin Dashboard using React, Shadcn UI, and TypeScript. We will build a professional "Vendor Security" interface featuring responsive charts, advanced data tables with sorting and pagination, and a beautiful dark mode UI.

By the end of this tutorial, you will have a production-ready dashboard template that you can use for your own SaaS projects or client work.

🔗 Essential links

📝 What You Will Learn in This Course:
➖ How to setup a React project with TypeScript & Tailwind CSS
➖ Installing and customizing Shadcn UI components
➖ Building "Vendor Breakdown" charts using Recharts (or your specific chart lib)
➖ Creating an Advanced Data Table (Vendor Movements)
➖ Implementing Search, Column Sorting, and Pagination
➖ Custom cell rendering (Status badges, Progress bars, Action buttons)
➖ Responsive design best practices for Dashboards

🛠️ Tech Stack Used:
➖ React (with TypeScript)
➖ Shadcn UI (Radix UI + Tailwind CSS)
➖ Recharts (for Data Visualization)
➖ Lucide React (Icons)
➖ Vite (Build Tool)

⭐️ Timestamps:
0:00 Intro
2:18 Project demo
5:57 Project initial
11:23 Shadcn UI setup
16:13 Theme toggle functionality
17:50 App sidebar
24:04 Change theme
24:49 App sidebar
42:33 Header
51:57 Page & Page header
57:43 Dashboard card
1:04:26 Dashboard Bar chart
1:13:14 Dashboard Radial chart
1:24:49 Dashboard Table
1:30:03 Advance Data table
2:10:45 Final demo

👋 Connect With Me:
Twitter/X: https://x.com/codewithsadee_
Instagram: https://instagram.com/codewithsadee
LinkedIn: https://linkedin.com/in/codewithsadee

Build & Deploy a Complete MERN Stack Blog With Admin Dashboard

Sadee — Wed, 19 Nov 2025 18:26:47 +0000

In this comprehensive, step-by-step tutorial, you will learn how to build and deploy a complete MERN stack blog application ("Bitblog") from scratch.

This isn't just a simple demo; it's a full-featured platform with a modern front-end, a secure back-end, and a complete admin dashboard to manage all your content, users, and comments. This is the perfect portfolio project to impress employers!

By the end of this video, you will have built:
✅ A beautiful, responsive blog homepage using React and ShadCN
✅ Secure user authentication (Sign up & Login) with JWT
✅ A powerful admin dashboard to manage posts, users, and comments
✅ A rich text editor (like Medium) using Tiptap
✅ Image uploads handled by Multer and stored in Cloudinary
✅ A secure and efficient REST API with Node.js and Express
✅ User profile management and settings

💻 Front-End Tech Stack:
– React (with TypeScript)
– React Router
– ShadCN (for modern UI components)
– Framer Motion (for animations)
– Tiptap (for the advanced text editor)

⚙️ Back-End Tech Stack:
– Node.js & Express.js.
– MongoDB (with Mongoose)
– JWT (JSON Web Token) for authentication
– Bcrypt (for password hashing)
– Multer & Cloudinary (for file uploads)
– Winston & Logtail (for logging)
– Helmet, CORS, compression, express-validator & more for security

🔗 ESSENTIAL LINKS:
Blog api docs page: https://docs.blog-api.codewithsadee.com/
Frontend Assets: https://drive.google.com/file/d/1zAjiFs7HSpm41RCSzEDQmBPHrjJ5tEHU/view?usp=sharing
Source code (Frontend): https://www.patreon.com/posts/source-code-blog-140001975?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Source code (Frontend) Buymeacoffee: https://buymeacoffee.com/codewithsadee/e/462834
Source code (Backend) FREE: https://www.patreon.com/posts/rest-api-source-130599482?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Github Gist: https://gist.github.com/codewithsadee/e60ef18142d09b2f8ca5ae991452a3bb
Hostinger Special Link for Hosting: http://hostinger.com/in/codewithsadee

TIMESTAMPS:
00:00 Intro
04:13 Backend: Demo
22:44 Backend: Project initial
50:00 Backend: Root route
53:06 Backend: Handle server shutdown
54:51 Backend: Setup MongoDB
1:05:59 Backend: Setup winston for logging
1:16:47 Backend: Register
2:04:40 Backend: Login
2:30:44 Backend: Logout
2:46:30 Backend: Get current user
3:00:42 Backend: Update current user
3:14:21 Backend: Delete current user
3:21:11 Backend: Get all user
3:32:08 Backend: Get user by id
3:36:23 Backend: Delete user by id
3:39:48 Backend: Create a blog
4:26:31 Backend: Get all blogs
4:35:08 Backend: Get blogs by user
4:39:31 Backend: Get blog by slugs
4:46:23 Backend: Update blog
4:58:48 Backend: Delete a blog
5:11:49 Backend: Like a blog
5:25:32 Backend: Unlike a blog
5:30:58 Backend: Create a comment
5:42:43 Backend: Get comments by blog
5:47:03 Backend: Delete a comment
5:55:50 Backend: Setup Hostinger for API hosting
6:11:15 Backend: Domain configuration
6:12:11 Backend: Setup Nginx
6:17:20 Backend: SSL certificate
6:21:07 Backend: Setup BetterStack for API monitoring
6:24:41 Backend: Setup Logtail for API logging
6:34:47 Backend: Setup GitBook for API documentation
6:48:49 Frontend: Demo
6:56:18 Frontend: Initial Setup
7:02:19 Frontend: Login
7:21:37 Frontend: Signup
7:40:47 Frontend: Root layout
7:41:48 Frontend: Loading
7:44:37 Frontend: Header
8:05:25 Frontend: User settings
8:29:09 Frontend: Footer
8:33:13 Frontend: Home
8:58:55 Frontend: All blogs
9:02:24 Frontend: Blog detail
9:16:18 Frontend: Admin layout
9:43:21 Frontend: Dashboard (blog create, edit, delete) & user management
11:45:15 Frontend: Deployment

Like, share, and subscribe for more full-stack tutorials!

Build an AWESOME React Portfolio Website (Coding Bootcamp)

Sadee — Thu, 06 Nov 2025 12:55:13 +0000

In this tutorial, I’ll show you step-by-step how to create a stunning and fully responsive developer portfolio website using ReactJS, Tailwind CSS, TypeScript, Framer Motion, and Lenis Scroll for smooth scrolling effects.

We’ll design every section from scratch, including the hero section, featured projects, about, services, resume, tools, and contact form, all wrapped in a sleek, modern dark UI.

Whether you're a beginner learning React or a developer looking to upgrade your portfolio, this project will take your front-end skills to the next level.

🔥 What You’ll Learn:
🔹 How to structure a React + TypeScript project for scalability
🔹 Master Tailwind CSS for beautiful and consistent styling
🔹 Animate your website with Framer Motion
🔹 Implement smooth scrolling using Lenis Scroll
🔹 Create reusable components and organize your code efficiently
🔹 Build responsive layouts that look great on all devices

💻 Tech Stack Used:
🔹 ReactJS
🔹 Tailwind CSS
🔹 TypeScript
🔹 Framer Motion
🔹 Lenis Scroll

🔗 Don’t miss out — explore Sevalla today and Get your $50 free credit: https://sevalla.com/?utm_source=codewithsadee&utm_medium=Referral&utm_campaign=youtube

📁 Source Code & Resources:
Complete source code 1: https://www.patreon.com/posts/get-source-code-142965896?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Complete source code 2: https://buymeacoffee.com/codewithsadee/e/476231
Github Gist: https://gist.github.com/codewithsadee/30a5c287f616bb8690a61f298aac2dda
Project assets: https://drive.google.com/file/d/1A_zWah3nYHbtUZghzfj-THxs78CNgHvL/view?usp=sharing

⏰ Timestamps:
0:00 - Intro
02:35 - Project overview
05:16 - Project initial
15:52 - Mobile menu
24:13 - Floating side menu
28:17 - Profile card
34:34 - Hero section
41:39 - Stats section
44:39 - Project section
53:53 - About section
57:02 - Service section
01:02:47 - Resume section
01:13:23 - Testimonitals section
01:22:50 - Contact section
01:29:56 - Add smooth scroll

💬 Let’s Connect!
📸 Instagram → https://www.instagram.com/codewithsadee
💼 LinkedIn → https://www.linkedin.com/in/codewithsadee
💻 GitHub → https://www.github.com/codewithsadee

📢 Don’t forget to Like, Comment, and Subscribe for more ReactJS and Tailwind CSS project tutorials!

Build a NEXT-GEN Cloud Storage App with AI Features: React + Appwrite + ShadCN + ImageKit!

Sadee — Thu, 16 Oct 2025 13:42:29 +0000

Welcome to Cloudbin! In this massive full-stack project tutorial, we're building "Cloudbin," a secure and feature-rich, mobile-responsive cloud storage application from scratch. Forget a simple file upload app, we're integrating advanced AI-powered media editing features that rival professional tools!

This project is powered by ImageKit. They are an essential tool for any developer working with images or video, offering a unified platform for optimization, delivery, and their new, incredible suite of AI transformations. They also have AI-Powered DAM. Check them out and try their AI features for your next project:
🔗 Get ImageKit Free 3GB DAM Storage Now: https://tinyurl.com/mvnw6fs4

⭐ What We're Building (Cloudbin Features)

• Secure Authentication: Implement robust Email/Password login alongside Google OAuth using Appwrite Auth.
• File Management: Create a fully functional CRUD system to Upload, Edit, and Delete files and folders.
• Mobile First: A sleek, responsive design using TailwindCSS and ShadCN for a great UX on any device.
• Next-Gen AI Editing Suite (Powered by ImageKit!):
• AI Background Remove: Isolate subjects with a single API call.
• AI Dropshadow: Add photo-realistic shadows to product images.
• AI Upscale: Instantly boost the resolution of low-quality images.
• Generative Edits: Use text prompts to completely change the background or make other image edits!
• AI Retouch: Professional-grade image enhancements automatically.

💻 Tech Stack Deep Dive

• Frontend: React & React Router for a fast, single-page application experience.
• Styling: TailwindCSS & ShadCN for modern, utility-first UI development.
• Backend & DB: Appwrite (Auth, Databases, and Storage) for a powerful, open-source backend-as-a-service.
• Media & AI: ImageKit (Sponsor) for media optimization, transformations, and all advanced AI-driven editing features.
• Language: TypeScript used throughout for type safety and better scalability.

💡 What You Will Learn

By the end of this series, you will:

Master complex integrations between React, Appwrite, and ImageKit.
Build a professional, component-based UI using ShadCN and TailwindCSS.
Implement third-party OAuth (Google Login) with Appwrite.
Learn how to leverage AI APIs (specifically ImageKit's) to add powerful, marketable features to any application.
Gain experience in building a scalable, full-stack application with TypeScript.

📚 Prerequisites

To follow along comfortably, you should have:
• A good understanding of React fundamentals (hooks, components, state management).
• Basic familiarity with TypeScript.
• Familiarity with TailwindCSS is helpful but not mandatory.

How to build Personal Blog Application Using React | TailwindCSS | TypeScript

Sadee — Tue, 30 Sep 2025 13:03:37 +0000

In this video, I'll show you how I built and deployed a complete, full-stack personal blog application from scratch. We'll cover the entire process using a modern and powerful tech stack: React and TypeScript for the frontend, TailwindCSS for rapid and responsive styling.

This isn't just a simple frontend showcase; it's a fully functional application with complete CRUD (Create, Read, Update, Delete) functionality, secure user authentication, and file storage. Whether you're a junior developer looking for portfolio ideas or an experienced dev curious about this tech stack, this video will walk you through the entire project.

🔗 LINKS
Source code (frontend): https://www.patreon.com/posts/source-code-blog-140001975?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Source code: https://buymeacoffee.com/codewithsadee/e/462834
Source code (backend) FREE: https://www.patreon.com/posts/rest-api-source-130599482?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Github Gist: https://gist.github.com/codewithsadee/e60ef18142d09b2f8ca5ae991452a3bb

✨ KEY FEATURES YOU'LL SEE:
Clean, Modern UI built with TailwindCSS
Full CRUD functionality for blog posts
Secure User Authentication (Login/Signup)
Type-safe code with TypeScript
Responsive design for mobile and desktop

🚀 TECH STACK USED:
Frontend: React (with Vite)
Language: TypeScript
Styling: TailwindCSS

⏱️ TIMESTAMPS:
0:00 - Introduction
3:07 - Project overview
10:32 - Initial Setup
20:13 - Login
48:30 - Signup
1:17:36 - Root layout
1:19:54 - Loading
1:23:08 - Header
1:54:30 - User settings
2:30:00 - Footer
2:35:55 - Home
3:14:47 - All blogs
3:19:51 - Blog detail
3:40:32 - Admin layout
4:21:08 - Dashboard (blog create, edit, delete) & user management
7:23:58 - Deployment

Thanks for watching! If you found this video helpful, please give it a thumbs up, subscribe for more content, and let me know in the comments what you think of this project or what I should build next!

How To Build Your Own SaaS App: A Link Shortener Platform | NodeJS, MongoDB, ExpressJS

Sadee — Wed, 17 Sep 2025 12:33:14 +0000

Have you ever wondered what goes into building a robust, production-ready backend application? This article gives you a sneak peek into the architecture of Shortly API, a feature-rich URL shortening service. We built this project to demonstrate best practices in modern backend development, using a powerful combination of Node.js, Express, MongoDB and TypeScript.

This project goes beyond just a simple URL shortener. We’ve focused on implementing essential features you'll find in real-world applications:

Comprehensive Authentication & Authorization: The API includes a full authentication system for user registration and login, powered by JSON Web Tokens (JWT) for secure access. It also features a robust authorization middleware to manage different user roles.
Secure Password Management: User passwords are not stored in plaintext. They are salted and hashed using bcrypt for enhanced security.
Email Notifications: The application integrates with Nodemailer to handle critical functions like sending password reset links to users.
Advanced Link Management: Users can create custom short links, manage their links (update or delete), and view a list of all their short URLs with visit counts. The API also handles redirects to the original destination URL.
Middleware-Driven Security: Key middleware like helmet secures HTTP headers, express-rate-limit prevents abuse, and custom validation middleware ensures data integrity on all endpoints.
Efficient Database Operations: The API connects to a MongoDB database using Mongoose to manage user and link data. Database connections are handled gracefully, and queries are optimized using methods like .lean() to improve performance.

If you are looking to build a scalable and secure backend, this project is the perfect starting point. The code is well-structured, easy to understand, and follows the principles of clean architecture.

Stay tuned for the full tutorial, where we will dive into each component and guide you through building this project from the ground up!

Essential link
Source code: https://www.patreon.com/posts/exclusive-source-139095423?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Source code 2: https://buymeacoffee.com/codewithsadee/e/458261

How to Build & Deploy REST API with NodeJS + JWT + MongoDB

Sadee — Tue, 03 Jun 2025 15:37:37 +0000

Build & Deploy a Production-Ready Blog REST API | TypeScript, JWT Auth, MongoDB, ExpressJS, Hostinger VPS, BetterStack, Logtail

Use my Link to Buy affordable Hosting from Hostinger: https://www.hostg.xyz/SHHVg
Use my Coupon code and get additional 10% Discount: CODEWITHSADEE

Learn how to build and deploy a fully production-ready Blog REST API using Node.js, Express, and TypeScript – with full authentication, logging, and real-time monitoring.

In this step-by-step tutorial, you'll create a scalable API with:
✅ JWT Access & Refresh Token Authentication (Secure with HttpOnly Cookies)
✅ CRUD Operations for Blog Posts with SEO-friendly slugs
✅ User Management (Update profile, delete account)
✅ Pagination, Filtering, and Search functionality
✅ Express validation, global error handling & REST best practices

You’ll also learn how to:
🚀 Deploy the API on a Hostinger VPS using SSH, PM2, and Nginx
📡 Set up BetterStack for real-time uptime monitoring and API documentation
📊 Integrate Logtail for structured, developer-friendly logging

This is not just a simple tutorial, it's a complete API boilerplate ready for production deployment.

Perfect for backend developers looking to master scalable REST API design with real-world tools and practices.

Essential link:
Blog api docs page: https://docs.blog-api.codewithsadee.com/
Source code: https://www.patreon.com/posts/rest-api-source-130599482?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Buymeacoffee: buymeacoffee.com/codewithsadee/e/417244

Timestamps:
00:00 Intro
03:21 Project demo
21:55 Project initial
49:12 Root route
52:17 Handle server shutdown
54:02 Setup MongoDB
1:05:15 Setup winston for logging
1:16:40 Register
2:04:08 Login
2:29:53 Logout
2:47:29 Get current user
2:59:29 Update current user
3:13:28 Delete current user
3:20:47 Get all user
3:31:22 Get user by id
3:35:37 Delete user by id
3:39:00 Create a blog
4:26:11 Get all blogs
4:34:21 Get blogs by user
4:38:51 Get blog by slugs
4:45:40 Update blog
4:58:01 Delete a blog
5:11:00 Like a blog
5:24:46 Unlike a blog
5:30:20 Create a comment
5:41:56 Get comments by blog
5:46:21 Delete a comment
5:55:00 Setup Hostinger for API hosting
6:10:26 Domain configuration
6:11:26 Setup Nginx
6:16:37 SSL certificate
6:20:17 Setup BetterStack for API monitoring
6:23:50 Setup Logtail for API logging
6:33:57 Setup GitBook for API documentation

Don’t forget to Like, Subscribe, and turn on notifications for more advanced full-stack tutorials every month!

🌎 Follow Me for More:
► X: https://x.com/codewithsadee_
► GitHub: https://github.com/codewithsadee
► Instagram: https://instagram.com/codewithsadee
► LinkedIn: https://linkedin.com/in/codewithsadee

How to build AI-Powered SaaS Platform with React, ShadCN, Appwrite & Clerk

Sadee — Fri, 21 Feb 2025 13:42:36 +0000

🚀 Build and Deploy The ULTIMATE AI-Powered Task Management App! 🚀

In this tutorial, we’ll walk through the complete process of building and deploying an advanced AI-powered task management app using React, ShadCN, Appwrite, and Clerk. This project is perfect for those looking to create a modern, feature-rich task manager with AI-driven task suggestions, authentication, real-time data management, and a sleek UI.
Buymeacoffee:

🌟 What You’ll Learn in This Video:
✅ Setting up React & ShadCN – Create a modern and aesthetic UI using ShadCN components.
✅ Managing authentication with Clerk – Secure user authentication with seamless sign-up and login flows.
✅ Using Appwrite for backend services – Store, retrieve, and manage user data efficiently.
✅ Integrating AI-powered task generation – Let AI assist users in organizing their tasks.
✅ Deploying the application – Make your app live and accessible to users worldwide.

Whether you’re a beginner looking to level up or an experienced developer wanting to explore AI and modern web stacks, this tutorial is for you!

🛠 Tech Stack Used:
ReactJS: https://react.dev/
TailwindCSS: https://tailwindcss.com/
Appwrite: https://appwrite.io/
Gemini API: https://ai.google.dev/
Clerk: https://clerk.com/
Typescript: https://www.typescriptlang.org/

💡 Who is This Tutorial For?
This tutorial is great for:
✔️ Developers who want to build real-world applications
✔️ Anyone interested in integrating AI features into web apps
✔️ React enthusiasts looking to level up their full-stack skills
✔️ Those curious about Appwrite, Clerk, and ShadCN

🎯 By the End of This Tutorial, You Will Be Able To:
► Build a full-stack AI-powered task management app 🚀
► Implement secure authentication with Clerk 🔐
► Store and manage data using Appwrite 📊
► Integrate AI-powered task suggestions 🤖
► Deploy a production-ready application 💻

💬 Drop a comment if you have any questions! I’d love to hear your thoughts. 🙌

📌 Useful Links & Resources:
GitHub Gist: https://gist.github.com/codewithsadee/ad0431e9b6cbd073c70473a46d84e6c9
Project assets: https://drive.google.com/file/d/1yqdAy_undGqPxSsJb-JdT4MB3X_SZ5tf/view?usp=drive_link

📌 Source code:
Patreon: https://www.patreon.com/posts/tasky-ai-ai-to-122773813?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link

Build & Deploy a Stunning SaaS Landing Page with React & Tailwind

Sadee — Sat, 07 Dec 2024 14:26:22 +0000

🚀 Build & Deploy a Stunning SaaS Landing Page from Scratch!

In this step-by-step tutorial, you'll learn how to create a sleek, modern, and fully responsive SaaS app landing page using some of the most powerful tools in web development:
🔹 React – For a fast, component-based UI.
🔹 Tailwind CSS – To build beautiful, responsive designs quickly.
🔹 TypeScript – For type-safe, maintainable code.
🔹 ShadCN – To accelerate the UI component development process.
🔹 Framer Motion – For smooth animations and motion effects.

This video covers everything from design to deployment, so by the end, you'll have a live, production-ready SaaS landing page that looks and feels professional. Perfect for developers of all skill levels looking to level up their web development skills.

🔥 What You'll Learn:

Setting up the project with React & TypeScript
Designing a modern UI with Tailwind CSS
Building reusable components with ShadCN
Adding smooth animations with Framer Motion
Deploying the SaaS landing page live

🚀 Recommended courses for this project
🔹 React – https://scrimba.com/learn-react-c0e?via=codewithsadee
🔹 Tailwind CSS – https://scrimba.com/learn-tailwind-css-c010?via=codewithsadee
🔹 TypeScript – https://scrimba.com/learn-typescript-c03c?via=codewithsadee
Use these links to get 20% off Scrimba Pro membership

💡 Who is this video for?
Whether you're a beginner looking to sharpen your React skills or an experienced developer building a portfolio project, this tutorial has something for you!

Get access to the complete source code on my Patreon and join a community of 14K developers! 🚀

✨ Resources & Code:
GitHub gist: https://gist.github.com/codewithsadee/894b29e7090843d7183c344758fc43d4
Public Assets: https://drive.google.com/file/d/1VJBPXGCrU3T6uzHDst4mM7-mi_fCmeVz/view?usp=sharing
Source code: https://www.patreon.com/posts/get-complete-for-117493985?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Source code: https://buymeacoffee.com/codewithsadee/e/341982

🔔 follow me for more tutorials on React, Tailwind, TypeScript, and more!

📢 Stay Connected:
Follow me for more coding tips, project ideas, and behind-the-scenes content!

⌚ Timestamp
0:00 - Introduction
0:50 - Project overview
4:30 - Project initials
17:19 - Header
56:01 - Hero section
1:29:22 - Brand section
1:36:22 - Freature section
2:02:35 - Process section
2:14:14 - Overview section
2:27:55 - Review section
2:36:45 - Blog section
2:49:39 - CTA section
2:59:50 - Footer
3:09:15 - Deploy the project

Don't forget to LIKE, COMMENT, and SHARE this video if you find it helpful. Let's build something awesome together! 💻✨

How to Build AI Chat App Using React, Tailwind and Framer motion

Sadee — Mon, 18 Nov 2024 13:23:09 +0000

🚀 Ready to Build Something Incredible?
In this step-by-step tutorial, we’re diving into the world of AI-powered applications! Watch as we build an intelligent, responsive, and visually stunning AI Chat App using React, TailwindCSS, and Appwrite for seamless data handling.

💡 What You'll Learn:

How to set up React for your chat app
Using TailwindCSS to create a sleek, modern UI
Integrating Appwrite for backend data storage
Build a seamless Login & Register system.
Implement a feature to reset forgotten passwords with ease.
Connecting AI to make your chat app smarter

🔥 Why Watch?
Whether you’re a beginner or an experienced developer, this video will show you how to harness the power of AI and cutting-edge tools to create an app that will leave users amazed!

✨ Resources & Code:
GitHub gist
Public Assets
Source code
Source code

🔗 Tools We’ll Use:
ReactJS: https://react.dev/
TailwindCSS: https://tailwindcss.com/
Appwrite: https://appwrite.io/
Gemini: https://ai.google.dev/
Framer motion: https://motion.dev/

⌚ TIMESTEMP
0:00 - Introduction
1:14 - Project overview
13:17 - Porject initial
21:48 - Register
1:58:59 - Login
2:11:57 - Reset password
2:28:27 - Home
4:11:35 - Setup & Gemini integration
4:17:49 - Setup appwrite database
4:19:18 - Storing document in appwrite
4:23:11 - Get AI response based on user prompt & store in database
4:38:31 - Conversation detail
5:43:15 - Propmpt preloader
5:56:05 - Delete conversation
6:12:04 - Working with react error boundery
6:20:19 - Project deployment

📩 Have Questions? Drop them in the comments below!