Skip to content

Architecture

Jump to bottom
James Pretorius edited this page Jan 23, 2024 · 53 revisions

Libraries and Frameworks

  • Frontend
    • React for the frontend framework.
    • Vite for building.
    • npm for package management package management.
  • Backend
    • ASP.NET as the backend framework.
      • NuGet for package management.
      • Database libraries:
        • Microsoft.EntityFrameworkCore.Design
        • Npgsql.EntityFrameworkCore.PostgreSQL
        • Microsoft.EntityFrameworkCore
        • Microsoft.EntityFrameworkCore.Tools
      • Authentication libraries:
        • Microsoft.AspNetCore.Authentication.JwtBearer
        • Microsoft.AspNetCore.Identity.EntityFrameworkCore
        • Microsoft.AspNetCore.Identity
      • Microsoft.AspNetCore.SignalR for chatting with websockets.
    • PostgreSQL for the database.
    • xUnit test for backend unit and end to end testing (after POC).

Deployment

  • The frontend and backend will be deployed to an Azure app service. The Azure app service automatically pulls the latest git commit, builds, and starts the .NET project.
  • Deploying the database will be done by Azure Database for PostgreSQL.

Backend API Endpoints

Note: Generally Outdated

All are prefixed with /api

/posts

POST /posts

Create a Post.

Request:

  • game: GameID
  • title: string
  • (optional) scheduledFor: string (dateandtime ISO 8601)
  • (optional) description: String
  • (optional) tags: [list of Tag IDs]
  • (optional) maxPlayers: Number

GET /posts/{id}

Get a Post

Response:

  • post: ID
  • title: string
  • creator: UserID
  • game: GameID
  • scheduledFor: string (dateandtime ISO 8601)
  • description: string
  • tags: [list of Tag IDs]
  • users: [list of UserID]
  • maxPlayers: Number
  • chat: ID

DELETE /posts/{id}

Delete a Post

POST /posts/users/{id}

Add a user to a post

Request:

  • User: id

DELETE /posts/users/{id}

Remove a user from a post

Request:

  • User: id

/tags

Note: Deleting be done (automatically) by the server, not the client.

POST /tags

Create a Tag

Request:

  • name: string

Response:

  • id: string
  • name: string

GET /tags/{id}

Get a tag

Response:

  • id: string
  • name: string

GET /tags

Query for a tag

Request:

  • query: string (the beginning of a tag, e.g. mi will match mic)

Response:

  • [list of tags]

/games

POST /games

Create a game

Request:

  • name: string

Response:

  • id: string
  • name: string

GET /games/{id}

Get a game

Response:

  • id: string
  • name: string
  • imageUrl: string

GET /games

Query for a game

Request:

  • query: string (the beginning of a games, e.g. CS will match CS:GO) Response Body:
  • [list of games]

/user

GET /user/{id}

Get user info

Response:

  • username: string
  • age: number
  • bio: string
  • tags: [tags]
  • games: [games]
  • friends: [users]
  • posts: [posts]
  • groups: [groups]

PATCH /user/{id}

Set user info

Requires authentication.

Possible Request Content:

  • age: number
  • bio: string
  • tags: [tags]
  • games: [games]

/accounts

Manage accounts

POST /accounts/auth

Authenticate

Request:

  • username: string
  • password: string

Response:

  • token: string

POST /accounts

Create an account

Request:

  • username: string
  • password: string

Response:

  • id: string
  • username: string

GET /accounts/{id}

Get user account info

Response:

  • id: string
  • username: string

PATCH /accounts/{id}

Update user account info

Request:

  • id: string
  • password: string

/groups

POST /groups

Create a Group.

Request:

  • creator: UserID
  • description: String
  • tags: [list of Tag IDs]

GET /groups/{id}

Get a Group

Response:

  • group: ID
  • creator: UserID
  • description: String
  • tags: [list of Tag IDs]
  • users: [list of UserID]
  • chat: ID

DELETE /groups/{id}

Delete a Group

POST /groups/users/

Add a user to a group

Request:

  • user: id

DELETE /groups/users/{id}

Remove a user from a group

/chats

Note: Chat creation done when posts, groups, and players are connected, the client shouldn't be the creator. Similarly, Chat deletion is handled by the server.

POST /chats/{id}/messages

Post a chat message

Request:

  • message: string

GET /chats/{id}/messages

Get a chat messages

Request:

  • limit: int The maximum number of results to return (for pagination)
  • offset: int The index of the first returned result (for pagination)

Response:

  • list of messages with:
    • createdAt: string (dateAndTime)
    • user: ID
    • content: string

/search

For searching posts, users, and groups

/search/posts

Request:

  • (optional) games: comma seperated string E.g. CS:GO,Dota 2
  • (optional) after: string with ISO time
  • (optional) requiredPlayers: num
  • (optional) tags: comma seperated string
  • (optional) text: string
  • sort: comma deliniated string with asc/desc E.g. "time:asc,players:desc"
  • limit: int The maximum number of results to return (for pagination)
  • offset: int The index of the first returned result (for pagination)

Response:

/search/users

Request:

  • (optional) username: string
  • (optional) olderThan: num age
  • (optional) games: comma separated string E.g. CS:GO,Dota 2
  • (optional) tags: comma separated string
  • (optional) text: string text in bio
  • sort: comma delineated string with asc/desc E.g. "time:asc,players:desc"
  • limit: int The maximum number of results to return (for pagination)
  • offset: int The index of the first returned result (for pagination)

Response:

/search/groups

Request:

  • (optional) name: string
  • (optional) games: comma separated string E.g. CS:GO,Dota 2
  • (optional) minPlayers: num the minimum amount of players in the group
  • (optional) tags: comma separated string
  • (optional) text: string text in bio
  • sort: comma delineated string with asc/desc E.g. "time:asc,players:desc"
  • limit: int The maximum number of results to return (for pagination)
  • offset: int The index of the first returned result (for pagination)

Response:

Database

Our database models, outlined bellow, will be implemented using Entity Framework Core. With EF Core migrations, we can effortlessly create and update the corresponding tables, ensuring our database structure aligns seamlessly with our application's evolving data model.

Capstone Diagrams (1) Capstone Diagram

Frontend

  • The website will be a SPA.

URLS

Views

Header/Navigation Bar

Header Bar
View that displays all accessible areas of the website, such as Discover, Social, and Create. This will be displayed on any page that is not sign in/sign up.

Content

Main content of the webpage. This will change depending on which page a user is on.

Sign Up/Sign In Forms

SignUp
Forms that include details for users to either sign in or sign up.

Content Cards

Post Card Group Card Player Card
Content cards will display a overview of many of the high level details for players, posts, and groups.

Chat

Chat
Chat that is displayed when going to the associated chat page of a post, group, or user.

Post/Group Descriptions

PostContent GroupContent

This is the main content when clicking on a post or group page. It displays the group or post description, current number of players/members, and more.

Sidebars

Sidebars can also change depending on the page a user is on.

Discover Sidebar

DSidebar
This will include multiple filters to refine search results.

Chat Sidebar

CSidebar
This will include the details for a post, group, or user that you are chatting with, as well as the current number of people you are chatting with if it is a post or group.

Components

Design Components

General Components:

  • Textboxes: Makes options, inform other users of desired traits to have, search for material, etc.
  • Labels: Informs the user of the purpose of the associated button, radius, textbox, etc.
  • Buttons: Performs the function, which is described in the label.
  • Down-Arrow: Allows the user to hide and display the section.
  • Radius Buttons: Allows the user to see previously selected options.
  • Check-boxes: Allows the user to see previously selected options.
  • Images: Depending on the functionality, the image is displayed by site admins or allows the user to select an image for the appropriate site section.

Example of Components: Create Page

  • Navigation
    • Navigation Bar: Allows user to navigate sections of the website through the clicking of links.
    • Home button: Allows the user to travel to the home page of the website.
    • Discover button: Allows the user to travel to the discover page of the website.
    • Social button: Allows the user to travel to the discover page of the website.
  • Create (Group components mirror Post)
    • Create button: Allows the user to travel to the create page of the website.
    • Create Post button: Allows the user to navigate to the create post section of the create page to create a post.
    • Create Post button label: Informs the user of the purpose of the button.
  • Game
    • Game (Post Title) Down-Arrow: Allows the user to hide and display the Game (Post Title) section.
    • Game (Post Title) label: Used to inform the user of the purpose of the Game (Post Title) textbox.
    • Game (Post Title) textbox: Used to set the title of the post, which is also the game the user wishes to gather people to play. It can also be used to search preexisting games.
    • Game (Post Title) checkbox: Used to display the selected game to the user, so they can change the chosen game, if necessary.
  • Time
    • Time Down-Arrow: Allows the user to hide and display the Time section.
    • Time label: Used to inform the user of the purpose of the Time radius buttons and Time entry textboxes.
    • Time radius button (Any): Used to display to the user that they wish to play at any unspecified time.
    • Time radius button (Between): Allows the user to select options between two specified times that they desire to play a game.
    • Time checkbox 1: Used to select the start time that the user wishes to begin playing the game.
    • Time 'And' label: Used to assist the user in understanding the start and end times.
    • Time checkbox 2: Used to select the end time that the user wishes to finish playing the game.
  • Communication
    • Communication Down-Arrow: Allows the user to hide and display the Communication section.
    • Communication label: Used to inform the user of the purpose of the Communication radius buttons.
    • Communication radius button (Any): Allows the user to select the communication type (Any) required to join the user's Post.
    • Communication radius button (Mic): Allows the user to select the communication type (Mic) required to join the user's Post.
    • Communication radius button (No Mic): Allows the user to select the communication type (No Mic) required to join the user's Post.
  • Hashtags
    • Hashtags Down-Arrow: Allows the user to hide and display the Hashtag section.
    • Hashtags label: Used to inform the user of the purpose of the hashtag section.
    • Hashtags textbox: Allows the user to type in the desired hashtags for their post.
    • Hashtags check-boxes: Allows the user to see the previously selected hashtags for their post.
    • Hashtags Down-Arrow: Allows the user to hide and display the Hashtag section.
  • Number of Players
    • Number of Players Needed Down-Arrow: Allows the user to hide and display the Number of Players Needed section.
    • Number of Players Needed label: Used to inform the user of the purpose of the Number of Players Needed section.
    • Number of Players Needed Radius button (Any): Used to display to the user they wish to play with (Any) number of players.
    • Number of Players Needed Radius button (Between): Used to display to the user they wish to play with a number of players (Between) a lowest and highest number of players allowed.
    • Number of Players Needed Textbox 1: Used to select the Lowest number of players that the user wishes to begin playing the game.
    • Number of Players Needed 'And' label: Used to assist the user in understanding the lowest and highest number of players textboxes.
    • Number of Players Needed Textbox 2: Used to select the Highest number of players that the user wishes to begin playing the game.
  • Description
    • Down-Arrow: Allows the user to hide and display the Description section.
    • Description label: Used to inform the user of the purpose of the Description section.
    • Description textbox: Allows the user to describe the purpose of the post to other players.
  • Create Button label: Informs the user of the purpose of the button.
  • Create Button: With the specified choices, allows the user to create a post.
  • Clear Button label: Informs the user of the purpose of the button.
  • Clear Button: Sets the choices of the create post section back to default values.
  • Upload Image Label: Informs the user of the purpose of the button.
  • Upload Image Button: Allows the user to select an image to display in the provided area.
  • Group Image: Displays a selected image to users.

Team Member Roles

  • James: Backend
  • Evan: Chat/Backend
  • Ethan: Flex
  • Jackson: Frontend
  • Aaron: Frontend/Flex
Clone this wiki locally