/reactivities

A social network application built using ASP.NET Core, React (with Typescript) and Mobx following Clean Architecture and CQRS + Mediator pattern.

Primary LanguageC#

Reactivities

A social network application built using ASP.NET Core, React (with Typescript) and Mobx following Clean Architecture and CQRS + Mediator pattern.

This is the final project for Complete guide to building an app with .Net Core and React at Udemy.

Features

  • Login/Logout with authorisation/authentication.
  • CRUD with business rules
  • Drag-and-drop and resizing of photos.
  • Form with client-side and server-side security and validation.
  • Follow another user
  • View, join and cancel attendance to activities.
  • Chat using SignalR.

Technologies:

  • ASP.NET Core, React and Mobx
  • RESTFul Services ASP.NET Web API, Entity Frameworke(Code-First).
  • Semantic-UI for styling.
  • TypeScript with React for typesafety.
  • Database: SQLite, MySQL and SQL Server
  • Git for source control

Setting Up the Environment

Download and install the following

  1. Install and download .Net Core SDK 3.1.

  2. Install and download Node.s (v12.16.1. or higher) for developing JavaScript Application using ReactJs.

  3. [OPTIONAL] This is not required but you may want to install Node Version Manager to switch between different version of Node in your projects.

  4. Git for version control.

  5. Install Visual Studio Code. This is free, open-source and cross-platform but you may install any integrated development environment of your choice.

  6. In VS Code, go to Extensions then search and install add the following extensions to add functionality and increase your productivity:

    • Auto Close Tag
    • Auto Rename Tag
    • Bracket Pair Colorizer 2
    • C# for Visual Studio Code (powered by OmniSharp)
    • C# Extensions
    • ES7 React/Redux/GraphQL/React-Native snippets
    • Material Icon Theme
    • NuGet Package Manager - to add third-party packages
    • Prettier - Code formatter
    • SQLite - development uses SQLite database initially because it is quick and easy to start with.

  7. Download the React Deveoper Tools for your browser.

  8. Clone repository ????

  9. Run npm install to download dependencies.

Database Setup and Connection

Testing

  1. Download Postman for testing APIs.
  2. Using the terminal, go to your API project directory and run it. $ dotnet watch run

Resources

Patterns Used

Not used in this application but can be used for future improvement.

Frameworks and Libraries

  • Entity Framework Core as Object-Relational Mapping (ORM)

  • ReactJs

  • Axios

  • Semantic UI

  • MediatR

    To install MediatR using NuGet, add package MediatR.Extensions.Microsoft.DependencyInjection to Application project.

  • MobX

  • React Router

  • Fluent Validation

  • React-toastify as notification library

  • React Final Form to manage forms

  • React Widgets for DateTimePicker

    Prerequisite: date-fns for date localization

    npm install react-widgets-date-fns date-fns@2.0.0-alpha.7 --save

  • revalidate for form validation.

  • ASP.Net Core Identity

    1. Using NuGet, add package Microsot.AspNetCore.Identity.EntityFrameworkCore to Domain project and select the version corresponding to your dotnet runtime.
    2. Setup IdentityDBContext and create migration Reactivities$ dotnet ef migrations add "AddedIdentity" -p .\Persistence\ -s .\API\
    3. Run migration Reactivities/API$ dotnet watch run
    4. Using Nuget, add package Microsoft.AspNetCore.Identity.UI to API project and select the version corresponding to your dotnet runtime.
    5. Using Nuget, add package System.IdentityModel.Tokens.Jwt to Infrastructure project and select latest version.
    6. Using Nuget, add package Microsoft.AspnetCore.Authentication.JwtBearer to API project and select the version corresponding to your dotnet runtime.

  • AutoMapper