Build and Deploy a Complete Responsive React Portfolio Website

Build a Responsive React Portfolio Website | Tailwind, Framer-Motion, & React Hook Form

In this tutorial, we will build and deploy a complete Responsive React Portfolio Website. We will be using React, Tailwind CSS, Framer Motion and React Hook Form with Form Submit to build this fully build application.

Chapters:
0:00 Building this complete React Portfolio App from Scratch
1:54 Package Installations and Setup
8:46 Tailwind Installation and Setup
19:09 Navbar and Navigation
55:12 Landing Page
1:27:28 Skills Page
1:43:04 Projects Page
2:00:49 Testimonials Page
2:11:07 Contact Page
2:33:22 Footer Page
2:36:34 Deploying App to Vercel
2:39:15 Finished Complete Built and Deployed React Portfolio App

Tailwind Css: https://tailwindcss.com/docs/installation 
Form Submit: https://formsubmit.co/ 
React Anchor Link Smooth Scroll: https://github.com/mauricevancooten/react-anchor-link-smooth-scroll 
Framer Motion: https://www.framer.com/docs/ 
Google Fonts: https://fonts.google.com/ 

Code
completed code: https://github.com/ed-roh/react-portfolio 
location of image assets (you'll have to download the entire repo to get the images): https://github.com/ed-roh/react-portfolio/tree/master/public/assets 

Subscribe: https://www.youtube.com/@EdRohDev/featured 

#react #tailwind #reacthooks 

Build a Full Stack Spotify Clone with Next 13.4, React, Tailwind, Supabase, PostgreSQL, and Stripe

Full Stack Spotify Clone: Next 13.4, React, Stripe, Supabase, PostgreSQL, Tailwind 

Build a Full Stack Spotify Clone with Next 13.4, React, Tailwind, Supabase, PostgreSQL, and Stripe! In this comprehensive tutorial, you'll learn how to develop a complete music streaming application from scratch, replicating the popular features and functionalities of Spotify.

Using the power of Next.js 13.4 and React, you'll create a responsive and dynamic user interface that closely resembles Spotify's sleek design. Harnessing the flexibility of Tailwind CSS, you'll style your application with ease and achieve a visually stunning result.

To handle the backend, you'll utilize Supabase, an open-source Firebase alternative built on top of PostgreSQL. You'll learn how to set up your Supabase project, create database schemas, and implement authentication, ensuring secure user registration and login processes.

Additionally, you'll integrate Stripe, a leading payment processing platform, to enable premium subscriptions within your Spotify clone. Discover how to handle transactions, securely manage user billing information, and provide a seamless payment experience.

Whether you're a beginner or an experienced developer, this tutorial will guide you through every step, explaining concepts along the way and empowering you to build scalable and production-ready applications. Join us on this exciting journey of creating a Full Stack Spotify Clone in 2023!

Key Features:

- Song upload
- Stripe integration
- Supabase and PostgreSQL Database handling
- Tailwind design for sleek UI
- Tailwind animations and transition effects
- Full responsiveness for all devices
- Credential authentication with Supabase
- Github authentication integration
- File and image upload using Supabase storage
- Client form validation and handling using react-hook-form
- Server error handling with react-toast
- Play song audio
- Favorites system
- Playlists / Liked songs system
- Advanced Player component
- Stripe recurring payment integration
- How to write POST, GET, and DELETE routes in route handlers (app/api)
- How to fetch data in server React components by directly accessing the database (WITHOUT API! like Magic!)
- Handling relations between Server and Child components in a real-time environment
- Cancelling Stripe subscriptions

Whether you're an experienced developer looking to expand your skillset or a beginner eager to learn the latest web development technologies, this tutorial has something for everyone. Join us on this exciting journey and take your web development skills to new heights!

Timestamps
00:00 Intro
02:05 Environment setup
09:47 Layout
56:21 Supabase setup
01:18:01 Supabase Types
01:23:29 Providers for auth and supabase
01:48:17 Authentication modal and functionality
02:24:41 Upload modal and functionality
02:56:33 Songs fetching and list display
03:41:34 Favorites functionality
04:03:09 Player functionality
04:53:19 Stripe integration
05:58:10 Subscribe modal and account page
06:37:57 Deployment

Discord for any problems/errors/bugs: https://discord.gg/v2kNnzRt33 
Github Repository: https://github.com/AntonioErdeljac/next13-spotify 
Supabase: https://supabase.com/ 
Stripe: https://stripe.com/ 

Subscribe: https://www.youtube.com/@codewithantonio/featured 

#nextjs #reactjs #javascript #postgresql #stripe #tailwind 

Build a Real-Time Messenger Replica with Next.js 13, React, Tailwind and MongoDB

Real-Time Messenger Clone: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher

Master the art of building a real-time Messenger clone using the latest web development technologies. In this comprehensive tutorial, we'll walk you through the process of creating a fully-functional and visually stunning chat application that rivals the best in the industry.

Key Features:

- Real-time messaging using Pusher
- Message notifications and alerts
- Tailwind design for sleek UI
- Tailwind animations and transition effects
- Full responsiveness for all devices
- Credential authentication with NextAuth
- Google authentication integration
- Github authentication integration
- File and image upload using Cloudinary CDN
- Client form validation and handling using react-hook-form
- Server error handling with react-toast
- Message read receipts
- Online/offline user status
- Group chats and one-on-one messaging
- Message attachments and file sharing
- User profile customization and settings
- How to write POST, GET, and DELETE routes in route handlers (app/api)
- How to fetch data in server React components by directly accessing the database (WITHOUT API! like Magic!)
- Handling relations between Server and Child components in a real-time environment
- Creating and managing chat rooms and channels

Whether you're an experienced developer looking to expand your skillset or a beginner eager to learn the latest web development technologies, this tutorial has something for everyone. Join us on this exciting journey and take your web development skills to new heights!

Timestamps
00:00 Intro
02:16 Environment setup
08:18 Auth Setup
15:30 Auth UI
58:53 MongoDB, Prisma setup
01:17:54 NextAuth Setup
01:32:20 Register Functionality
01:40:23 Login Functionality and Social Login (Google and Github)
01:57:42 Sidebar, Navigation and Layout
02:58:39 Users screen and Conversations screen, Conversation Creation
04:12:34 Messages creation, Message Image upload
05:29:12 Profile Drawer
06:01:20 Settings functionality, Modal component
06:53:39 Group chat functionality, Image Modal, Loading states
07:43:15 Real time messages, conversations, read receipts and active status with Pusher
08:44:03 Deploy to Vercel, fix Google and Github social sign in in deployment

Github Repository: https://github.com/AntonioErdeljac/next13-messenger 
Cloudinary: https://cloudinary.com/ 
Pusher: https://pusher.com/ 
Mongo Atlas: https://mongodb.com/atlas/ 
Google Developer Platform: https://console.cloud.google.com/ 

Subscribe: https://www.youtube.com/@codewithantonio/featured 

#nextjs #react #prisma #tailwind #mongodb   

Build a Full Airbnb Clone with The Next.js 13 App Router

Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth

In this video, we will put a special emphasis on the Next.js 13 App Router, which is the latest addition to the Next.js framework.

The Next.js 13 App Router is a powerful tool that enables you to easily create complex client-side routing in your Next.js applications. In this tutorial, we will use the Next.js 13 App Router to build a fully functional Airbnb clone with seamless navigation and user experience.

Throughout this video, we will guide you step-by-step through the process of building a full-stack web application using the latest web development technologies including React, Tailwind, Prisma, MongoDB, and NextAuth.

This video is perfect for beginner and experienced developers who are looking to learn how to leverage the power of Next.js 13 App Router in their web applications. So, grab your coffee and join us on this exciting journey of building the next big thing in 2023 with Next.js 13 App Router!

Timestamps
00:00 Intro
02:21 Environment setup
09:30 Navbar UI
34:30 Auth UI
01:35:20 Register functionality, MongoDB, Prisma setup
02:09:27 Login functionality
02:28:04 Social Login (Google and Github)
02:44:36 Categories UI
03:11:34 Listing creation step 1 (Category selection)
03:37:43 Listing creation step 2 (Location selection, Map component, Country autocomplete)
04:06:40 Listing creation step 3 (Counter components)
04:17:10 Listing creation step 4 (Image upload, Cloudinary CDN)
04:32:35 Listing creation step 5 (Description and Price, Listing creation POST route)
04:49:00 Fetching listings with server components (Listing card component, direct server action)
05:23:12 Favoriting functionality
05:39:27 Individual Listing View
06:16:57 Listing reservation component
06:42:33 Reservation functionality (routes, logic)
06:55:05 Trips screen (Loading trips with server component)
07:10:59 Reservations screen (Loading guest reservations with server component)
07:33:13 Favorites screen (Loading favorites with server component)
07:42:35 Properties screen (Loading your listings with server component)
07:53:39 Filters modal (Assigning various filters, add advanced querying logic to getListings, add loading and error pages)
08:37:48 Vercel deploy & wrap up

Github Repository: https://github.com/AntonioErdeljac/next13-airbnb-clone 
Cloudinary: https://cloudinary.com/ 

Subscribe: https://www.youtube.com/@codewithantonio/featured 

#nextjs #react #tailwind #prisma #mongodb 

How to Install Tailwind CSS and Set Up a Tailwind Project

In this video, I'm going to teach how to install Tailwind CSS and set up a Tailwind project for learning. Tailwind CLI will be used to set up a Tailwind Project easily.

Resource
- Finished Files on GitHub - https://github.com/phithounsavanh/Tailwind-starter 

Subscribe: https://www.youtube.com/@Devtamin/featured 

#tailwind #tailwindcss 

How to use Tailwind UI and React with Deno

Deno Tailwind UI React example

I built this example application to show how you can use Tailwind UI and React with Deno.

The navigation bar is from Tailwind UI's preview components list. I updated it to use NavLinks from React Router. For the body of each page, I just have it display the name of the page just to demonstrate that the react router works.

Install

You will need to install packup and twd.

deno run -A https://deno.land/x/packup@v0.0.15/install.ts
deno install --allow-read=. --allow-write=. --allow-net=deno.land,esm.sh,cdn.esm.sh -fq https://deno.land/x/twd@v0.4.8/cli.ts

Development

The twd cli tool will update the style.css file as you make changes to your application.

twd -w index.html -o css/style.css

The packup cli tool will handle hot reloading of the application during development.

packup index.html

For classes to be included in the styles.css, you must use the tw template string around the className.

import { React, tw } from "./deps.ts";

export const Example = () => (
  <h2 className={tw`bg-gray-800`}>
    Example
  <h2>
);

Build

If you have not used the twd cli tool yet, you will need to do so to generate the style.css file for your build.

twd index.html -o css/style.css

The packup cli tool will handle generating a distribution of the application.

packup build index.html

Download Details:

Author: KyleJune
Download Link: Download The Source Code
Official Website: https://github.com/KyleJune/deno-tailwind-ui-react-example

#react #tailwind #deno #tailwindcss

Building Intercom's Messenger UI with Tailwind CSS

In this tailwind css tutorial, Peter Meehan and I rebuild Intercom’s messenger UI from scratch with Tailwind CSS using Tailwind Play

#css #tailwindcss #tailwind

How to Build Amazon 2.0 using JavaScript, Tailwind CSS and Firebase

In this video Naz and Jessy will show you how to build the redesigned version of Amazon using JavaScript, Tailwind and Firebase. Make sure to watch the whole entire video as these are the basics companies looking for.

GitHub: https://github.com/CleverProgrammers/amazon-clone-two 

#javascript #webdeveloper #tailwind #tailwindcss #firebase 

Building Intercom's Inbox UI with Tailwind CSS

In this tailwind css tutorial, Peter Meehan rebuilds Intercom’s inbox UI from scratch with Tailwind CSS while explaining css and tailwind utility class fundamentals.

#tailwind #css #tailwindcss

How to use Tailwind opacity utility classes Like a pro

In this article you will learn about: How to use Tailwind's opacity utility classes Like a pro
#tailwind 

PostCSS and Tailwind Troubleshooting Guide in Next.js Like a pro

While setting up a new Next.js project with Tailwind I ran into an issue. This issue might just be a temporary issue due to configuration problems and libraries versions, but I’m writing this in case someone stumbles on it.

#tailwind #next 
 

Tailwind Guide to Vertical Centering Like a pro

Tailwind's Guide to Vertical Centering Like a pro
#tailwind 

Tutorial on Building Vue.js Components With Tailwind in Laravel

Let's take our experiments installing Tailwind CSS and building a nav with it to the next level. Today, we're going to be building a simple todo app with Vue.js, Laravel, and Tailwind.

#laravel #vue #tailwind 

How to Set Up Tailwind in A Laravel Project Like A Pro

Tailwind is the new CSS utility framework on the block, and it's quickly become my favorite way to build an interface. Oftentimes, the hardest part of trying out a new framework, package, or language is getting set up.
#tailwind #laravel 

Release Of Django-Tailwind V2.2 Is Out

Today I'm officially announcing the release of Django-Tailwind v2.2. It was soft-launched last week, and since I haven't got any complaints, I think I'm good to let you all know about the release.

The current update adds improved support for the latest 2.2 version of the Tailwind CSS framework.

So if you already have Django-Tailwind set up with the previous configuration and want to use Tailwind CSS v2.2 with it, you might want to follow the upgrade steps below.

#django #tailwind