.NETReact

.NET Core with Identity & JWT for Authentication, React Hooks with TypeScript and MobX for state management Cloudinary for Image uploads, transformations, ect.

Frontend Packages

React TypeScript

Semantic UI

New framework for styling

MobX

State Management MobX Developer Tools (Google Chrome)/ terrible at the moment

Axios

For api on frontend

React Router Dom

Standard Routing

Cloudinary

Image Uploads

React DropZone

Drag and drop images for upload

React Cropper

To resize image to perfection before upload

date-fns & React-Widgets

for nice date and time picker

Revalidate

Client side error handling

Final Form

New form control

React Toastify

For nice user messages

uuid

safe access and control of user data

backend

CTRL + . => quick fix menu

Backend Packages

Identity & Asp Net CORE

ASPNetCoreIdentity & UI User & Role Manager Salt & Hash (Secure) Passwords

JWT Tokens for authentication

Infrastructure folder add Jwt=> System.IdentityModel.Token.Jwt jtw.io => postman for jwt

Api folder add Microsoft.AspNetCore.Authentication.JwtBearer

Asp Net Core

Authentication/ infrustructure

Entity

Design and Security

Fluent Validation (AspCoreNet)

Security/ Validation

Auto Mapper

MediatR

Thin API Controllers => Dependency Injection Application Folder

Sqlite

for light configuration for database

config

User Secrets 'dotnet user-secrets': Dev Only init, clear, list, remove, set dotnet user-secrets init: DEV in APi folder dotnet user-secrets set "TokenKey" "Super Secret Key"

API Folder

the "Server" Controls the application /API/Startup.cs => Server dotnet watch run from here in dev

API Controllers

API/Controllers/{RouteName}Controller handles where to send the requests => Application

Application Folder

Business Logic

Auto Mapper

API Handlers

Activities, Errors, User Fluent Validation (AspCoreNet) => Security/ Validation

Domain

Identity (AspCoreNet)

Persistance

DataBase Logic Takes care of context, seeds, data for application

Sqlite => for light configuration for database (To Start)

Entity

Config

Proxies

Seeding Data

To Seed, delete db and start project

(Many ways, most efficiant;) add 'Seed.cs' to Persistance folder, create structure to Domain in 'Activity.cs' call the seed in Persistance 'DataContext.cs' command terminal 'dotnet ef migrations add "'update-name'" -p Persistence/ -s API/' Drop DB: dotnet ef database drop -p Persistence/ -s API/ to make new, run from api folder dotnet watch run

Infrustructure Folder

For anything needed across all backend folders or dont fit Security JWT

adding folder to project & sln

Step 1: creates new class library to work from in main folder 'dotnet new classlib -n Infrastructure' step 2: adding to projects sln 'dotnet sln add Infrastructure/' step 3: add dependencies 'cd Infrastructure/', 'dotnet add reference ../Application/' step 4: finish setting up dependencies 'cd ..' , 'cd API/' , 'dotnet add reference ../Infrastructure/' step 5: Restore project to maintain consistancy 'dotnet restore'

CQRS

/Application/{API/RouteName}/{Create/edit} : Like models but with middleware handles all the controllers abilities- formats the request for specification

API/Controllers/{RouteName}Controller handles where to send the requests => Application

adding env var to dotnet

in api folder, ' dotnet user-secrets set "varName" "varValue" ' dotnet user-secrets list , (to view all user secrets in specified location)

Cloudinary

For photo uploads

set catagery within env in api folder using ':' before variable name cd API/ , dotnet user-secrets set "Cloudinary:CloudName" "varValue" dotnet user-secrets set "Cloudinary:ApiKey" "varValue" dotnet user-secrets set "Cloudinary:ApiSecret" "varValue"

        dotnet user-secrets list      , (to view all user secrets in specified location)

publishing to azure

SQL Server

delete wwwroot, create backend release of frontend; dotnet build Make sure to run: cd client-app/, 'npm run build' then

Delete publish folder in API/ dotnet publish -c Release -o API/publish --self-contained false .NETReact.sln