
I highly recommend that you follow along while I am coding. To do so, there are a couple of tools that you need to install.
Learn how to follow along easily using our "b" (beginning) and "e" (ending) branches for each part of the course.
In this video, we dive into the fundamentals of the ASP.NET MVC pattern. Learn what ASP.NET MVC is, understand its key components—Model, View, and Controller—and see how they work together to create a social media application. We'll cover the benefits of using ASP.NET MVC, such as separation of concerns, testability, extensibility, and powerful routing.
Download assets here: https://dotnethow.net/social-media-app-assets
In this tutorial, I'll show you how to set up CSS and JavaScript files for use throughout the course.
In this video, we'll guide you through creating a stylish and functional top bar for your application, complete with an icon, search bar, notification section, and profile section. Perfect for enhancing your app's user interface and user experience.
In this video, I will guide you through creating a stylish and functional sidebar for your application using Tailwind CSS. You will also learn how to simplify the code using partial views.
In this tutorial, I'll show you how to create a stylish and functional story modal using Tailwind CSS. This modal will be used to select and image and create a story.
In this tutorial, I'll show you how to create a stylish and functional create status placeholder using Tailwind CSS.
In this tutorial, I'll show you how to create a stylish and functional create status modal using Tailwind CSS. This modal will be used to write your status and also optionally select an image.
In this tutorial, I'll show you how to create a post placeholder using Tailwind CSS. You will analyze and then build the placeholder step by step, where you will create all the necessary elements, including the post user, timestamp, like, comment, and favorite icons, as well as the comment section for a post.
In this tutorial, I'll show you how to create a suggested friends section placeholder using Tailwind CSS. You will learn how to nest the necessary divs to include the header, user profile picture, full name, number of followers, and a follow button.
In this tutorial, I'll show you how to create a 'Trends for You' section using Tailwind CSS. You will learn how to design trending topics, hashtags, and the number of mentions, step by step.
In this tutorial, you'll learn how to create an empty SQL database directly from Visual Studio. We will walk through the steps to set up your database, retrieve the connection string, and prepare it for future integration with Entity Framework Core. This is the foundational step to working with databases in your project!
In this tutorial, we'll walk through setting up Entity Framework Core for your project. You'll learn how to install the required Entity Framework NuGet packages, create the AppDbContext class, and configure it in Program.cs. By the end, you'll be ready to start working with your SQL database using Entity Framework Core!
In this tutorial, you'll learn how to create a model/entity in your project and add it to the AppDbContext. We’ll also walk through the process of adding migrations and updating the SQL database using Entity Framework Core. By the end of this tutorial, your database will be ready to store data for your application.
In this tutorial, you'll learn how to create a separate data project and move your AppDbContext and post model into it. We’ll also modify a property in the post model, apply new migrations, and ensure everything works as expected. This is an essential step to organizing your project structure and managing database changes effectively with Entity Framework Core
Learn how to set up a User model and create a corresponding Users table in the database. This guide covers defining user attributes, configuring the database schema, and using migrations to structure data for user management.
Learn how to set up a one-to-many relationship between User and Post models in C# using Entity Framework. This tutorial covers creating database relationships, setting up foreign keys, and configuring navigation properties for efficient data handling in your applications.
In this video, we’ll go through the steps to create an AppDbInitializer file to seed your database with initial data when the application starts. This initializer helps ensure your app has the required data structure and default records right from the beginning. Perfect for setting up sample data for development and testing environments.
In this video, I’ll show you how to inject AppDbContext into the HomeController to load and display posts along with user data from the database. This approach makes it easy to access the data directly within your controller, enabling a clean and efficient way to handle data in your ASP.NET application.
In this part, we replace hardcoded posts and user information on the timeline with real data loaded directly from the database. This approach makes the app’s content dynamic, allowing it to display up-to-date posts and user details instead of static placeholders. It’s a key step in transforming your social media app into a fully functional, data-driven experience.
Here are some additional resources you can explore to learn more about passing data from a controller to a view:
ViewData: https://youtu.be/1DyqqZlp-WQ?si=ixpHjmNgdx5wopbF
ViewBag: https://youtu.be/mB5xErb1vxs?si=XVoADY9oVOTv5ffh
TempData: https://youtu.be/P_A6O7Sdw58?si=IZLnDzJz3km2dqKT
Learn how to create a clean and reusable post partial view for your social media app's timeline. We'll extract the post display code into its own partial view and use it in the timeline's foreach loop to show all posts. A simple way to make your social feed's code more maintainable.
Learn how to transform regular timestamps into user-friendly relative time displays (like "1h ago") in your social media application. We'll implement this common social media feature to make your post dates more readable and engaging for users.
Learn how to implement the Create Post functionality in your social media application. We'll add a new action to the HomeController that handles post creation, setting up the foundation for users to share content on your platform.
Learn how to submit your first text status using a form and display it in your timeline. We'll create the form submission logic and implement post sorting to show the most recent updates first, just like real social media platforms.
Learn how to implement image upload functionality in your ASP.NET Core application. This tutorial covers passing a FormFile, verifying the file type as an image, and uploading it securely to the local wwwroot folder.
In this part you will learn how to implement an image preview and upload feature while creating a status. This guide covers displaying the selected image in a pop-up for preview and sending it to the upload action created earlier, making the status creation process more interactive and user-friendly.
In this part, you will learn how to create a Like model and set up a likes table in your database, along with establishing the necessary relationships between models. You'll understand how to define the database structure for storing likes and configure the relationships between users, likes, and the content being liked to enable proper like functionality in your application.
In this part, you will learn how to implement the like/unlike action within your HomeController to handle post interactions. This action will allow users to toggle between liking and unliking posts by making a single request to the controller, which will either create a new like record or remove an existing one based on the current state.
In this part, you will learn how to implement the frontend functionality to trigger the like/unlike action. You'll understand how to handle click events on like buttons and make the appropriate request to your backend action.
In this part, you will learn how to display the number of likes and the current like status for each post. You'll implement a dynamic heart icon that shows a filled heart when the post is liked by the current user and an outlined heart when it isn't. The like count will be updated in real-time to reflect the total number of likes on each post, providing users with immediate visual feedback about post interactions.
In this part, you will learn how to create a Comment model and set up a Comments table in your database, along with establishing the necessary relationships between models. You'll understand how to define the database structure for storing comments and configure the relationships between users, comments, and the posts to enable proper like functionality in your application.
In this part, you will learn how to implement the Add Comment action within your HomeController which will be used to add a new comment to the database.
In this part, you will learn how to implement the frontend functionality to send comment information to the AddPostComment you created on the last part. You'll understand how to handle click events on like buttons and make the appropriate request to your backend action.
In this segment, we dive into enhancing the user interface by displaying the comments you've added in previous parts. You will learn:
How to fetch comments from the database and integrate them into your view.
Implementing a counter that updates in real-time to show the number of comments for each post, providing instant feedback to users about the engagement level of their posts.
This part will help you make your application more interactive and informative.
In this part, discover how to handle posts with numerous comments by adding a "Show More Comments" button. You'll learn to implement comment counting, display logic for the button, and how to set up redirection to a detailed post view for all comments.
In this part, we'll add a simple delete icon next to every comment. You'll discover how to place this icon correctly, make it visible, and connect it to the backend to remove posts when clicked.
In this part, we implement the functionality to remove a comment from a post. This involves creating an action method that handles the removal process, ensuring the comment is deleted efficiently while maintaining the integrity of the post's data.
In this part, you will learn how to create a Favorite model and set up a favorites table in your database, along with establishing the necessary relationships between models. You'll understand how to define the database structure for storing favorites and configure the relationships between users, favorites, and the content being favorited to enable proper favorite functionality in your application.
In this part, you will learn how to implement the favorite/unfavorite action within your HomeController to manage user favorites. This action will allow users to toggle between adding and removing content from their favorites by making a single request to the controller, which will either create a new favorite record or remove an existing one based on the current state.
In this part, you will learn how to implement the frontend functionality to trigger the favorite/unfavorite action. You'll understand how to handle click events on favorite buttons and make the appropriate request to your backend action
In this part, you will learn how to display the favorite status for each post and update the favorite icon dynamically. You will also show the total number of favorites for a post. You'll implement logic where the icon changes color or appearance when a post is marked as a favorite by the current user and resets when it is unfavorited, providing real-time visual feedback about the favorite status.
In this part, you will learn how to create functionality to toggle a post's visibility between public and private. This includes implementing the logic needed to update the visibility status of posts.
Learn how to handle user interactions for changing post visibility. This part focuses on sending requests to toggle visibility and updating the user interface dynamically to reflect changes in real time.
Discover how to implement filtering for posts based on their visibility status. You will learn to display only public or private posts depending on the user's context or permissions.
In this part, you will learn how to create a reports table in the database to store user-generated reports on posts, laying the foundation for the reporting system.
This part covers how to implement an action that allows users to report posts. You'll learn to capture the report details and store them in the database.
In this part, you will learn how to send a request to report a post and dynamically update the user interface to hide the report button, preventing duplicate reports.
In this part, you will learn how to filter reported posts on the Udemy platform, ensuring they are no longer displayed to users, enhancing the learning environment by removing disruptive content.
Build a complete, full stack social media application with ASP.NET Core, C#, JavaScript, Tailwind CSS, and Azure, from an empty Visual Studio project to a live, deployed app.
This is a hands-on, project-based course for developers who want to build real software, not toy demos. You will create your own feature-rich social platform from scratch, covering both the front-end and the back-end, and ship it to the cloud with an automated CI/CD pipeline. Every feature is built step by step, so you finish with a working application and a deep understanding of how a modern full stack web app fits together.
What you'll build
A fully functional social network with the features users expect: a post and story feed, likes, comments, shares, and favorites; a complete friend-request system (add, cancel, ignore, and approve); a notifications system; content reporting; and a trending section driven by the most-used hashtags.
What you'll learn
Core social features with ASP.NET Core: Implement posts, stories, likes, comments, shares, favorites, friend requests, notifications, reports, and hashtag trends, the building blocks behind every modern social app.
ASP.NET Core MVC architecture: Structure the project with the ASP.NET Core MVC framework for clean separation of concerns and a maintainable, scalable codebase you can extend long after the course.
Data with Entity Framework Core: Design and evolve your database schema using EF Core migrations. Create, read, update, and delete records, and set up and query your SQL database so data is stored securely and accessed efficiently.
Modern front-end with Tailwind CSS and JavaScript: Build a responsive, polished interface with Tailwind's utility-first workflow, and add the JavaScript that makes a social app feel fast and interactive.
Cloud deployment with Azure: Deploy your application to Azure and configure a CI/CD pipeline that automates releases, so every change ships smoothly to a real production environment.