Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

NextJS Full Stack Social Media App -Twiddle App

Name: NextJS Full Stack Social Media App -Twiddle App
Rating: 4.6 (15 reviews)

Twitter Clone: ( Next JS, React, TailwindCSS, Typescript, Clerk, MongoDB ) { Full-Stack Practical NextJS course }

Created byNoor Fakhry, Programming Fluency

Last updated 7/2025

English

English [Auto],

What you'll learn

Building and Deploying a Full-Stack Social Media App:
By the end, you’ll build and deploy a complete full-stack social media app with a polished UI, scalable backend, and live hosting.
NextJS – The Most Popular Framework:
Leverage the power of NextJS, the most popular web framework today, known for its seamless integration of server-side rendering and static generation.
Tweet Features:
Develop core social media features like tweeting, liking, retweeting, and replying, with a focus on functionality and performance.
Authentication:
Learn to implement secure user authentication, including registration and login using a third party service like Clerk.
Building User Interfaces:
Master responsive UI design by creating sidebars, navigation bars, and mobile-friendly layouts with Tailwind CSS.
Database Integration:
Understand how to set up and manage databases, create models, and handle data interactions with user profiles and posts.
Designing UI Using Figma:
In this course, you'll also learn how to design a sleek and user-friendly interface using Figma.

Course content

19 sections • 89 lectures • 9h 28m total length

What are you going to get from this course2:24
Learn to build and deploy a full-stack social media app with Next.js, Tailwind CSS, TypeScript, and MongoDB, featuring user authentication, posting tweets, and groups.
Course setup lecture1:20
Official Course Setup Lecture

A look at the final version of Twiddle11:49
Explore the final deployed version of Twiddle, a Next.js full‑stack social app, featuring landing and onboarding, Clark authentication, profiles, posting, liking, replying, retweeting, sharing, search, groups, and notifications.
Initializing a Git repository4:31
Initialize a git repository on GitHub for the twiddle course and link it to a local folder via VS Code. Commit the first commit, rename master to main, and push.
What is a Design Document2:18
Understand a design document as a detailed plan that outlines architecture, components, and interactions before development, serving as a blueprint to align goals, reduce costs, and save time.
The Design Document of Twiddle3:10
Explore Twiddle's design document, detailing a microservices architecture with authentication, user and tweet services, and schemas for users, tweets, and groups, plus a responsive UI.

What are we going to do in this section4:47
Develop a UI design for twiddle using Figma by creating a design assets folder, downloading resources, and practicing git workflows, to visualize the app and preempt issues before coding.
Landing Page Design5:22
Create a Figma landing page wireframe for the Twiddle App, featuring a black background, logo, Happening now title, join today, and login and register buttons.
Onboarding Page Design7:03
Design the onboarding page for the twiddle app, including a welcome heading, a bio text area, a save button, and a profile illustration from Clark UI.
Home Page Design15:06
Design the home page for the Twiddle app, featuring a black desktop frame with a top bar, sidebars, group and user cards, and a tweet feed with interactive icons.
Search Page Design3:11
Design the search page user interface by duplicating a page, adding a rounded search bar with an icon, and listing users and groups that filter as you type.
Notifications Page Design3:51
Create-Tweet Page Design3:06
Design the tweet page UI for the Twiddle App in a Next.js full-stack context, including a text area and a prominent post button to enable creating and posting tweets.
Groups Page Design3:28
Profile Page Design7:41
Design the profile page with a profile photo, name, username, bio, edit profile, and two tabs for tweets and replies, plus share and duplicate design features.

Setting up the project8:56
Set up a Next.js 14 project in Visual Studio Code, install TypeScript, Tailwind CSS with the app router, and add tailwind CSS animate for animations.
Creating our file and folder structure4:02
Leverage Next.js route groups to organize the app into oath and route folders, move layout and page files to the root, and prepare authentication routes for scalable, maintainable code.

