raresica1234 / budget-planner Goto Github PK

Create an endpoint to update a list in the database.

Use the shared component to display the lists that the user owns in the first tab.

Create a store for fetching the lists.

Create the detail page of a list containing all the items.

This includes the UI, accessor and store

The UI should contain:

• header with list name
• list of items
• somewhere display the sum of all items

Consider using: https://mui.com/components/lists/

Add a search bar above the tabs that will affect the list that is displayed

Create a React app using the npm commands:

• npx create-react-app budget-planner-web --template typescript
• cd ./budget-planner-web
• npm i --save node-sass
• change all .css files to .scss

Create the register endpoint.

• Make user model (email and password)
• Setup database
• Use migrations
• Make controller
• Configure CORS

Create an endpoint that returns all the user's own lists.

The controller should be authorized.

Create the login page.

• create login page
• add components for input
• add register button
• add store
• make endpoint call
• on login, redirect to main page (empty route) and store token in cookies using a 3rd party npm lib

Create an endpoint for retrieving:

• all the items of a list
• the sum of their cost
• its users (id + email)

Add a create button to the list and add an edit dialog for adding the list.

Consider using:

• https://mui.com/components/floating-action-button/
• https://mui.com/components/dialogs/

When accessing a list, have an edit button visible to open the edit dialog in order to update the list.

Create an edit dialog to add an item using the API.

Consider using:

• https://mui.com/components/floating-action-button/
• https://mui.com/components/dialogs/

Create a ASP.NET Core API project and add the following packages:

• Microsoft.AspNetCore.Authentication.JwtBearer
• Microsoft.AspNetCore.Identity
• Microsoft.AspNetCore.Identity.EntityFrameworkCore
• Microsoft.EntityFrameworkCore
• Microsoft.EntityFrameworkCore.SqlServer
• Microsoft.EntityFrameworkCore.Tools

The visitor should not be able to modify a list's items

Create the login endpoint by adding a method to the controller.

Will return a token

This task is responsible for making sure the projects follow the same structure and that there is a foundation on how the project should be executed and configured.

Add toast service using stackable snakbars

Validate users for create/update list to not contain the owner of the list which is added automatically on backend.

Create an endpoint to add a new list to the database.

Create the main page of the application that will contain the title of the application and 2 tabs, each representing a list container.

Consider using:

• https://mui.com/components/app-bar/
• https://mui.com/components/tabs/

Create an endpoint to remove an item from the database.

Check if the user has edit access to the list.

Create the register page.

• use routing
• create register page
• add components for input
• add store
• make endpoint call
• on register, show success message and redirect to login (empty route)

Create an endpoint to add an item to the database.

Check if the user has edit access to the list.

Add search for both get lists enpoint

The library for the UI has been decide: https://mui.com/components/

For the actual design, we should keep in mind:

• The application should firstly be dark mode
• We could use material design

Decision: Using material design

In models, add the entities related to items and entities:

Item

• Id: Guid
• Name: string
• Price: decimal
• ListId: Guid
• List: List
• CreatedAt: Date
• UpdatedAt: Date

List

• Id: Guid
• Name: string
• CreatedAt: Date
• UpdatedAt: Date

ListUser

• ListId: Guid
• UserId: Guid
• Type: ListUserType

ListUserType is an enum that has the following values: Owner, Contribuitor, Visitor

Also, add DB sets and add a migration

Check if a user should be able to access and modify a list before updating it.

Use the shared component to display the lists where the user is a contributor or a viewer in the second tab.

Create a store for fetching the lists.

The register page is currently incomplete. The validations are on the server, so the only thing needed is to print the error messages from the requests.

Create an endpoint that returns all the user's lists where he is a contributor or viewer.

The controller should be authorized.

Use the edit dialog to update an item using the API.

Add a delete button in the edit dialog and on click open a confirmation dialog and use the API to remove the item from the list.

Consider using:

• https://mui.com/components/dialogs/
• https://mui.com/components/floating-action-button/

Create a react component that displays a given list of lists that is reusable, having a parameter for the lists to display.

Consider using: https://mui.com/components/lists/

Create an endpoint to update an item in the database.

Check if the user has edit access to the list.