<p align="center"> <img src="MovieShowcaseSPA/ClientApp/public/logo512.png" alt="React Logo" width="80px" height="80px"> </p> <h1 align="center"> Movie System React Domain Driven Design Example </h1> <h3 align="center"> A combination of libraries and frameworks integrated to showcase using React as the frontend and .NET as the backend </h3> <h4 align="center"> Note: This project is still a WIP </h4> </br> <!-- TABLE OF CONTENTS --> <h2 id="table-of-contents"> :book: Table of Contents</h2> <details open="open"> <summary>Table of Contents</summary> <ol> <li><a href="#about-the-project"> ➤ About The Project</a></li> <li><a href="#prerequisites"> ➤ Prerequisites</a></li> <li><a href="#folder-structure"> ➤ Folder Structure</a></li> <li><a href="#setup"> ➤ Setup</a></li> <li><a href="#config"> ➤ Config</a></li> </ol> </details>  <!-- ABOUT THE PROJECT --> <h2 id="about-the-project"> :pencil: About The Project</h2> <p align="justify"> 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) </p>  <!-- PREREQUISITES --> <h2 id="prerequisites"> :fork_and_knife: Prerequisites</h2> [](https://reactjs.org/docs/create-a-new-react-app.html) <br> [](https://dotnet.microsoft.com/en-us/) <br> [![build status][buildstatus-image]][buildstatus-url] [buildstatus-image]: https://github.com/ChristopherVR/MovieSystem-React-DDD-Example/blob/main/.github/workflows/badge.svg [buildstatus-url]: https://github.com/ChristopherVR/MovieSystem-React-DDD-Example/actions <!--This project is written mainly in C# and JavaScript programming languages. <br>--> The following open source packages are used in this project: * <a href="https://github.com/DapperLib/Dapper"> Dapper</a> * <a href="https://grpc.io/"> gRPC</a> * <a href="https://github.com/dotnet/aspnetcore"> .NET 6</a> * <a href="https://github.com/dotnet-architecture/eShopOnContainers"> eShopOnContainer</a> * <a href="https://reactjs.org/"> React</a> * <a href="https://reactjs.org/docs/create-a-new-react-app.html"> Create-React-App</a> * <a href="https://github.com/fkhadra/react-toastify"> React-Toastify</a> * <a href="https://github.com/twbs/bootstrap"> Bootstrap 5.1</a> * <a href="https://github.com/mdbootstrap/mdb-react-ui-kit"> MDB 5</a> * <a href="https://github.com/eslint/eslint"> ESLint</a> * <a href="https://github.com/prettier/prettier"> Prettier</a> * Human Activity Recognition documentation * React-select documentation  <!-- :paw_prints:--> <!-- FOLDER STRUCTURE --> <h2 id="folder-structure"> :cactus: Folder Structure</h2> ├───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 --> <h2 id="setup"> :floppy_disk: Setup</h2> <p> 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 ``` </p>  <!-- ROADMAP --> <h2 id="config"> :dart: Config</h2> <p align="justify"> 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/`. </p> 