Creating the authentication logic of Twiddle13:52
Create register and login routes under the auth folder and implement a shared layout with metadata and styling. Wrap the app in a Clerk provider to enable authentication context.
Creating the register page9:40
Create a dynamic Next.js register route using a [..] folder that renders Clark's sign up user interface, and configure the publishable key in .env.local with the Clark middleware.
Creating the login page7:40
Defining the onboarding page3:03
Define the onboarding page by creating an onboarding folder in auth, adding page.tsx as a functional component returning an h1 onboarding, and applying tailwind styles for white in the config.

Creating the Landing page of Twiddle16:13
Create a landing page as a reusable UI component and render it if no user is logged in. Use Clerk currentUser with Next.js to drive sign in and sign up.
Creating the layout of (root) path7:49
Create the root layout for a Next.js app, conditionally rendering top and side bars by login status and styling the main container with a responsive Tailwind flex layout.
Creating the favicon of Twiddle4:44
Change the app favicon to a branded logo by converting an SVG to a favicon, creating a transparent background with Canva, converting PNG to favicon, and updating the Next.js project.

Creating the Left Sidebar component19:44
Create and style the left sidebar for the Twiddle app using reusable components, client-side Next.js code, and active link logic driven by path names and the user ID.
Creating the Bottom Bar component6:22
Create a bottom bar component for mobile navigation, hidden on larger devices, while the left sidebar stays visible on larger devices; implement as a client component with shared links.
Creating the TopBar component8:41
Create a fixed top bar for the Next.js twiddle app, featuring the home logo and Clark’s signed-in organization switcher and user button.

Setting up the Database12:24
Set up the database backend for the Twiddle app by creating lib/mongoose.ts to manage a mongoose connection, enforce strict queries, and handle missing MongoDB URL errors via an Atlas URL.
Creating the User model9:45
Create a server-side user model in a Next.js app with mongoose to store onboarding users, including id, email, username, name, image, bio, tweets, onboarded status, syncing with Clark's back end.
Creating the first user action9:07
Create your first Next.js user action to save a new user's details to the database using a server component, the user model, and a create user function.
What are webhooks1:51
Sync Twiddle with Clerk using webhooks16:20
Sync your twiddle app with clerk using webhooks by deploying to vercel, exposing the app publicly, and configuring an endpoint to handle user created and updated events.

Writing the onboarding logic12:58
Fetch the current user from Clark and the database during onboarding, then render the user profile and account info with a welcome message to complete your profile to use Twitter.
Writing the update user logic8:32
Create the update user function in user actions to update user info via an update user params interface, syncing changes with Clark and the database. Integrate with clerk webhook to trigger updates on user.updated and revalidate the profile edit page.
Creating the AccountInfo component [Part 1]24:04
Build the account info component as a user form with shared CDN UI, validate inputs using Zod schemas and a form resolver, then save bio data to the backend.
Creating the AccountInfo component [Part 2]12:03
Define the account info component's async onsubmit to update the user with bio, use path name from next/navigation, and handle profile edit and onboarding redirections, with a one-second loading delay.

Creating the Right Sidebar component [Part 1]18:17
Build the right sidebar for twiddle, showing suggestions, groups, and users by fetching data with an asynchronous component and a fetch users action, including regex search and pagination.
Creating the Right Sidebar component [Part 2]3:51
Continue building the right sidebar by conditionally rendering similar minds; show no users yet when empty, fetch four users, and map them to user cards.
Creating the UserCard component15:33
Create a client component user card that renders an avatar, name, and username from props, with a view button navigating to the user's profile for that id using the router.

Requirements

To get the most out of this course, you should have a basic understanding of HTML, CSS, JavaScript, Typescript, React, Tailwind CSS, and NextJS. This course is highly practical and assumes you are comfortable with these technologies, as it is not designed to teach from scratch. Familiarity with these topics will allow you to dive right into building and deploying a full-stack social media app without needing to learn the basics. If you have worked with these technologies before and are ready to level up your skills, this course is perfect for you!

Description

Build and Deploy a Complete Social Media App using Next.js – Twiddle App

Welcome to the ultimate hands-on course where you'll learn how to build, design, and deploy a full-featured social media app, Twiddle, from scratch! Whether you’re looking to sharpen your web development skills or build your portfolio, this course will guide you through the entire process of creating a modern, scalable app similar to platforms like Twitter.

