Full Stack Twitter Prototype With Next.js from Udemy

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.

What's inside

Learning objectives

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
Show more
Show less

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
Show more
Show less

Syllabus

Introduction

Install Tools and Technologies

Discovery

Resources

Design

Excalidraw

Design the UI Mock Up

Design the API Routes

Design the Database Schema

Install NodeJS, VSCode, Thunder Client, SQLTools, PostgreSQL

Windows Users: Set Up Git Bash

Initialize NextJS Project

Create and add SSH Key to GitHub

Push Project Repo to GitHub

Deploy Project to Vercel

Source Code

Home Page

Deploy Home Page

Database Development

Create Initial SQL Migration

SQL and TypeScript Intro

Establish DB Connection

Load Fake Users

Load Fake Posts

Load Fake Follows

bcrypt

Load Admin User

Refactor DB Connection

Check In Code

Install Jose

Refactor DB Helper

Generate JWT Token

Test With Postman

Form Component HTML

Testing The Form

Style Sign In Page

Check In Sign Up Endpoint

Check In Sign Up Page

Set Up Production DB

Production Migration

Confirm Password Error

Env Example File

Authentication and Private Layout

Private Layout

JWT Verification

Reset DB

Auth Middleware

Check In Auth Middleware

SWR Fetcher

Refactor Fetcher

SWR Must Use Client

Check In SWR Config

Styling the Header

Display User Avatar

Display Avatar Placeholder

Center the Private Layout

NavBar and Footer

Page Stubs for Private Layout

Highlight Active Link

Check In Active Link

Feed Page

Feed Page Intro

SQL Query for Feed

Feed Endpoint

Debugging the 500 Error

Fix the 500 Error

Feed Container and List

Post Component

Styling the Post Component Part 1

Styling the Post Component Part 2

Profile Page

Profile Page Intro

Get Posts Endpoint

Get Post Endpoint

Update Post Endpoint Part 1

Update Post Endpoint Part 2

Delete Post Endpoint

Create Post Endpoint

Create Post Form

Post Container and List

SWR Mutate to Refresh Post List

SWR Mutate Explained

Wrap Up Profile Page

Fix React Key Error

Following Page and Followers Page

Get Following Endpoint

Following Page UI

Followers Endpoint

Followers Page UI

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

An in-depth, step-by-step tutorial series designed for learners with foundational programming knowledge

Focuses on practical application, providing just enough knowledge of the full stack to build a functional app

Ideal for beginners to intermediate learners with some web development experience

Covers core industry-standard tools and technologies, including NextJS, PostgreSQL, TailwindCSS, and Vercel

Provides hands-on experience in building a full stack web application, including front-end, back-end, and deployment aspects

Taught by an experienced instructor, Travis Luong, who is recognized for his work in web development

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Full Stack Twitter Prototype With Next.js with these activities:

Attend a Web Development Meetup

Show steps

Connect with other web developers at a meetup to exchange knowledge and learn from their experiences.

Browse courses on Web Development

Show steps

Find a web development meetup in your area or online.
Register for the meetup and attend the event.
Introduce yourself to other attendees and engage in discussions.
Share your knowledge and learn from others.

Review HTML and CSS Basics

Show steps

Brush up on the fundamentals of HTML and CSS to strengthen your foundation for building web applications.

Browse courses on HTML

Show steps

Review online tutorials or documentation on HTML and CSS.
Practice writing basic HTML and CSS code snippets.
Create a simple web page to apply your refreshed knowledge.

Review Next.js Docs

Show steps

Read the official Next.js documentation to familiarize yourself with the framework's concepts and features.

Browse courses on Next.js

Show steps

Visit the Next.js website and navigate to the documentation section.
Start with the 'Getting Started' guide to understand the basics of Next.js.
Explore the 'Concepts' and 'API Reference' sections to delve deeper into specific Next.js concepts and APIs.
Refer to the 'Examples' section for practical demonstrations of Next.js in action.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Study Group for PostgreSQL

Show steps

Collaborate with peers in a study group to delve deeper into PostgreSQL concepts and practice queries.

Browse courses on PostgreSQL

Show steps

Find or form a study group with other students taking the course.
Choose a specific PostgreSQL topic to focus on each session.
Work together to understand concepts, solve problems, and practice writing SQL queries.
Share knowledge and support each other's learning.

TypeScript Practice Exercises

Show steps

Solve TypeScript practice exercises to improve your understanding of data types, variables, and other TypeScript concepts.

Browse courses on TypeScript

Show steps

Find online resources or purchase a book with TypeScript practice exercises.
Start with basic exercises on data types, variables, and operators.
Gradually progress to more complex exercises involving functions, classes, and interfaces.
Review your solutions and identify areas for improvement.

Create a Simple Portfolio Website

Show steps

Build a basic portfolio website using Next.js to showcase your projects and skills.

Browse courses on Next.js

Show steps

Design the layout and structure of your portfolio website.
Create a new Next.js project and set up the necessary dependencies.
Develop the front-end components for your portfolio, including project thumbnails, descriptions, and navigation.
Implement a simple backend to handle data fetching and storage, if needed.
Deploy your website to a hosting platform like Vercel or Netlify.

Design a Social Media App Prototype

Show steps

Create a prototype for a social media app to demonstrate your understanding of app design principles and user interface best practices.

Browse courses on Social Media

Show steps

Brainstorm ideas and sketch out your app's concept.
Use a prototyping tool to create a clickable prototype of your app.
Focus on designing a user-friendly interface with intuitive navigation.
Consider various user scenarios and design for accessibility.
Present your prototype to others for feedback and iterate on your design.

Participate in a Web Development Hackathon

Show steps

