Want to learn how to build a social media application with ASP.NET? This course is for you. We'll guide you through the process of creating your own feature-rich social platform from scratch. You'll develop the entire application, covering both the front-end and back-end, while implementing essential features that every modern social media app needs. You will start with an empty project in Visual Studio and build your app from the ground up.What will you learn?
Want to learn how to build a social media application with ASP.NET? This course is for you. We'll guide you through the process of creating your own feature-rich social platform from scratch. You'll develop the entire application, covering both the front-end and back-end, while implementing essential features that every modern social media app needs. You will start with an empty project in Visual Studio and build your app from the ground up.What will you learn?
Core Features Implementation: Create essential social media features such as stories, posts, likes, shares, and favorite posts. You'll build functionality to manage friend requests, including adding, canceling, ignoring, and approving requests. Additionally, you'll implement a trending section that highlights the most used hashtags, ensuring your platform stays current and engaging.
Front-End Design with Tailwind CSS: Design a visually appealing and user-friendly interface using Tailwind CSS. Tailwind's utility-first approach will help you create responsive and modern layouts effortlessly.
ASP.NET MVC Framework: Develop the application using the ASP.NET MVC framework, which will structure your project effectively, ensuring a clear separation of concerns and a maintainable codebase.
Data Management with ASP.NET Data Project and Entity Framework: Manage your data efficiently with ASP.NET Data Project and Entity Framework. You'll learn how to manage your database schema with Entity Framework migrations, add data to the database, retrieve data, update existing data, and delete data when necessary. Learn to set up and interact with an SQL database, ensuring your application's data is stored securely and can be accessed and manipulated with ease.
Deployment with Azure: Deploy your social media application to the cloud using Azure. You'll learn how to set up a CI/CD pipeline to automate the deployment process, ensuring your code is always up-to-date and your application runs smoothly in a production environment.
By the end of this course, you'll have a fully functional social media platform, along with the skills and knowledge to create, manage, and deploy complex web applications using ASP.NET. Ready to build something amazing? Let's get started.
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://shrtly.net/social-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.
Test your knowledge of modern UI development using Tailwind CSS and modal components for a social media application. This quiz focuses on structure, styling, and best practices in frontend development.
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.
Entity Framework Core and Data Relationships Quiz" Description: Test your knowledge of Entity Framework Core setup, models, and relationships.
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.
Test your understanding of ASP.NET MVC's implementation in a social media application, covering data loading, view management, post creation, and image handling in a real-world scenario.
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.
In this part, you'll create an interactive confirmation dialog to ensure users intentionally delete posts on application, preventing accidental deletions and enhancing user control over content management.
In this part we will fous on improving the performance of the confirmation dialog on the app, addressing lag, reducing load times, and ensuring a seamless user experience when confirming post deletion.
Learn the process of permanently deleting posts from our social media platform, including how to delete post-related data like reports, favorites, comments, and likes.
Explore the concept of soft deleting posts on a platform where posts are hidden but not permanently removed, allowing for potential recovery while maintaining a moderated platform environment.
In this part, you'll design the database table needed for stories, covering everything from storing who posted the story to how long it should last before it disappears.
This part covers how to implement an action that allows users to create stories. You'll learn to capture the story image, store it in the wwwroot folder and also store the image reference in the database.
Create an engaging preview window where users can see their stories before they go live or check out what they look like to others, improving user interaction with your platform.
Walk through the steps to let users make their own stories, from capturing content to storing it in the database.
In this part of the tutorial, we focus on creating a simple view for the Stories section. This view resolves the error caused by a missing view and prepares the application for the dynamic loading of stories in the upcoming steps. Although no data is displayed yet, this foundational setup is essential for building out the Stories feature.
In this part, we take the next step by fetching stories from the database. The fetched data is then passed to the view created in the previous part, allowing stories to be dynamically displayed on the page.
In this part, we'll explore the differences between ViewComponents and Partial Views in ASP.NET Core. Learn when to use each, how ViewComponents encapsulate logic and data fetching, and why they're ideal for building modular, reusable UI components. Perfect for developers looking to make informed decisions in designing dynamic and maintainable applications
In this part, we’ll create our first ViewComponent in ASP.NET Core. Follow along as we design a component to fetch and display stories data dynamically. Learn how ViewComponents encapsulate data retrieval and UI rendering to build modular and maintainable applications.
In this part, we’ll explore how to modify the redirection logic after a story has been created. Learn how to customize the destination URL to improve user experience and align with your application’s flow.
In this part, we’ll implement functionality to automatically hide stories after 24 hours. Learn how to manage time-based visibility using ASP.NET Core, ensuring your stories align with social media-like behavior. This feature enhances the dynamic and engaging nature of your application.
In this part, we’ll create a database table to store hashtags for stories. Learn how to define the table structure and prepare it for managing hashtag data, laying the foundation for implementing trending topics in your application.
In this part, we’ll refactor the hashtags partial view to use a dedicated ViewModel. Learn how to streamline data handling and improve maintainability in your ASP.NET Core application.
In this part, we’ll create a static helper class with a method to extract all hashtags from a given text. Learn how to encapsulate logic for identifying hashtags efficiently and reuse it across your application.
In this part, we’ll test the hashtag extraction method and implement logic to store the extracted hashtags in the database after a post is created. This ensures your app can effectively manage and track hashtags.
Learn how to enhance the ViewComponent to display the count of hashtags, providing users with insightful data about hashtag usage in your application.
Discover how to update the database to reflect changes in hashtags when a post is deleted, ensuring consistent and accurate hashtag data.
Learn why adopting a service-oriented approach improves application structure. In this part, we’ll explore the limitations of injecting AppDbContext directly into controllers and the advantages of using services instead.
In this section, we define the service interface that specifies the contract for our application's data operations. The interface declares the required methods without implementation, establishing a clear contract for what operations our service will support.
This section contains the concrete implementation of the IPostService interface. Here we implement all the methods defined in the interface, incorporating the actual business logic and data access operations
In this part we refactor the HomeController to use our new PostService instead of directly accessing AppDbContext. We also configure the service lifetime in our dependency injection container.
Service Configuration Options:
AddScoped (Recommended for this case): Creates one instance per HTTP request
AddTransient: Creates a new instance every time it's requested
AddSingleton: Creates a single instance for the entire application lifetime
We use AddScoped here because our PostService depends on AppDbContext, which is itself scoped to the HTTP request lifecycle.
Implementation of a dedicated hashtag service that handles the creation, storage, and retrieval of hashtags within the social media platform. This includes developing the hashtag interface, service implementation, configuration setup, and integrating hashtag functionality into the existing controller layer for seamless hashtag management across posts and content
Development of StoriesService interface, implementation of story creation and management logic, configuration of required dependencies, and integration with controllers for story functionality
Implementation of FileService interface for managing file operations, service layer implementation for file processing, configuration of file handling, and controller updates for file management.
Diagnosing and resolving issues preventing uploaded images from displaying properly in posts and stories. Investigation of image path handling, storage configuration, and media service integration to ensure correct image rendering.
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.