Skip to content

Architecture

Jump to bottom
DColinG edited this page Oct 21, 2024 · 78 revisions

Backend

The backend will be a Python API running in a Docker container that will access the MongoDB database.

Libraries and frameworks

  • Pip
    • Package manager for Python
    • Requirements kept in requirements.txt
  • Flask
  • PyMongo
    • Python API for MongoDB
  • Hashlib
    • Hashes passwords when authenticating for better security
  • Secrets
    • Generates random byte strings
    • Used to generate authentication tokens

API endpoints

  • POST /api/register

    • Request
      • Username: string
      • Password: string
    • Response
      • Token: string

  • POST /api/login

    • Request
      • Username: string
      • Password: string
    • Response
      • Token: string

  • GET /api/events

    • Request
      • Start date: string (date)
      • End date: string (date)
    • Response
      • Events: List of events

  • GET /api/events/:id

    • Request
      • ID: identifier for event
    • Response
      • Event: event object from database

  • POST /api/create-event

    • Request

      • Title: string
      • Description: string
      • Visibility: bool
      • Start time: string
      • End time: string

    • Response

      • Message: string

  • POST /api/update-event/:id

    • Request

      • ID: string
      • Title: string
      • Description: string
      • Visibility: bool
      • Start time: string
      • End time: string

    • Response

      • Message: string

  • POST /api/delete-event/:id

    • Request

      • ID: string

    • Response

      • Message: string

  • GET /api/get-profile/:id

    • Request

      • ID: string (optional - defaults to logged in user if empty)

    • Response

      • ID: string
      • Name: string
      • Bio: string
      • Default visibility: bool
      • Followers: List[User]
      • Following: List[User]

  • POST /api/update-profile

    • Request

      • ID: string
      • Name: string
      • Bio: string
      • Default visibility: bool
      • Followers: List[User]
      • Following: List[User]

    • Response

      • Message: string

  • GET /api/tasks/

    • Request

    • Response

      • Tasks: List[Task]

  • GET /api/tasks/:id

    • Request

      • ID: string

    • Response

      • Title: string
      • Completed: bool
      • Description: string
      • Visibility: bool

  • POST /api/update-task/:id

    • Request

      • Title: string
      • Completed: bool
      • Description: string
      • Visibility: bool

    • Response

      • Message: string

Database

We will be using MongoDB as our database.

Users Collection

This collection will hold all information regarding the user and their account.

  • _id - the ID of the user, UUID generated by MongoDB: UUID
  • name - name of the user: String
  • username - username of the user: String
  • password - password for the user: String
  • bio - description the user can create: String
  • events - an array of objects containing the event ID that the current user has in their calender:
    • eventid - ID of an event: UUID
  • default_event_visibility - the default visibility of the user’s events: Bool (values: public = true, private = false)
  • followers - array of objects containing details about each follower:
    • follower_id - the ID of the follower: UUID
  • following - array of objects containing details about each user the current user is following:
    • following_id - the ID of the following: UUID

An example user object and how it would be stored in the database:

{
   "_id": "603d2149e2f8b9023d4a1f34",
   "name": "Hugh Gevent",
   "username": "hughgevent_",
   "password": "coffelovr44"
   "bio": "coffee lover",
   "events": [
      {
         "eventid": "703d2149e2f8b9023d4a1f35"
      },
      {
         "eventid": "803d2149e2f8b9023d4a1f35"
      }
   ],
   "default_event_visibility": true,
   "followers": [
      {
         "follower_id": "603d2149e2f8b9023d4a1f35"
      },
      {
         "follower_id": "603d2149e2f8b9023d4a1f36"
      }
   ],
   "following": [
      {
         "following_id": "603d2149e2f8b9023d4a1f37"
      },
      {
         "following_id": "603d2149e2f8b9023d4a1f38"
      }
   ]
}

Events Collection

This collection will hold all information pertaining to a specific event.

  • _id - the ID of the event, UUID generated by MongoDB: UUID
  • user_id - the ID of the user who created the event: UUID
  • title - the title of the event: String
  • description - description of the event: String
  • start_time - ISO 8601 formatted date for the start time: String
  • end_time - ISO 8601 formatted date for the end time: String
  • visibility - the visibility of the string, this will default to default_event_visibility of the user, but can be manually changed: Bool (values: public = true, private = false)
  • comments - array of objects containing comments for the event:
    • comment_id - the ID of the comment: UUID
    • user_id - the ID of the user who made the comment: UUID
    • text - the content of the comment: String
    • timestamp - ISO 8601 formatted date for when the comment was made: String

Example JSON object and how an event will be stored in the database:

{
   "_id": "603d2149e2f8b9023d4a1f39",
   "user_id": "603d2149e2f8b9023d4a1f34",
   "title": "Waterpark",
   "description": "Going to the waterpark",
   "start_time": "2024-10-18T14:00:00Z",
   "end_time": "2024-10-18T15:00:00Z",
   "visibility": true,
   "comments": [
      {
         "comment_id": "603d2149e2f8b9023d4a1f40",
         "user_id": "603d2149e2f8b9023d4a1f41",
         "text": "awesome",
         "timestamp": "2024-10-18T15:00:00Z"
      },
      {
         "comment_id": "603d2149e2f8b9023d4a1f42",
         "user_id": "603d2149e2f8b9023d4a1f43",
         "text": "nice dude",
         "timestamp": "2024-10-18T15:05:00Z"
      }
   ]
}

Queries

With MongoDB being a document oriented NoSQL database it does not use traditional SQL queries and no joins will be required, however to support CRUD operations we can call functions from PyMongo to query our database.

Users Collection PyMongo examples:

users_collection.insert_one(new_user) # adds a user

users_collection.find_one({"_id": user_id}) # find a user by ID

users_collection.update_one({"_id": user_id}, {"$set": {"bio": new_bio}}) # update a users bio

users_collection.delete_one({"_id": user_id}) # removes a user

users_collection.find() # finds all users

Events Collection PyMongo examples:

events_collection.insert_one(new_event) # adds an event

events_collection.find_one({"_id": event_id}) # finds an event by ID

events_collection.update_one({"_id": event_id}, {"$set": {"description": new_description}}) # update event description

events_collection.delete_one({"_id": event_id}) # delete an event

events_collection.find() # finds all events

Frontend

The frontend will be a React.js single page application (SPA).

Libraries and frameworks

  • npm
    • Package manager for JavaScript libraries and dependencies.
  • React.js
    • Used to create the application and handle user interface components.
  • Fetch API:
    • Handles HTTP requests to the backend API.
  • Mobiscroll Event Calendar
    • A React-based calendar component for scheduling and event management.

URLs

Views/components

calendarViewed

Menu Button: This button brings out the side pane menu.
Month View: A calendar display of the current month.
Account Button: Brings you to the account page.
Edit Button: Allows you to edit the calendar.
Week View: A schedule display of the current week.

AccountViewed

Menu: Quick access to various pages of the app.
Light/Dark Mode toggle: Switches the app between Light mode to Dark mode.
Sign Out Button: Signs out the current user. Link Google Account: Used to link user's google account.
Profile Picture: Picture for the current user's profile.
Email: User's email.
Full Name: User's full name.
Password: User's Password.
CreateEventViewed

Header: Title of page.
Event Details: Contains the details for the event.
Private Post Button: Post the event privately so only the user can see it.
Export Post Button: Export the event details.
Public Post Button: Post the event public so other users can search and find it.
Cancel Creation: Cancel Event creation.

EventSearchViewed

Location: User's location.
Event Title: Title of the event.
Event Address: Address of the event.
Event Poster: The user who posted the event.
Add Event Button: Button to add event to calendar.
Options Button: Opens the options menu for the event.

Development Environment

The development environment uses Docker Compose to ensure that all developers are using the exact same setup as the production environment. The frontend, backend, and database each run inside their own containers, and the source directories are mounted onto the docker containers as volumes so that the debug server can watch for changes in the files and update.

Deployment

The app will be deployed on DigitalOcean using Docker containers within a virtual machine. Details in this article.

Team roles

  • Ian - backend Python development/deployment
  • Jacob - backend Python development/Database construction
  • Tristan - frontend JavaScript development
  • Dominic - frontend JavaScript development/Calendar Component

Clone this wiki locally