Skip to content

musyokaeric/dotnet-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Reactivities

A full-stack social event management application built with ASP.NET Core and React. Users can create activities, join events, manage their profiles, follow other users, and chat in real time.


Features

  • User registration and authentication using JWT
  • Role-based authorization
  • Create, edit, and delete activities
  • Join and leave activities
  • Activity filtering and pagination
  • User profiles
  • Upload and manage profile photos
  • Follow and unfollow users
  • Real-time chat using SignalR
  • Responsive user interface
  • Global error handling
  • Form validation
  • Secure API endpoints

Tech Stack

Backend

  • ASP.NET Core
  • Entity Framework Core
  • ASP.NET Identity
  • MediatR (CQRS)
  • FluentValidation
  • AutoMapper
  • SignalR
  • SQL Server

Frontend

  • React
  • TypeScript
  • React Router
  • TanStack Query
  • MobX
  • Axios
  • Material UI
  • React Hook Form
  • Zod

Architecture

The application follows Clean Architecture, separating responsibilities into independent layers.

API
│
├── Application
│     ├── Commands
│     ├── Queries
│     ├── DTOs
│     └── Validators
│
├── Domain
│     └── Entities
│
├── Persistence
│     ├── DbContext
│     └── Migrations
│
└── ClientApp
      └── React Frontend

Design Patterns

  • Clean Architecture
  • CQRS
  • Repository-free Entity Framework
  • Dependency Injection
  • Mediator Pattern
  • Unit of Work (via EF Core)
  • Domain-Driven Design concepts

Project Structure

Reactivities/API
│
├── Application/
├── Domain/
├── Infrastructure/
├── Middleware/
├── Migrations/
├── Persistence/
├── client-app/
└── README.md

Getting Started

Prerequisites

  • .NET SDK
  • Node.js
  • npm
  • SQL Server

Clone the repository

git clone https://github.com/musyokaeric/dotnet-react.git
cd dotnet-react

Backend

On VSCode

cd API
dotnet restore
dotnet ef database update
dotnet run

Or simply launch the application from Visual Studio

The API will start on:

https://localhost:5001

Frontend

cd client-app
npm install
npm run dev

The React application will start on:

https://localhost:3000 (mkcert)

Learning Outcomes

Through this project I gained hands-on experience with:

  • Building REST APIs using ASP.NET Core
  • Implementing Clean Architecture
  • Applying CQRS using MediatR
  • JWT authentication and ASP.NET Identity
  • Real-time communication with SignalR
  • State management with MobX
  • Data fetching with TanStack Query
  • Building reusable React components
  • Form validation with React Hook Form and Zod
  • Entity Framework Core migrations
  • Full-stack application deployment

Acknowledgements

This project was developed as part of the Complete Guide to Building an App with .NET Core and React by Neil Cummings.

The implementation has been extended with personal experimentation and serves as a learning project for mastering modern full-stack development with .NET and React.

About

A full-stack social event management application built with ASP.NET Core and React showcasing modern full-stack development practices, including Clean Architecture, CQRS, JWT authentication, SignalR, Entity Framework Core, and a React frontend powered by TypeScript and TanStack Query.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages