If you want to see a working demo of what Photo App will look like at the end of the course, take a look here:
https://photo-app-secured.herokuapp.com/

• username: your unca username (for email) (all lowercase)
• password: password

Note that we will only be implementing a subset of these features for HW3.

HW03 Starter Files

1. Download the starter files, unzip them, and save them in your csci344/homework directory. Your hw03 structure should look like this:

   hw03
   ├── README.md
   ├── index.html
   ├── js
   │   ├── main.js
   │   └── utilities.js
   ├── package.json
   ├── public
   │   └── output.css
   ├── src
   │   └── input.css
   └── tailwind.config.js

2. Open your entire csci344 folder in VS Code.

3. In your terminal, navigate to your csci344/homework/hw03 folder. Then run the following command:

   npm install

   This command will install your Tailwind dependencies and create a package-lock.json file and a node_modules directory. Please verify that both were created.

4. While still in your hw03 directory, run the following command so that Tailwind continuously compiles your stylesheet as you make changes to your HTML and CSS files:

   npm run build:tailwind

5. You are now ready to begin HW03. Open your index.html file with Live Server to verify that it works.

For this assignment, you will be using Sarah’s version of the PhotoApp REST API, located here: https://photo-app-secured.herokuapp.com/. In Homework 5, you will actually be building this REST API, but for now, I’m giving you a working version that you can interact with as you build your Photo App browser client. Credentials:

• username: your unca username (all lowercase)
• password: password

Obviously this is not secure, but this is just a practice API so if it gets hacked, I can just rebuild it in one click :).

After logging in, you can view all of your available REST API endpoints by navigating to the API Docs: https://photo-app-secured.herokuapp.com/api. You’re welcome to click as many buttons as you want. I will periodically clear out and rebuild the data so you can’t mess anything up.

• All fetch requests will need to pass a Bearer Token (for now) to authenticate with the REST API. We will go over this in class.
• There is a helper function in js/utilities.js called getAccessToken() that will help you retrieve the access token. You will store this token in a variable and include it as an HTTP header in all of your server requests.

Inside of the right panel at the top, render an HTML representation of the current user’s profile using data from the /api/profile endpoint.

async function showProfileHeader() {
    // fetch the current user's profile data from /api/profile
    // select the container where the profile header should go
    // build an HTML string for the user's image + username
    // insert that HTML into the DOM
}

Inside of the right panel (underneath the user profile), render an HTML representation of suggested user accounts using data from the /api/suggestions endpoint.

async function showSuggestions() {
    // fetch the suggested accounts from /api/suggestions
    // select the container where the suggestions should go
    // loop through or map over the returned accounts
    // build an HTML string for each suggested account
    // insert the combined HTML into the DOM
}

Render an HTML representation of stories from the user’s network using data from the /api/stories endpoint.

async function showStories() {
    // fetch the stories from /api/stories
    // select the stories container
    // loop through or map over the returned stories
    // build an HTML string for each story
    // insert the combined HTML into the DOM
}

Underneath the stories panel, render an HTML representation of the first 10 posts from the user’s network using data from the /api/posts endpoint.

Please ensure that the following rules are honored:

1.4.1. Fetching & displaying posts

Each of your posts should have the following structure:

• Note that the content from each box should be generated from the API data (no hard-coding).

• If you want some starter function stub, please take a look at the code below:

  Code Hint

  async function showPosts() {
      // fetch the posts from /api/posts
      // select the posts container
      // loop through the first 10 posts
      // build each post's HTML (or call a helper function)
      // insert the rendered posts into the DOM
  }
  
  

1.4.2. Comments section

1. If there is more than one comment associated with the post, display a “view all n comments” button (replace n by the actual number of comments) and only show the most recent comment.
2. Otherwise, display a single comment below the title of the post (if one exists).
   Code Hint

   function getComments(post) {
       // if there are no comments, return an empty string
       // if there is exactly one comment, render just that comment
       // if there is more than one comment:
       //     render a "view all n comments" button
       //     render only the most recent comment underneath it
       // return the HTML string for whichever case applies
   }
   
   

1.4.3. Like button

1. If the current user has already liked the post, the heart icon should be red .

2. Otherwise it should be hollow .

3. You can check whether the current user has liked the post by looking at the post’s current_user_like_id field. If the post has been liked by the current user, this field exists. Otherwise, it is undefined.

   Code Hint

   function getLikeButton(post) {
       // if post.current_user_like_id exists:
       //     render the filled / red heart icon
       // otherwise:
       //     render the hollow heart icon
   }

1.4.4. Bookmark button

1. If the current user has already bookmarked the post, the bookmark icon should be black .

2. Otherwise it should be hollow .

3. You can check whether the current user has bookmarked the post by looking at the post’s current_user_bookmark_id field. If the post has been bookmarked by the current user, this field exists. Otherwise, it is undefined.

   Code Hint

   async function getBookmarkButton(post) {
       // if post.current_user_bookmark_id exists:
       //     render the filled bookmark icon
       // otherwise:
       //     render the hollow bookmark icon
   }

Please verify that you have completed the following tasks:

If you can figure out how to redraw the post without refreshing the page, as seen on https://photo-app-secured.herokuapp.com/.

async function reloadPost(postId) {
    const response = await fetch(`${rootURL}/api/posts/${postId}`, {
        // use GET
        // include your bearer token in the Authorization header
    });

    const data = await response.json();

    // build the updated HTML for that one post:
    const updatedPostHTML = /* call your post template helper here */;

    const post = document.querySelector(`#post-${postId}`);
    post.outerHTML = updatedPostHTML;
}

When the user clicks the follow button of an unfollowed account, a POST request should be issued to the /api/following endpoint. If the POST response indicates success, redraw the button to indicate that you are now following the account.

async function followUser(userId) {
    // build the /api/following endpoint
    // issue a POST request with fetch(...)
    // include your bearer token in the Authorization header
    // send the user id in the request body
    // inspect the response JSON
    // redraw the button (or the whole suggestion row) after the request succeeds
}

When the user clicks the unfollow button of a followed account, a DELETE request should be issued to the /api/following/<id> endpoint. If the DELETE response indicates success, redraw the button to indicate that you are no longer following the account.

async function unfollowUser(followingId) {
    // build the /api/following/<id> endpoint
    // issue a DELETE request with fetch(...)
    // include your bearer token in the Authorization header
    // inspect the response JSON
    // redraw the button (or the whole suggestion row) after the request succeeds
}

When the user types a comment into the textbox and clicks the adjacent “post” button, a POST request should be issued to the /api/comments endpoint.

Please ensure that:

1. If the POST response indicates success, requery for the relevant post (/api/posts/<id>) and redraw the post.
2. The new comment is rendered to the screen.
3. The comment count increases to reflect the number of comments associated with the post.

async function addComment(postId, commentText) {
    // build the /api/comments endpoint
    // issue a POST request with fetch(...)
    // include your bearer token in the Authorization header
    // send the post id and comment text in the request body
    // inspect the response JSON
    // call reloadPost(postId) after the request succeeds
}