Join a web development hackathon to test your skills, collaborate with others, and learn from the experience.

Browse courses on Web Development

Show steps

Find a web development hackathon in your area or online.
Form a team or work individually to develop a web-based solution.
Use your skills in Next.js, PostgreSQL, and other technologies to create a project.
Present your project to a panel of judges and receive feedback.
Network with other developers and learn about new technologies.

Career center

Learners who complete Full Stack Twitter Prototype With Next.js will develop knowledge and skills that may be useful to these careers:

Full-Stack Developer

A Full-Stack Developer designs, builds, and tests all aspects of web applications, including the front-end and back-end, ensuring functionality works as expected. They are proficient in a wide range of programming languages and frameworks, and are able to work independently on full-stack projects. This course is designed for those who wish to become a Full-Stack Developer, and it includes comprehensive instruction on how to build full-stack applications.

See salaries and explore the career path for Full-Stack Developer

UI Designer

A UI Designer designs the visual appearance of websites and applications, including the layout, typography, and color scheme. A UI Designer has a strong understanding of design principles and is able to bring their vision to life using design software. This course may be useful to a UI Designer, as it will help them develop the skills necessary to design the user interface of web applications and make them visually appealing.

See salaries and explore the career path for UI Designer

Back-End Developer

A Back-End Developer designs, builds, and tests the back-end of websites and web applications. They have proficiency in programming languages like Python, Java, or Node.js, and work closely with Front-End Developers to ensure all functionality works as expected. This course may be useful to a Back-End Developer as it will help them develop the skills necessary to build the back-end of web applications.

See salaries and explore the career path for Back-End Developer

Web Developer

A Web Developer designs, builds, and tests the functionality of websites. They understand how servers work, are adept at UX design, and have proficiency in programming languages such as HTML, CSS, and JavaScript. This course may be useful to a Web Developer, as it will help them develop the skills necessary to build complete web applications for the internet or business intranets.

See salaries and explore the career path for Web Developer

UX Designer

A UX Designer designs, builds, and tests user interfaces for websites and applications. They understand how users interact with technology, and use their knowledge to design interfaces that are easy to use and understand. This course may be useful to a UX Designer, as it will help them gain a foundational understanding of code and the process of implementing designs.

See salaries and explore the career path for UX Designer

Front-End Developer

A Front-End Developer designs, builds, and tests the user interface of websites and web applications. They have proficiency in HTML, CSS, and JavaScript, and work closely with Back-End Developers to ensure all functionality works as expected. This course may be useful to a Front-End Developer as it will help them develop the skills necessary to build the front-end of web applications.

See salaries and explore the career path for Front-End Developer

Systems Engineer

A Systems Engineer designs, builds, and maintains computer systems, including hardware and software. They work closely with stakeholders to understand their needs and design systems that meet those needs. This course may be useful to a Systems Engineer, as it will help them develop the programming skills necessary to build software components used in computer systems.

See salaries and explore the career path for Systems Engineer

Project Manager

A Project Manager plans, executes, and monitors projects to ensure they are completed on time, within budget, and according to specifications. They work closely with stakeholders to keep them informed of progress and identify risks. This course may be useful to a Project Manager, as it will help them develop the technical skills necessary to manage web development projects and ensure they are successful.

See salaries and explore the career path for Project Manager

Software Engineer

A Software Engineer applies programming languages to design, build, test, and deploy software and applications that can run on devices such as phones, tablets, and computers. They have a working knowledge of software development tools, and are able to write scalable and reusable code. This course may be useful to a Software Engineer, as it will help them develop the skills necessary to build the backend of web applications.

See salaries and explore the career path for Software Engineer

Database Administrator

A Database Administrator manages and maintains databases, which are used to store and organize data for various applications. A DBA ensures that databases are secure, performant, and accessible to authorized users. This course may be useful to a Database Administrator, as it will help them develop the skills necessary to set up and manage databases for web applications.

See salaries and explore the career path for Database Administrator

Product Manager

A Product Manager is responsible for the lifecycle of a product, including planning, development, and launch. They work closely with engineers, designers, and marketers to ensure that products meet the needs of users and achieve business objectives. This course may be useful to a Product Manager, as it will help them develop the technical skills necessary to understand the development process and make informed decisions about product development.

See salaries and explore the career path for Product Manager

Technical Writer

A Technical Writer creates documentation for software, hardware, and other technical products. They work closely with engineers and product managers to ensure that documentation is accurate, clear, and helpful. This course may be useful to a Technical Writer, as it will help them develop the skills necessary to understand the development process and create technical documentation for web applications.

See salaries and explore the career path for Technical Writer

Software Developer

A Software Developer builds software using various programming languages and platforms. An understanding of computer science fundamentals, programming, and debugging is required. This course may be useful to a Software Developer, as it will help them develop the skills necessary to build full-stack web applications that are both secure and performant.

See salaries and explore the career path for Software Developer

Data Engineer

A Data Engineer designs, builds, and maintains data pipelines that transform and prepare raw data for analysis and reporting. They have proficiency in programming languages like Python, Java, or Scala, and work closely with Data Scientists and Analysts to ensure data is accurate and accessible. This course may be useful to a Data Engineer, as it will help them develop the skills necessary to build data pipelines for web applications.

See salaries and explore the career path for Data Engineer

Data Scientist

A Data Scientist analyzes data to extract insights and patterns, which can be used to inform decision-making and improve business outcomes. They have proficiency in statistics, machine learning, and data analysis tools, and work closely with Data Engineers to ensure data is accurate and accessible. This course may be useful to a Data Scientist, as it will help them develop the skills necessary to analyze data from web applications.

See salaries and explore the career path for Data Scientist