hydjing / activitiesapp

ActivitiesApp

Hi! this is my second .Net app about Acitivity tracking, you can join and leave message, and follow and chat to other members.

following tutorial Complete guide to building an app with .Net Core and React

Tech Stack

.Net Core 3.0.0

SQLite

React

MobX

Demo Screenshots

Homepage

Login Page

Register Page

List Page

Detail Page

Create Activity Page

Account Details Page

Section 2

• Intro to clean architecture
• using the dotnet CLI
• Reviewing the project templates
• Running the App
• EF Migrations
• Seeding data
• Postman
• Using git for source control

Section 3

• create-react-app by CLI
• Review the app
• React Concepts & Typescript
• React State
• Fetching data from the API
• CORS
• Semantic UI

Section 4

• CRUD API action
• Thin API controller
• Seeding more data
• Adding more migrations
• MediatR
• The CORS + MediatR Pattern

Section 5

• React UI folder structure
• Building the CRUD app(ui change only)
• React Hooks
• Forms in Reach
• Sematic UI

Section 6

• Refactor Axios service as agent.ts service
• refactoring the client app, added delay and loading for API actions

Section 7

• introduce mobx
• react context
• refactoring code to use mobx store

Section 8

• SPAs and routers, show different pages
• intro to react router
• adding more components

Section 9

• Components get styles
• semantic UI

Section 10

• API validation using data attributes
• API validation using fluent validation
• Exception and error handling
• Adding custom middleware
• Axios interceptor
• Throwing errors

Section 11

• Forms
• React final form
• validating forms with Revalidate

Section 12

• ASP.NET Core Identity
• JWT Token authentication
• Adding Infrastructure project

Section 13

• Axios interceptors
• Adding a Root MobX Store(common store)
• Submissin errors(modal errors)
• Modals

Section 14

• EF Relationships
• DTOs
• AutoMapper
• Eager/ Lazy loading related data

Section 15

• adding attedances to client side
• more Typescript interfaces

Section 16

• Photo storage option
• Adding photo accessor
• Uploading Photos
• set main photo
• deleting photos

Section 17

• adding a profile photo
• displaying user photos
• adding a photo upload widget
• React dropzone
• React Cropper
• Setting main photo
• delet photo

Section 18

• update profile bio and display name

Section 19

• know the SignalR
• ASPNET core SignalR
• @aspnet/signal for client side

Section 20

• implement the following and follower feature end to end

• selft referencing many to many relationship

  #Section 21

• Paging on the FE/client side

• Filtering on the FE/client side

• Sorting on the FE/client side

• update user profile page

Section 22

• swapping DB, need remove existing migration folder and drop activities schema
• publish the app to Digital Ocean and Azure
• imporve the app
• bonus content about header more safe
• practive building your own app

activitiesapp's Issues

demo images