Movie System React Domain Driven Design Example

A combination of libraries and frameworks integrated to showcase using React as the frontend and .NET as the backend

Note: This project is still a WIP

📖 Table of Contents

Table of Contents

1. ➤ About The Project
2. ➤ Prerequisites
3. ➤ Folder Structure
4. ➤ Setup
5. ➤ Config

📝 About The Project

This project aims to integrate different frameworks and libraries used (Create React App template with TypeScript and Microsoft's eShopContainer DDD project) to demonstrate a movie system database with basic CRUD functionality folowing code-with-mosh Mastering React course. The idea of this project is to demonstrate the use of:

• React with TypeScript
• C# with .NET 7
• Microservices approach with Domain Driven Design
• Test Driven Development (Backend)
• Domain & Integration Events (Backend)

🍴 Prerequisites

The following open source packages are used in this project:

• Dapper
• gRPC
• .NET 6
• eShopOnContainer
• React
• Create-React-App
• React-Toastify
• Bootstrap 5.1
• MDB 5
• ESLint
• Prettier
• Human Activity Recognition documentation
• React-select documentation

🌵 Folder Structure

├───github │ └───workflows ├───MovieShowcaseSPA │ ├───ClientApp │ │ ├───public │ │ └───src │ │ ├───components │ │ │ └───common │ │ ├───context │ │ ├───interfaces │ │ ├───services │ │ └───utils │ ├───Controllers │ ├───Enums │ ├───Models │ ├───Pages │ ├───Properties │ ├───Protos │ ├───Services │ └───wwwroot │ ├───css │ └───js ├───Services │ └───MovieSystem │ ├───MovieSystem.API │ │ ├───Application │ │ │ ├───Behaviors │ │ │ ├───Commands │ │ │ ├───DomainEventHandlers │ │ │ │ └───UserCreated │ │ │ ├───Queries │ │ │ └───Validations │ │ ├───Infrastructure │ │ │ ├───AutofacModules │ │ │ └───Options │ │ ├───Migrations │ │ ├───Properties │ │ ├───Protos │ │ └───Services │ ├───MovieSystem.Domain │ │ ├───AggregatesModel │ │ │ ├───GenreAggregate │ │ │ ├───MovieAggregate │ │ │ └───UserAggregate │ │ ├───Events │ │ ├───Exceptions │ │ └───SeedWork │ ├───MovieSystem.Infrastructure │ │ ├───EntityConfigurations │ │ ├───Extensions │ │ └───Repositories │ └───MovieSystem.UnitTests └───Tests └───MoveShowcaseWeb.Tests

💾 Setup

Clone the git repo and install dependencies.

Navigate to the ClientApp for the React-app:

npm ci

You can then run following scripts for local development

npm run build  // builds the React app 

npm test  // run unit tests

npm lint  // check for any linting issues

Navigate to the MoveShowcaseSPA folder:

dotnet run watch // builds the project and enables hot-reload

Navigate to the Services\MovieSystem\MovieSystem.API folder

dotnet run watch // builds the project and enables hot-reload

🎯 Config

For the MovieShowcaseSPA Web project the following app settings can be configured:

• DemoMode: indicates whether authentication should be bypassed. Default user credentials will be used. Possible values are true or false.
• Key: Indicates the Auth Key for the JWT Token based Authentication that will be used. This is a required value and needs to be 128 bits long.
• Authority: Indicates the Authority and Issuer that will be used to valid JWT tokens. Example http://localhost:7235/.
• Services:MovieSystem: Indicates the URL for the MovieSystem gRPC client. Example http://moviesystemapi
• Services:ReactAppURL: Indicates the URL where the React-app is hosted. This is used for setting the CORS policy. Example http://localhost:3000/.