What You’ll Learn:

- Full-stack development using Next.js, React., and more.

- Authentication: Secure user login and registration.

- Database Management: Store and manage user data and tweets.

- Tweet Features: Liking, retweeting, replying, and creating tweets.

- Group Management: Create and manage social groups.

- Responsive Design: Ensure your app looks great on all devices.

- UI Design: Learn how to use Figma to create beautiful user interfaces.

You'll not only write clean, reusable code but also implement advanced features like notifications, tweeting, commenting on tweets, pagination, and a search functionality. Each section dives deep into practical aspects, from setting up the project to deploying it live!

Why Enroll?

This course isn’t just about building another app. It's about understanding the key principles of modern web development while working on a project that you can showcase to potential employers or clients. By the end, you’ll have a deployable, feature-rich social media app, and the skills to build more ambitious projects on your own.

Hands-On, Real-World Experience

Unlike theory-heavy courses, this course focuses on real-world development. You’ll tackle every stage of building a fully functioning social platform, from integrating secure authentication to handling complex data relationships in the backend. Each feature you create—like tweets, groups, and user profiles—is built with scalability and performance in mind, preparing you to tackle real-world challenges as a full-stack developer.

Launch Your Own App and Portfolio

By the end of this course, you won't just have a demo project—you’ll have a fully deployable app that you can launch on the web and showcase to clients, recruiters, or employers. Whether you want to start your own project or level up your career, building Twiddle will arm you with essential skills, industry knowledge, and a standout portfolio piece that demonstrates your abilities.

Join now and start building your own web development project!

About the Instructor Noor Fakhry:
Meet Noor Fakhry, an experienced software engineer with many years of hands-on experience working in the field. Noor is the founder and lead instructor at Programming Fluency, where he shares his expertise with aspiring programmers. With a strong background in software development, Noor brings practical knowledge and real-world insights to his teaching. He has worked on various projects and tackled complex challenges, gaining valuable experience that he now imparts to his students.

Noor's extensive experience as a software engineer enhances his ability to provide practical guidance and industry-relevant knowledge. He is currently pursuing a Master's degree in Computer Science, further deepening his understanding of the field. With a passion for both self-learning and formal education, Noor recognizes the specific needs of beginner coders and is committed to creating comprehensive and engaging programming and tech courses. His unique approach not only makes learning to code fun and interactive but also equips students with the skills they need to thrive in the tech industry. Noor goes beyond teaching coding concepts, he also emphasizes the reasoning behind certain practices, fostering a deeper understanding of the subject matter.

Being a self-taught programmer, Noor recognizes the abundance of online courses, tutorials, and books that tend to be excessively wordy and insufficient in imparting essential skills. Many individuals find themselves overwhelmed and uncertain about where to begin when learning programming and how to code. Furthermore, a considerable number of people lack the financial means to invest $20,000 in a coding bootcamp. The accessibility of programming skills should be inclusive and affordable for everyone. Educational materials ought to focus on imparting practical, up-to-date skills, ensuring they do not waste a student's precious time.

To enhance the learning experience, Noor employs animations, real-life examples, and whiteboard amazing explanations allowing students to visualize and comprehend complex concepts easily.

Noor's journey led him to discover his true passion in teaching programming and coding, where he finds joy in helping individuals achieve their aspirations and turn their dreams into reality. This very passion drove him to become a full-time online course creator at Programming Fluency.

JOIN Noor on a transformative journey towards programming fluency and a successful career in tech today!

Are you ready to become FLUENT in your favorite programming language?

About Programming Fluency:

Welcome to Programming Fluency

I have designed Programming Fluency to be the number one destination for people looking to learn how to code, master programming, and acquire high-demand job market skills. This is the only platform that provides the best and highest quality tech courses in the entire world. Together, we are creating a new landscape within the online education space. I am honored to have you with us!

- Noor Fakhry, Founder of Programming Fluency

Programming Fluency is your gateway to mastering in-demand skills, landing a high-paying job, and advancing your career in technology.

We offer the resources and supportive environment you need to take control of your professional journey and unlock a wealth of exciting career opportunities in the tech industry, regardless of your background or experience.

At Programming Fluency, we help you become fluent in your favorite programming language, ensuring you have the expertise and confidence to excel in your chosen field.

We create comprehensive masterclasses that will take you from an absolute beginner to a complete professional. Additionally, we offer practical courses such as building and deploying full-stack apps, designed to boost your portfolio and make you stand out in the job market. If you already have some experience and want to further enhance your portfolio, our advanced courses are perfect for taking your skills to the next level.

Who this course is for:

Aspiring Web Developers: If you are just starting your journey in web development, this course is perfect for building a strong foundation. You will learn how to work with essential tools and frameworks like NextJS, React, and Tailwind CSS. Through hands-on projects, you will get a feel for full-stack development, enabling you to confidently create your own apps and websites.
Full-Stack Developers: For developers who want to deepen their full-stack skills, this course offers an excellent opportunity to work on a real-world project. You’ll not only build the front end of a social media app but also dive into back-end development, database management, and API integration. Twiddle gives you a chance to hone both client-side and server-side skills in a practical, meaningful way.
Freelancers: can greatly benefit from this course by learning how to build complex web applications that are in high demand. Social media platforms are a staple in today’s digital landscape, and mastering the ability to create one gives you an edge in the freelance market. You’ll walk away with a robust project that you can show potential clients to demonstrate your ability to handle large-scale applications
JavaScript Enthusiasts: If you love working with JavaScript and want to take your skills to the next level, this course will push you beyond the basics. Using JavaScript, TypeScript, and popular libraries, you'll build interactive features like tweet creation, retweets, replies, and user profile management. You’ll also work with real-world concepts like authentication and database interactions that are crucial for modern app development.
Backend Developers: Backend developers looking to sharpen their skills on the frontend will find this course a great opportunity to bridge the gap. You’ll work with user authentication, handle secure data, and implement a responsive front end that communicates seamlessly with the backend. By the end of the course, you’ll be comfortable managing both front-end and back-end codebases in a full-stack environment.
Developers New to NextJS: If you’re familiar with other frameworks like React, but new to NextJS, this course provides an in-depth exploration of NextJS and its unique features, like server-side rendering and static site generation. You'll gain valuable experience using this powerful framework to build a real-world application, deepening your understanding of its benefits and best practices.
Entrepreneurs and Startups: For entrepreneurs and startup founders, this course offers a hands-on approach to learning how to build your own MVP (Minimum Viable Product). Twiddle is a perfect case study, showing you how to structure a scalable, feature-rich application. You’ll gain the technical knowledge necessary to turn your app idea into a reality, whether you're working solo or planning to hire developers in the future.
Junior Developers: Junior developers looking to level up their skills will find this course invaluable. You’ll learn how to work with modern technologies, organize your code, and solve common challenges that arise when building a complex application. By the end of this course, you will have a portfolio project that showcases your ability to deliver a real-world solution, making you stand out to potential employers.
Developers Interested in Building Social Media Apps: If you've always wanted to learn how social media platforms like Twitter or Facebook are built, this course will take you behind the scenes. You’ll understand the core features that make a social media app functional, such as creating posts, following users, liking content, and managing groups. Each feature is built step-by-step, giving you a solid grasp of the underlying logic and architecture.
Anyone Interested in Launching a Production-Ready App: Finally, if your goal is to build and deploy a production-ready web app, this course is the perfect fit. You won’t just stop at development; you’ll take your app all the way to deployment, learning how to host it online for the world to see. By the end of the course, you will have a live, fully functional social media app, ready for users to sign up and engage with.

NextJS Full Stack Social Media App -Twiddle App

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 4min

Initial steps of the app4 lectures • 22min

Creating the UI design of Twiddle using Figma9 lectures • 54min

Project Setup2 lectures • 13min

Authentication4 lectures • 34min

Layout and UI Foundation3 lectures • 29min

Building Navigation Components3 lectures • 35min

User Models and Actions5 lectures • 49min

Onboarding and Account Management4 lectures • 58min

Sidebar and User Cards3 lectures • 38min

Requirements

Description

Who this course is for: