SportProfiles

Solution Architecture Approach

Target Release(s)

Future

JIRAs

 

Document Owner

Dates

High Level Solution

Target:   

Detailed Solution

Target:   

Solution Review

Review session recording(s):

 

 

1. General/Functional Description

SportProfiles will be a social networking site for the athletes, sport agents, and sport fanatics all over the world to create their profile that describes and showcase their talents.

After creating an account, the members should be able to setup their profile information which include their sporting skills, educational background, and employment experience. They also, should have the ability to make available pictures and videos from third party web site like Instagram and YouTube as a way to showcase the talent.

There should also be a way for members to connect to one another to communicate. For example, an amateur or professional athlete should be able to reach out to an agent and announce his/her talent and availability. Likewise, an agent should be able to reach out to athletes that they find interesting while they are browsing and searching on the site.

In addition to the web site functionalities mention above, a section on the site should be provided to promote other related content including site guide, sponsorship, and so on.   

 

2. Problem Statement

Although there exist some similar web sites on the internet, but there aren’t any particular one that offers the social networking aspect features that we are looking to do here for this site. And none that could be found that had a mobile application that supported the iPhone and Android phones. This is important, since the expected users are those that are heavily on the mobile phones.

We will need to create a web app with a user interfaces (UI) that supports most modern web browsers (such as safari, edge, google, and Firefox) that are often installed on desktops, laptops, and tablets. In addition, we will need to create a mobile application with a UI that supports the Apple iOS and Android phones.

 

3. In Scope

Requirements

Fulfilled By

Known Technology

 Notes

Req. #

Database Modeling, Design & Implementation

R1.0

Conceptual data model

Database development team

R1.1

Logical data model

Database development team

R1.2

Physical data model

Database development team

         Create the RESTful API (Micro Services) backend

R2.0

Develop the services that will perform the operations and functionalities that is required by the web and mobile applications including retrieving and storing data. 

Backend development team.

         Create the web and mobile applications (frontend)

R3.0

Develop the UI for the web application (with support for Chromium based browsers)

UI development team

R3.1

Develop the UI for the mobile application (with support for iOS and Android)

UI development team

 

4. Out of Scope

  • For this initial version, we will not provide a build in photos gallery. Instead, we will provide away to redirect the viewer to the member’s Instagram public photos.
  • In a future version, adding a build in photos gallery to manage the member’s photos can be done. 

 

5. Assumptions

  • Per instructions, it is assumed that members will set up their public photos by logging in to their Instagram account and follow the procedures that allows them to do so. And they will provide their Instagram URL to be configured in the SportProfiles app’s settings.
  • Also, per instructions, it is assumed that the members will set up their YouTube channel Identifier with videos. And then provide the channel Identifier to be configured in the SportProfiles app’s settings.

 

6. Constraints

  • Does not apply.

 

7. Solution Options

7.1 Short term/Strategic

  • Does not apply.

7.2 Solution details

The solution entails completing the following 3 major parts:

  1. Database modeling, design, and & Implementation
  2. Develop the backend (business logic) using Representational State Transfer (REST) API (micro services) technology
  3. Develop the UI for the web and mobile applications 

How does these parts all tied up? The figure below demonstrates the interconnection of each part of what makes up the overall system.


 

7.2.1 Database modeling, design, & Implementation

To design and implement the database, the business analyst team and database designer team must work together to identify from the business requirements the information or data that will need to be collected from the users. The information identified can then be used to do the following data modeling tasks:  

  • Create the conceptual data model
  • Create the Logical data model
  • Create the physical data model

7.2.1.1 Conceptual data model

Conceptually, the following Entity Relationship (ER) diagram represents the entities that maps out the kind of data that is expected to support the business requirement for the system. 

As you can see from the diagram, each member has a number of different kinds of related information data such as education, employment, contacts, and so on.

7.2.1.2 Logical data model

In this section, we use the diagram above to create a less-abstract logical one. In addition to showing how the entities are related, it also describes the data from a technical perspective. It defines the data structure and provide details on attributes, keys, data types and other characteristics.

Logiccal data model ER diagram (continued)

Logical data model ER diagram (continued)

7.2.1.3 Physical data model

In this section, we are using the logical diagram above to create a new diagram that shows all table structures, including column name, data type, column constraints, primary key, foreign key, and relationships between the tables.

Physical data model ER diagram

Physical data model ER diagram (continued)

Physical data model ER diagram (continued)

7.2.1.4 Relational Database Management System (RDBMS) and hosting considerations

The type of RDBMS to consider may depend on the existing or planned development environment. For example, if you are or planning on developing your backend applications using Java technology, you might consider using a MySQL or an Oracle RDBMS.  But, if your current environment or plan on developing backends using .NET technology, then you might consider Microsoft SQL Server. However, with the appropriate database drivers like ODBC and JDBC, you can enable communication between the different RDBMS systems regardless of the development environment.

RDBMS hosting considerations will depend on the type of computing environment such as the cloud versus on-premise. With the on-premise option, you are responsible for not just the RDBMS software (such as MS SQL Server, Oracle, MySQL, etc.) but also the hardware it will be running on. But you will have complete control of operations and maintenance.

With the cloud, you have many hosting options that are based on platform as a service ((PaaS). A couple of them worth considering are:

·         Azure SQL Database (based on the latest stable version of Microsoft SQL Server)

·         Amazon Relational Database Service (Amazon RDS) – this one allows you to pick from PostgreSQL, MySQL, Oracle, and SQL Server.

PaaS handles most of the database management functions such as upgrading, patching, backups, and monitoring without user involvement.


7.2.2 Develop the backend (business logic) using RESTful API (micro services) technology

Now, that we have defined the required data that is needed for the system, we can define and design the backend with the services and operations that will be used by the (web and mobile) UI applications. 

7.2.2.1 – The API services

The API services for this social networking system can be categorized by the following parts:

·         Account – this is a list of interfaces containing member account functionalities such as registering and logging users.

·         Connection – Contains API functionalities to manage and control in-between member connectivity.

·         Member – Contains member management API functionalities.

·         Message – Contains interfaces with functionalities for messaging or communication between members.

·         Settings - this is a list of interfaces to manage applications settings and user preferences.

·         Common – A collection of common interfaces and shared functionalities used by the system.

Account Service

HTTP Method - Request and Response Schemas:

 

POST:  /services/Account/login

Request body (JSON format):

Example Value | Schema:

{

     “email”: “string”,

     “password”: “string”

}

                                      Response:

                                                Example Value | Schema:

                                                {

  "name": "string",

  "title": "string",

  "email": "string",

  "memberID": "string",

  "picturePath": "string",

  "accessToken": "string",

  "expiredDate": "2023-01-22T00:30:53.230Z",

  "currentStatus": "string"

}

 

POST:  /services/Account/loginNewRegisteredUser

Request body (JSON format):

Example Value | Schema:

{

     “email”: “string”,

     “code”: “string”

}

                                      Response:

                                                Example Value | Schema:

                                                {

  "name": "string",

  "title": "string",

  "email": "string",

  "memberID": "string",

  "picturePath": "string",

  "accessToken": "string",

  "expiredDate": "2023-01-22T00:30:53.230Z",

  "currentStatus": "string"

}

 

POST:  /services/Account/refreshLogin

Request parameter: accessToken (string query),

                                     Response:

                                                Example Value | Schema:

                                                {

  "name": "string",

  "title": "string",

  "email": "string",

  "memberID": "string",

  "picturePath": "string",

  "accessToken": "string",

  "expiredDate": "2023-01-22T00:30:53.230Z",

  "currentStatus": "string"

}

 

Connection Service

HTTP Method - Request and Response Schemas:

 

GET:  /services/Connection/getMemberConnections

Request parameter: memberID (integer query)

                    show (string query)

                                    Response:

                                                Example Value | Schema:

                                                {

    "friendName": "string",

    "firstName": "string",

    "location": "string",

    "picturePath": "string",

    "connectionID": "string",

    "showType": "string",

    "status": "string",

    "titleDesc": "string",

    "params": "string",

    "paramsAV": "string",

    "email": "string",

    "labelText": "string",

    "nameAndID": "string"

 }

GET:  /services/Connection/getMemberConnectionSuggestions

Request parameter: memberID (integer query)

                                    Response:

                                                Example Value | Schema:

                                                {

    "friendName": "string",

    "firstName": "string",

    "location": "string",

    "picturePath": "string",

    "connectionID": "string",

    "showType": "string",

    "status": "string",

    "titleDesc": "string",

    "params": "string",

    "paramsAV": "string",

    "email": "string",

    "labelText": "string",

    "nameAndID": "string"

  }

 

PUT:  /services/Connection/sendRequestConnection

Request parameter: memberID (integer query)

                                    Response: “success” (string)

 

 

GET:  /services/Connection/searchMemberConnections

Request parameter: memberID (integer query)

                    searchText (string query)

                                    Response:

                                                Example Value | Schema:

                                                {

    "friendName": "string",

    "firstName": "string",

    "location": "string",

    "picturePath": "string",

    "connectionID": "string",

    "showType": "string",

    "status": "string",

    "titleDesc": "string",

    "params": "string",

    "paramsAV": "string",

    "email": "string",

    "labelText": "string",

    "nameAndID": "string"

                                                }

GET: /services/Connection/GetMemberNetworkInviteConnectionList

GET: /services/Connection/GetRequestsList

GET: /services/Connection/GetMembersBySearchType

GET: /services/Connection/GetSearchConnections

GET: /services/Connection/GetMemberPhoneBook

GET: /services/Connection/GetMemberBrowsedContacts

GET: /services/Connection/SearchMemberByType

PUT: /services/Connection/AcceptRequest

PUT: /services/Connection/RejectRequest

DELETE: /services/Connection/DeleteConnection

GET: /services/Connection/GetEntityBySearchType

GET: /services/Connection/ConnectionSearchResults

GET: /services/Connection/PeopleSearchResults

GET: /services/Connection/NetworkSearchResults

GET: /services/Connection/EventSearchResults

GET: /services/Connection/SearchResults

GET: /services/Connection/SearchAllResults

GET: /services/Connection/GetPeopleIFollow

GET: /services/Connection/GetWhosFollowingMe

POST: /services/Connection/followMember

POST: /services/Connection/UnfollowMember

GET: /services/Connection/IsFollowingConnection                     

 

Member Service

HTTP Method - Request and Response Schemas:

 

GET:  /services/Member/ValidateNewRegisteredUser

Request parameter: email (string query)

                    code (string query)

                                    Response:

                                                Example Value | Schema:

                                                {

    "memberId": "string",

    "email": "string",

    "firstName": "string",

    "lastName": "string",

    "passWord": "string",

    "userImage": "string",

    "title": "string"

 }

 

POST:  /services/Member/SavePosts/{memberID}/{postID}

Request parameter: memberID (integer path)

                                postID (integer path)

                                postMessage (string query)

                                    Response: “success” (string)

                                               

GET:  /services/Member/GetRecentPostResponses/{postID}

Request parameter: postID (integer path)

                                    Response:

                                                Example Value | Schema

                                                {

    "postResponseID": 0,

    "postID": 0,

    "description": "string",

    "dateResponded": "string",

    "memberID": 0,

    "memberName": "string",

    "firstName": "string",

    "picturePath": "string"

  }

 

 

GET:  /services/Member/GetRecentPosts/{memberID}

Request parameter: memberID (integer path)

                                    Response:

                                                Example Value | Schema:

                                                {

    "postID": "string",

    "title": "string",

    "description": "string",

    "datePosted": "string",

    "attachFile": "string",

    "memberID": "string",

    "picturePath": "string",

    "memberName": "string",

    "firstName": "string",

    "childPostCnt": "string"

}

 

GET: /services/Member/getRecentNews

GET: /services/Member/GetMemberGeneralInfoV2/{memberID}

GET: /services/Member/GetMemberDates/{memberID}

GET: /services/Member/GetInterestDescription/{interestID}

GET: /services/Member/GetMemberPersonalInfo/{memberID}

GET: /services/Member/GetMemberContactInfo/{memberID}

GET: /services/Member/GetMemberEducationInfo/{memberID}

GET: /services/Member/GetMemberEmploymentInfo/{memberID}

POST: /services/Member/SaveMemberGeneralInfo/{memberID}

POST: /services/Member/SaveMemberPersonalInfo

POST: /services/Member/SaveMemberContactInfo/{memberID}

POST: /services/Member/SaveMemberContactInfoV2/{memberID}

POST: /services/Member/SendFriendRequest/{memberID}

GET: /services/Member/IsContactRequestSent/{memberID}/{toMemberID}

GET: /services/Member/IsMember

GET: /services/Member/IsFriendByEmail/{memberID}

GET: /services/Member/IsFriendByContactID/{memberID}/{contactID}

POST: /services/Member/SaveBasicProfileInfo

GET: /services/Member/GetMemberInfoByEmail}

GET: /services/Member/GetRecentActivities/{memberID}

GET: /services/Member/GetMemberPosts/{memberID}

GET: /services/Member/GetMemberPostResponses/{postID}

POST: /services/Member/CreateMemberPost/{memberID}

GET: /services/Member/CreatePostComment/{memberID}/{postID}

GET: /services/Member/GetMemberWorkExperience/{memberID}

GET: /services/Member/GetMemberInterests

POST: /services/Member/AddMemberSchool/{memberID}

PUT: /services/Member/UpdateMemberSchool/{memberID}

DELETE: /services/Member/RemoveMemberSchool

POST: /services/Member/AddWorkExperience/{memberID}

PUT: /services/Member/UpdateMemberWorkExperience/{memberID}

DELETE: /services/Member/RemoveMemberWorkExperience

GET: /services/Member/IsMemberActive/{memberID}

GET: /services/Member/GetMemberEmail/{memberID}

POST: /services/Member/AddMemberActivity/{memberID}

GET: /services/Member/GetRegisteredMembers/{status}

POST: /services/Member/SendAdvertisementInfo

GET: /services/Member/ResetPassword

GET: /services/Member/GetYoutubeChannel/{memberID}

PUT: /services/Member/SetYoutubeChannel

GET: /services/Member/GetInstagramURL/{memberID}

PUT: /services/Member/SetInstagramURL

GET: /services/Member/IsResetCodeExpired

GET: /services/Member/ChangePassword

POST: /services/Member/UploadProfilePhoto/{memberID}

GET: /services/Member/SetMemberStatus

GET: /services/Member/GetVideoPlayList/{memberId}

GET: /services/Member/GetVideosList/{playerListID}

 

Message Service

HTTP Method - Request and Response Schemas:

 

GET:  /services/Message/GetMemberNotifications/{memberID}

Request parameter: memberID (integer path)

                    showType (string query)

                                    Response:

                                                Example Value | Schema:

                                                {

    "notificationId": 0,

    "subject": "string",

    "notification": "string",

    "sentDate": "2023-01-22T05:37:04.593Z",

    "status": true

}

 

GET:  /services/Message/GetMemberMessages/{memberID}

Request parameter: memberID (integer path)

                                type (string query)

                                showType (string query)

                                    Response:

                                                Example Value | Schema:

                                                {

   "attachement": "string",

    "body": "string",

    "contactName": "string",

    "contactImage": "string",

    "senderImage": "string",

    "contactID": "string",

    "flagLevel": "string",

    "importanceLevel": "string",

    "messageID": "string",

    "messageState": "string",

    "senderID": "string",

    "subject": "string",

    "msgDate": "string",

    "fromID": "string",

    "firstName": "string",

    "fullBody": "string"

}

 

                                               

GET:  /services/Message/GetTotalUnreadMessages/{memberID}

