General workflow

The workflow between the front-end and back-end follows a page-by-page completion idea for creating the JSON data.

Detailed workflow

As each member of the front-end team work on a particular page's design implementation, they need to keep in mind what data that particular page will contain. After finished the implementation of that page, they need to provide a detailed description to the back-end team of what data they need to populate the page. This description will then be discussed between the front-end team and the back-end team. The back-end team will then be able to go and implement the API's data models to contain the data according to the description provided for them. Finally, the back-end team can present this JSON data to the front-end team, to confirm whether that JSON data fits the description for the particular page.

Example:

The front-end team wants JSON data for the profile page of the user. The data should contain the following about the user:

• Username
• Friend count
• Memory count
• Profile photo url

After discussing the details, the back-end team go an create the JSON data model for this data. They then present the following:

// JSON object for user details on the user profile page
{
   "username" : "@Someone",
   "friendCount" : 10,
   "memoryCount" : 10,
   "photoURL" : "https://a-photo-url.com"
}

Now both teams will discuss this JSON data to confirm if this is what the front-end team wanted. If it's not, they discuss the changes to be made, else the front-end team can go and use this data to populate the page's contents.

JSON Data Response Objects

Pages:

• Other Users' profile
• Your Profile

Viewing a user's profile

The returned JSON object should contain the following:

• friends - the number of friends for the viewed user
• username - the viewed user's username
• profileImg - the link to the viewed user's profile photo
• memories - an object array of the viewed user's memories
  • title
  • description
  • timePosted - the exact time when the user posted the memory in the following format: YYYY-MM-DD'T'hh:mm:ss.sssXXX where the XXX represents the timezone e.g. Z for GMT/UTC or it could be ±hh:mm For example: 2023-03-18T10:30:00.000-07:00 = 18 March 2023 at 10:30:00 AM (GMT -7)
  • imgUrl - a link to the memory's background image
  • comments - an object array of all the comments for a specific memory
    • username - the username of the user who commented
    • profileImageUrl - the link to the viewed user's profile photo
    • comment - the comment that the user made

Viewing your profile

The returned JSON object should contain the following: (Note these properties follow the same description as above with extras to new properties)

• friends
• username
• profileImgUrl
• accountTime `- this will be used to display the current life time of your account.
• active memories
  • title
  • description
  • timePosted
  • imgUrl
  • comments
    • username
    • profileImgUrl
    • comment
• dead memories `- these memories will only be used in the "Revive Memory" modal
  • title
  • description
  • timePosted
  • imgUrl
  • comments
    • username
    • profileImgUrl
    • comment
  • selected `- this property will be used to add color to the memory that is currrently selected in the "Revive Memory" modal and to know which memory to revive once you click the "Revive" button.

IMemory

{  
  userId: string | null | undefined;
  username: string | null | undefined;
  profileImgUrl?: string | null | undefined;
  imgUrl: string | null | undefined;
  title: string | null | undefined;
  description: string | null | undefined;
  comments: IComment[] | [] | null | undefined;
  timePosted: Date | null | undefined;
  alive: boolean | null | undefined;
  time: Date | null | undefined;
}

IComment

{
  userId: string | null | undefined;
  username: string | null | undefined;
  profileImgUrl?: string | null | undefined;
  comment: string | null | undefined;
  created: Timestamp | null | undefined;
}

IUser

{
  id: string | null | undefined;
  time: Date | null | undefined;
  email?: string | null | undefined;
  username: string | null | undefined;
  profileImgUrl?: string | null | undefined;
  phoneNumber?: string | null | undefined; //not sure why this was included in the code
  customClaims?: { [key: string]: any } | null | undefined; //not sure why this was included in the code
  created: Timestamp | null | undefined;
  memories: IMemory[] | [] | null | undefined;
  accountTime: Date | null | undefined;
  friendList: IUser[] | [] | null | undefined;
}