Full Stack Twitter Prototype With Next.js
Build And Deploy a Social Media App with NextJS, PostgreSQL, TailwindCSS, Vercel
What you'll learn
- How to use NextJS to build a simple social media app
- How to create modular React components
- How to work with TypeScript
- How to work with PostgreSQL
- How to work with pg, a low level database driver for NodeJS
- How to secure the app with json web token authentication (JWT)
- How to implement simple role based authorization logic
- How to create, deploy, and secure cron jobs using Vercel Cron
- How to run scripts locally and on production
- How to deploy the app to Vercel
- How to style the app with TailwindCSS
- How to use SWR for data fetching and mutations
- How to use Postman to test an API
- How to use NextJS route groups to organize routes
- How to use Git and GitHub for source control
Course Content
- Intro05:53
- Install02:30
- Discovery01:30
- Resources
Requirements
- No programming experience is needed, but some is recommended
- Basic knowledge of HTML, CSS, JavaScript, Git, and SQL is recommended
- Basic computer skills, familiarity with VSCode and Command Line
Description
Drawing inspiration from Meta's recent unveiling of Threads, this comprehensive course is meticulously crafted to empower students with the skills and knowledge needed to construct their very own Twitter Clone. Learn just enough Next.js, PostgreSQL, TailwindCSS, and Vercel to get a Full Stack App up and running, and shipped to the cloud
In the ever-evolving landscape of the tech industry, the demand for Full Stack Developers is at an all-time high. These technical polymaths excel in Front End Development, Back End Development, and DevOps, often spearheading entire feature sets and projects from inception to deployment. Their versatility renders them indispensable assets, equally sought after by startups and corporate giants alike.
Upon completing this transformative course, you will have successfully conceptualized, constructed, and deployed a fully functional web app to the cloud. Armed with this foundational knowledge, you'll possess the competence to delve into more advanced domains of study, setting the stage for a highly lucrative and fulfilling career in the ever-expanding tech sector.
Delve into this immersive learning experience structured as a step-by-step tutorial series. Seamlessly follow along on your computer as you unlock the secrets of web development. Beyond the lines of code, each tutorial will unravel the underlying thought processes, providing you with not only the "how" but also the essential "why" behind every strategic decision.
This course is ideally suited for students possessing a foundational understanding of programming. However, even if you lack prior programming experience, your innate technical aptitude will be nurtured through our meticulously crafted tutorials, allowing you to seamlessly engage with the content and thrive in your learning journey.
This course was initially designed using Next.js 13, but it seamlessly accommodates version 14 as well.
IMPORTANT! Please review the curriculum and course details before purchasing the course to ensure it aligns with your learning goals.
Curriculum
- Introduction: An initial section covering tool installation, project requirements discussion, and an overview of the course.
- Design: Dive into the design phase, including the review of mockups, API design, and database schema.
- Setup: Explore the project's initialization, code deployment to GitHub, and deploying the skeleton app.
- Home Page: A concise section on building the home page.
- Database Development: Develop the initial database schema and script for loading fake data during the development phase.
- Sign In Page: Construct the sign-in page, focusing on the API endpoint, sign-in form, and utilizing jose for JWT token authentication.
- Sign Up Page: Build the sign-up page, covering the API endpoint, sign-up form, and production database setup.
- Authentication and Private Layout: Learn to protect various pages with authentication, covering middleware, SWR for client-side data fetching, and displaying avatar images.
- Feed Page: Construct the feed page and display a list of posts.
- Profile Page: Build the profile page, where users manage their posts, including SWR Mutate for refreshing UI with the latest data.
- Following Page and Followers Page: Develop the following and followers pages, including API endpoint creation and UI development.
- Account Page: Build the account page and logout endpoint.
- User Page: Construct the user page, the view that other users see when visiting a user's profile. Includes API endpoint and UI development.
- Search Bar: Create the search bar, covering lodash debounce, displaying search results, and handling click outside to close the results.
- Edit Post Page: Develop the edit post page.
- Authorization and Cron Jobs: Build a cron job, suitable for Vercel Cron Job, and learn how to authorize the cron job trigger.
- Extras: A brief section covering server components, minor topics like light mode and dark mode, a lecture on uploading avatars with Vercel Blob, and a video on upgrading to Next.js 14.
Course Details
- This course is not an exhaustive exploration of every feature within Next.js, but this course does provide a pragmatic tutorial of building a Full Stack App.
- This course does not cover server components in detail, but it does cover client components using the traditional Back End API + Front End SPA architecture.
- The style of this course does not involve a lot of lecturing about concepts, but it does revolve around following along as the instructor codes. Students are encouraged to research any areas of interest.
- This course does not aim for comprehensive mastery of the web framework, but it does prioritize practical application and learning just enough of the full stack to accomplish the goal of building a functional app.
- This is not an advanced or expert-level developer course, but it is tailored for the beginner to intermediate audience with some web development experience.
Who this course is for
- Beginner and intermediate developers looking to learn Full Stack Development with NextJS
- Anyone wishing to learn how to build a web app using modern web technologies
Full Stack Twitter Prototype With Next.js
Section 1: Introduction
- 05:53
- 02:30
- 01:30
Section 2: Design
- 1.Excalidraw04:27
- 2.Design Ui Mockup03:14
- 3.Design Api08:31
- 4.Design Database08:58
Section 3: Setup
- 1.Git Bash01:26
- 3.Ssh Key Github04:44
- 6.Source Code03:42
Section 4: Home Page
- 1.Home Page Fe13:09
- 2.Home Page Deploy02:11
Section 5: Database Development
- 1.Initial Migration16:15
- 3.Db Connection09:11
- 4.Load Fake Users06:58
- 5.Load Fake Posts07:12
- 6.Load Fake Follows04:38
- 7.Bcrypt07:13
- 8.Load Admin User08:20
- 10.Check In Code00:35
Section 6: Signin Page
- 1.Signin Page Intro00:34
- 2.Install Jose00:29
- 3.Login Endpoint07:37
- 6.Test With Postman07:39
- 9.Testing The Form02:19
- 11.Check In Code00:40
Section 7: Signup Page
- 1.Signup Endpoint06:45
- 3.Sign Up Page10:10
- 4.Check In Sign Up00:22
- 8.Env Example File02:01
Section 8: Authentication And Private Layout
- 1.Private Layout04:55
- 2.Jwt Verification09:44
- 3.Reset Db02:51
- 4.Auth Middleware06:51
- 6.Swr Fetcher07:03
- 7.Refactor Fetcher04:25
Section 9: Feed Page
- 1.Feed Page Intro04:59
- 3.Feed Endpoint04:02
- 5.Fix The 500 Error01:35
- 6.Check In Code01:10
- 8.Post Component08:39
Section 10: Profile Page
- 3.Get Post Endpoint05:13
- 8.Create Post Form09:26
Section 11: Following And Followers Page
- 2.Following Page Ui09:50
- 4.Followers Page Ui02:49
Section 12: Account Page
- 2.Logout Endpoint02:13
- 3.Account Page Ui06:30
Section 13: User Page
- 1.User Page Intro01:42
- 7.User Page Stub01:58
- 8.User Page Header14:59
Section 14: Search Bar
- 1.Search Bar Intro00:43
- 4.Search Bar Stub01:16
- 6.Lodash Debounce04:48
Section 15: Edit Post Page
- 2.Edit Post Page10:33
- 8.Testing Prod Site01:03
Section 16: Authorization And Cron Jobs
Section 17: Extras
- 1.Server Components06:10
Section 18: Conclusion
- 1.Conclusion00:28