Request parameter: memberID (integer path)

                                    Response:

                                                Example Value | Schema

                                                0 (an integer)

                       

                        POST: /services/Message/CreateMessage

POST: /services/Message/CreateMessageBySource

PUT: /services/Message/ToggleNotificationState

DELETE: /services/Message/DeleteNotification/{notificationID}/{memberID}

PUT: /services/Message/ToggleMessageState

GET: /services/Message/GetNotificationByID/{nid}

GET: /services/Message/GetMessageInfoByID/{msgID}

DELETE: /services/Message/DeleteMoveMessage/{msgID}

DELETE: /services/Message/DeleteMessage/{msgID}

GET: /services/Message/SearchMessages/{memberID}

DELETE: /services/Message/EmptyMessageFolders/{mID}

 

Settings Service

HTTP Method - Request and Response Schemas:

 

POST:  /services/Setting/GetMemberNameInfo/{memberID}

Request parameter: memberID (integer path)

                                    Response:

                                                Example Value | Schema:

                                                {

    "firstName": "string",

    "lastName": "string",

    "middleName": "string",

    "email": "string",

    "securityQuestion": "string",

    "securityAnswer": "string",

    "passWord": "string"

}

 

PUT:  /services/Setting/SaveMemberNameInfo/{memberID}

Request parameter: memberID (integer path)

Example Value | Schema:

{

     “firstName”: “string”,

     “middleName”: “string”,

     “lastName”: “string”

}

                                      Response: “success” (string)

 

PUT:  /services/Setting/SaveMemberEmailInfo/{memberID}

Request parameter: memberID (integer path)

                               Email (string query)

                                      Response: “success” (string)

 

PUT: /services/Setting/SavePasswordInfo

PUT: /services/Setting/SaveSecurityQuestionInfo/{memberID}

PUT: /services/Setting/DeactivateAccount/{memberID}

GET: /services/Setting/GetMemberNotifications/{memberID}

PUT: /services/Setting/SaveNotificationSettings/{memberID}

GET: /services/Setting/GetProfileSettings/{memberID}

PUT: /services/Setting/SaveProfileSettings/{memberID}

GET: /services/Setting/GetPrivacySearchSettings/{memberID}

PUT: /services/Setting/SavePrivacySearchSettings/{memberID}

 

Common Service

HTTP Method - Request and Response Schemas:

 

GET:  /services/Common/EncryptString

Request parameter: stringToEncrypt (string query)

                                    Response: “stringEncrypted” (string)

                                               

GET:  /services/Common/DecryptString

Request parameter: stringToDecrypt (string query)

                                    Response: “DecryptedString” (string)

                       

GET:  /services/Common/GetStates

Request

                                    Response:

Example Value | Schema:

{

     “name”: “string”,

     “abbreviation”: “string”,

     “stateID”: integer

}

 

PUT:  /services/Common/logs

Request parameter: message (string query)

                               stack (string query)

                                      Response: “success” (string)

 

GET:  /services/Common/GetSportsList

Request:

                                    Response:

Example Value | Schema:

{

     “id”: “string”,

     “name”: “string”,

     “description”: “string”

}

 

GET:  /services/Common/GetSchoolByState

Request parameter: state (string query)

                               institutionType (string query)

                                    Response:

Example Value | Schema:

{

     “schoolID”: “string”,

     “schoolName”: “string”,

}

 

GET:  /services/Common/GetAds

Request parameter: type (string query)

                                    Response:

Example Value | Schema:

{

    "id": 0,

    "name": "string",

    "headerText": "string",

    "postingDate": "2023-01-22T08:58:35.035Z",

    "textField": "string",

    "navigateUrl": "string",

    "imageUrl": "string",

    "type": "string"

}

 

 

7.2.2.2 – API Service Security

After a user is authenticated using the HTTP request services/Account/login URI (see account service above), as part of the response, a JWT token string is returned and is stored in the application session temporary storage. This JWT token is used to authorized access to the service operations.

 

To get a possible successful response from an API service request, you must include the JWT token string as part of the request authorization header prepending the keywork “Bearer”.  For an example, using Curl statement:

 

