NextJs Tutorial - Build a Full-Stack Blog App w/ TypeScript, Tailwind, Neobrutalism-inspired

preview_player
Показать описание
We are building a full-stack blog application. The app will allow users to create and publish blog posts, browse posts by category, and let users stay-up-to-date through a newsletter subscription. We will also implement user authentication using NextAuth. The app will have a clean and minimalistic design, inspired by neobrutalism in web style.

🎨Link to Illustration:

🛤️Host your DB on Railway:

✉️Sign up for my newsletter:

👾Join my Discord:

✍️Full-Stack Roadmap:

🌐GitHub URL:

🔥Firebase:

⚛️*More on React:

☕Support the channel:

🧑‍🚀AI Chatbot for your website:

00:00 - Intro & Demo

01:33 - Project Architecture

04:30 - Project Setup

06:25 - Header

11:00 - Hero Section

22:02 - Setting up DB

28:00 - DB operations

42:36 - Create a Blog Page

52:00 - Setup up Auth with Github

01:08:08 - Client & Server Components

01:14:22 - Form to Submit a New Blog

01:20:05 - Server Actions

01:41:00 - Upload Images

01:50:01 - Browse All Blogs

02:00:28 - Filter by Category

02:09:47 - Newsletter Subscribe

02:33:31 - Footer

02:44:34 - Deployment

02:50:00 - Outro
  1. webdecoded
  2. nextjs
  3. fullstack
  4. webdecoded
Рекомендации по теме
Next js Tutorial 1:02:55

Next js Tutorial for Beginners | Nextjs 13 (App Router) with TypeScript

Next.js in 100 0:11:52

Next.js in 100 Seconds // Plus Full Beginner's Tutorial

Next.js 15 Crash 5:23:11

Next.js 15 Crash Course | Build and Deploy a Production-Ready Full Stack App

NextJS Tutorial - 0:44:38

NextJS Tutorial - All 12 Concepts You Need to Know

Code a Personal 0:23:16

Code a Personal Blog with Next.JS and Markdown | NextJS 15 Beginner Project

NextJS Beginner Project 0:33:27

NextJS Beginner Project Tutorial - Learn NextJS 13 With This Easy Project

Next.js Full Course 7:03:58

Next.js Full Course for Beginners | Nextjs 13 Tutorial | 7 Hours

Next.js Full Website 5:35:55

Next.js Full Website Tutorial Course - with Prismic, Tailwind, and TypeScript

Build a Full 1:55:19

Build a Full Stack AI Chatbot with Next.js 15 and xAI API (2024)

NextJs Portfolio Tutorial 2:20:11

NextJs Portfolio Tutorial - Build a Responsive Portfolio Website w/ Advanced Animations (2023)

From 0 to 3:03:12

From 0 to Production - The Modern React Tutorial (RSCs, Next.js, Shadui, Drizzle, TS and more)

The Most Efficient 2:53:01

The Most Efficient Next.JS 14 Beginner Tutorial (TypeScript, App Router, React Server Components)

Next.js Full Tutorial 3:05:47

Next.js Full Tutorial for Beginners | Next.js 13 Full Stack App Using App Router

Next.js 14 Tutorial: 3:02:00

Next.js 14 Tutorial: Building a Sports Web App with TypeScript and Tailwind CSS

Build a Modern 3:28:27

Build a Modern Real Estate React.js App | Next.js Website Tutorial

Next.js School Management 3:54:44

Next.js School Management Dashboard UI Design Tutorial | React Next.js Responsive Admin Dashboard

Personal Website Tutorial 2:05:36

Personal Website Tutorial with Next.js 13, Sanity.io, TailwindCSS, and TypeScript

React and Next.js 2:13:52

React and Next.js Tutorial - Build A Pokemon Application

Full-Stack Blog App 4:05:53

Full-Stack Blog App Tutorial | Next.js MongoDB Blog App Project Full Course

Next.js 13 Crash 0:14:44

Next.js 13 Crash Course Tutorial #1 - Introduction & New Features

Learn the Next.JS 0:00:37

Learn the Next.JS 13 App Router Fast With This One Tutorial 🏎️

Next.js Tutorial for 3:25:42

Next.js Tutorial for Beginners (User CRUD App)

Next.js Crash Course 3:14:17

Next.js Crash Course for Beginners - Learn NextJS from Scratch in this 100% Free Tutorial!

NextJS 13 Tutorial: 0:53:38

NextJS 13 Tutorial: Create a Static Blog from Markdown Files

Комментарии
Автор

Another great tutorial! Thanks Judy :)

hqasmei
Автор

Thanks for the tutorial but how these files appear suddenly? 01:50:01 - Browse All Blogs

SuperSpawn
Автор

Great video! Any plans for a Next.js inventory management tutorial? Your tutorials are fantastic, and I'd love to see one on this topic!

Yahya_Umar
Автор

Where did you find the prisma.ts file contents? I need link!

sayyedsaad
Автор

If this does not have an external CMS (like Sanity, strapi, etc) and is pretty much a basic custom blog, then thank goodness. Its harder to find these types of tutorials, due to tutorials using CMS's like the one's mentioned.

I wonder why this is the case though, do people make tutorials using CMS's like that because its faster and easier, or is there a security buff when you use an external CMS like the ones above? My personal paranoia and insecurity with CMS's is that they can just shut down in a decade, like forestry CMS did.

Rahman.Shahadat
Автор

getting an issue in signin in github, can someone helpout

AryanSharma-dcbj
Автор

I LIKE .. saludos dsd Venezuela .. 🪂🪂🛸🛸

agustinoVzla
Автор

Can u please give me tips how to develop css skills ui skills please

VIJAY-hgei
Автор

Gorgeous! And the Blog doesn't look bad either! Okay, I'm out.

iixcryx