·         curl -H 'Accept: application/json' -H "Authorization: Bearer ${TOKEN}" https://{hostname}/api/myresource

 

where TOKEN is the variable holding the token string value.

 

7.2.2.3 – The API services Technology consideration

Application development

RESTful API (micro services) development will depend on your existing or preferred application development environment. Two of the popular cross-platform environments include Microsoft .NET Core and Java.

.NET Core to develop API services offers incredible benefits including cloud-based configurations, rapid development, and cross-platform support. It includes the Entity Framework (EF) Core which is a lightweight, extensible, open source and cross-platform version of the Microsoft’s popular EF data access technology. EF Core basically serve as an object-relational mapper (ORM) which enables .NET developers to work with a database using .NET objects and helps them by eliminating the need for most of the data-access code that typically needs to be written.

The Java world also offers some excellent frameworks for developing microservices. One of the popular considerations is the Spring Boot framework. It gives developers an extremely fast way to build and deploy applications and services. It also offers the popular Hibernate java framework and ORM tool which is used to provide the implementation of the Java Persistence API (JPA) methods.  JPA is an abstraction that is used to map the java object with the database making it easy to implement your API to interact with a database.

Hosting and deployment considerations

Beside the development environment to create the API services, it is also worth discussing where the developed API services will be hosted or deployed such as the cloud or on-premise.  As mentioned earlier, with on-premise, you will be responsible for configuring and maintaining the servers that the web API will be deployed.

With the cloud, you do have many options even from the different vendors. With Microsoft Azure, you have a couple of options:

·         Using infrastructure as a service (IaaS) – obtaining Virtual Machine (VM) – However, you will be responsible for not just the deployment of the app, but also for maintaining the server as you would similar to an on-premise environment.

·         Using platform as a server (PaaS) – by creating an Azure Web Apps Service – this offers a hosting service to deploy your web apps including API web services. And you don’t have to worry about the configuration and maintenance of servers.

AWS delivers reliable, scalable computing resources on which to host web apps by allowing you to use a number of AWS components alone or combined. These components include Amazon EC2 for computing, Amazon S3 for storage, Amazon RDS for database.

 

7.2.3 - Develop the UI for the web and mobile applications 

Now, that we have define our HTTP web service API, we can begin discussions on the designing and development of the UIs and functionalities that will consume the them. 

Text Box: LOGO Home Connections^ Messages Settings^

The goal here is to create an attractive and aesthetically appealing interface that is accessible and designed for potential members. For an existing development environment, they are most likely to have something in place in terms of how they want their web and mobile applications to look in terms of general theme and so on. But, for new application such as this one it may require extensive research and doing to get this done right. While striving to meet requirement, the five major elements to keep in mind in designing the application for both web and mobile is:

·         User interface,

·         Usability,

·         Content,   

·         Creativity,

·         Accessibility

7.2.3.1 Sketching the Application Components

When sketching the application, the same rule will apply for both the web and mobile application. We are basically interested in the navigation, branding, forms (or pages), buttons, and any other interactive elements. To help with the sketch, we can take a look at the requirements and come up with the major components that define the system:

·         Account component – includes login, register, and forgot password screens.

·         Home component – includes menu and menu items to allow navigation to other components like Messages, Members, Connections, and Settings.

·         Connections component – includes menu items to view list of member’s connections, list of members requesting connection, search for connections, people following list, etc.

·         Members component – includes menu items to view and edit member profile related information.

·         Messages component – includes screen to allow creating new messages, view of messages inbox, and ability to response and delete messages.

·         Settings component – to manage member & site configurations

Account component


Home component

After a successful login, the user is to be taken to the Home page which consist mainly of navigational links that allows the user to use the app’s functionalities and components. The home component is separated into 5 sections (see sketch below):

·         The Header - contains menu bar with the menu items – it remains visible throughout the login session. Note, in the header, clicking home can return 

·         The Footer – contains copyright information – it too remains visible throughout the login session.

·         Recent News – a sports related news section of current activities in the sports world. – located on the top left section of the screen under the menu bar.

·         Recent Post – a list of most recent member posts – located underneath the Recent News section.

·         Site Guide – an area that acts as a site guidance with links that point to help – located on top right corner of screen under the menu bar

·         Site Sponsor – an area that can be used to display advertisements from third party site. For example, google ads. – located under the Site Guide section, 


Connections component

Text Box: ConnectionsThe connections component is accessible via the connections’ menu item located at the header menu found in the home component. Clicking on the connection link reveals a drop down with menu items:

Text Box: My Connections Requests Find Connections People I follow People who are following me
 

 

 

 


To do: sketch screen for each menu items for the connection’s component.

Member component

The member component is accessible via the members’ menu item located at the header menu found in the home component. Clicking on the member link reveals the drop down with the menu items:

 


To do: sketch screen for each menu items for the members component.

Messages component

The messages component is accessible via the messages’ menu item located at the header menu found in the home component. Clicking on the messages link reveals the messages screen with the list of messages along with links to read and response to messages.  You also can create new and delete messages.

To do: sketch screen for the message component.

Settings component

The Settings component is accessible via the settings’ menu item located at the header menu found in the home component. Clicking on the settings link reveals the drop down with the menu items:

 


To do: sketch screen for each menu items for the settings component.

 

7.2.3.2 Technology consideration

Here we are interested in using a client-side framework for building a rich, interactive, and modern web application.  There are three that are worthy of considerations: Angular, React, Blazor.  And it is worth mentioning that it may come down to how your development environment is structured. For example, if you are a Microsoft .NET shop, you might consider a framework like Blazor where you can take advantage of utilizing C#. Here is more on the three frameworks:

Angular

Angular is a typescript-based frontend framework rated one of the most popular open-source web frameworks in the world. It helps with the creation of interactive user interfaces, single-page web apps, advanced web apps, and so on.  It used Typescript programming language which is a superset of the popular JavaScript. It uses Model-View-Controller which separates program logic from user interface controls. It is suitable for both web and mobile development.  The application code consists of different Angular components, each being written in four separate files: Typescript to implement the components, and HTML file to define the view, a CSS file to define the stylistic features, and a special file for testing purposes. Also, angular components are reusable.

React

React is a JavaScript library for UI development. React is based on JavaScript ES6+ combined with JSX script. JSX is an extension for syntax, which makes a JavaScript code resemble that written in HTML. The architecture of React app is component-based. The code is made of React components, which are rendered with React DOM library and directed in two ways: functional (with a function that returns JSX)

Blazor

Blazon is a Microsoft UI framework that follows a unique approach, leveraging C# .NET and WebAssembly to create single page applications that run-in web browsers It essentially allows a developer to build interactive client-side applications with HTML, CSS, and C#. 

On the mobile device side, to develop an iOS or android native application, you would need to consider different development tools for each platform. To avoid this, you should consider Microsoft’s .NET Multi-platform App UI (.NET MAUI).

.NET MAUI

Using .NET MAUI, you can develop apps that can run on Android, iOS, macOS, and Windows from a single shared code-base.  You can create multi-platform apps using a single project using C# and XAM., but you can add platform-specific source code and resources if necessary. You are sharing UI layout and design across platforms. You are also sharing code, tests, and business logic across platforms.

 

7.3 Component View/Work Flow

 

7.4 Pros

 

7.5 Cons

 

7.6 Responsibilities/requirements

#

Responsibility

Responsibility description

Effort Score

1

Database development team

Design and implementation of database

5

2

Backend software development team

Backend (business logic and API services) development

    5

3

UI software development team

UI (web and mobile) development

    5

Total Effort Assessment:

(sum of the column)

  15

 

7.7 Considerations

 

7.8 Questions

ID

Question

Response

Owner

Date

 

8. Alternatives Considered

 

9. Recommendations

 

10. Approvals

Approvers

Date

Comments

Marc Manuel

1/10/2020

Played role of Business Analyst, Architect, DB and Software developer and engineer.