CSCI 344: Fall 2024

Advanced Web Technology

CSCI 344: Fall 2024

UNCA Logo

Assignments > HW4: React Client

Due on Tue, 11/26 @ 11:59PM. 50 Points.

Video Walkthroughs for Tutorial 8

The following video walkthroughs go over all of the requirements for Tutorial 8. To complete Homework 4, you will have to implement stories, profile, and suggestions on your own as well as liking / unliking posts.

  1. 06:43 Setup
  2. 15:05 Component organization
  3. 04:06 Understanding the NavBar component
  4. 15:40 Fetching Posts from the course API (via HTTP)
  5. 08:55 Creating a Post component
  6. 17:03 Enhancing the Post component
  7. 12:15 Like & Bookmark Buttons
  8. 17:42 Creating & Deleting Bookmarks on the course API (via HTTP)
  9. 12:30 Redrawing the Post after a state change
  10. 02:52 Transpiling and linking to your home page

The folder of videos can also be found here.

Overview

In this homework assignment, you will re-implement your HW3 code in React (with a few minor changes to improve the usability of your app). I recommend building from this starter code provided below (which uses Tailwind). That said, feel free to do it your way. I won’t be grading you on CSS, but please do make it look nice. You’re also welcome to customize the look and feel to make it your own.

HW4 Starter Code

When you’re done, your React version of the PhotoApp should behave like this one: https://photo-app-secured.herokuapp.com/.

Setup

  1. Download and unzip the hw04 starter files and move them to your csci344/homework/ directory.
  2. Open a terminal and make sure that you are inside the hw04 directory.
  3. Install the node packages as follows: npm install
  4. Run the React bundler and local server by typing: npm run dev
  5. Keep this process running while you are developing in React.

Tasks

In the section below, I’ve mapped out a suggested implementation strategy. If you implement your React functionality differently, that’s fine, but I will be verifying that you did indeed make a series of components (versus just copying your HW3 file into a React folder and only making minor changes). The “AddComment” component can be implemented for extra credit.

Points Component / Task Description
0pts On Your Own NavBar.js
Displays the Header 		(Already done for you) Create a NavBar component that displays the username of the logged in user, a logout button, and a link to the API tester as shown in the demo. Notes:
  • This task requires that you fetch data from the /api/profile endpoint.
  • It's OK that the logout and api functionality hasn't yet been implemented (this will come later).
4pts On Your Own Profile.js
Display Profile 		Create a Profile component that displays the current user's profile (inside of the right panel) using data from the /api/profile endpoint.
4pts On Your Own Stories.js
Display Stories 		Create a Stories component that displays stories from the user's network. This component will both fetch the stories from /api/stories, and draw the stories.
4pts On Your Own Suggestions.js
Display All Suggestions 		Create a Suggestions component that displays suggested user accounts. This component will both fetch the suggestions from /api/suggestions, and draw the suggested users with the help of the Suggestion.js child component (see below).
4pts On Your Own Suggestion.js
Display Individual Suggestion 		Create a Suggestion component that will render a representation fo each user.
4pts Tutorial 8 Posts.js
Display All Posts 		Create a Posts component that displays all of the posts user accounts. This component will both fetch the posts from /api/posts, and draw each post users with the help of the Post.js child component (see below).
8pts Tutorial 8 Post.js
Display Individual Post 		Create a Post component so that it looks like the post from HW4. To do this:
  • The Like/Unlike functionality should be handled by a LikeButton child component (details below).
  • The Bookmark/Unbookmark functionality should be handled by a BookmarkButton child component (details below).
  • You can handle the display of the "comment button" and "last comment" any way you like. You could create a Comments and/or Comment child component, or you could render comments directly in your Post's render method.
4pts On Your Own LikeButton.js
Like / Unlike Post 		Create a LikeButton component that will:
  • Render a solid / filled in heart (depending on whether the post is liked / unliked by the current user).
  • Handle the like / unlike fetch requests to the /api/posts/<post_id>/likes and /api/posts/<post_id>/likes/<id> endpoints.
  • Redraw the Post if the like / unlike requests is successful (hint: use a state variable).
4pts Tutorial 8 BookmarkButton.js
Bookmark / Un-Bookmark Post 		Create a BookmarkButton component that will:
  • Render a solid / filled in bookmark (depending on whether the post is bookmarked / un-bookmarked by the current user).
  • Handle the bookmark / un-bookmark fetch requests to the /api/posts/bookmarks and /api/bookmarks/<id> endpoints.
  • Redraw the Post if the bookmark / un-bookmark request is successful (hint: use a state variable).
2pts On Your Own Keyboard Navigation
  • Ensure that all of the buttons are tabbable
  • Ensure that all the event handlers can be triggered using the "spacebar" or "enter / return" keys.
4pts On Your Own Aria attributes Use the "aria-label" and "aria-checked" attributes (in conjunction with the role="switch" attribute) to indicate to the screen reader whether the following buttons are turned on or off:
  • Like / Unlike button
  • Bookmark / Unbookmark button
8pts Tutorial 8 Transpile
Transpile your React App and link it to your homepage 		Since React uses language features that your browser can't understand, you'll need to "transpile" your code to "vanilla" HTML, CSS, and JavaScript. Luckily, Vite can do this for you. Please do the following:
  • Run the build process from the command line as follows: npm run build
  • Verify that a new "dist" directory was built.
  • In your "dist" directory, verify that the transpile process worked by previewing the index.html file like you would any static HTML file (using live server)
  • Link to the transpiled version of your app from your homepage (homework/hw04/dist/index.html).
5pts Extra Credit AddComment.js
Add a Comment 		Create an AddComment component that will:
  • Render an "Add comment" textbox and button.
  • Post the user's comment to the /api/comments endpoint.
  • Redraw the Post (parent component) if the POST request is successful (hint: use the Post's requeryPost function).
5pts Extra Credit Follow / Unfollow
  • Handle the follow/unfollow fetch requests to the /api/following and /api/following/<id> endpoints.
  • Redraw the HTML after a follow / unfollow requests is successfully issued.
5pts Extra Credit Form Accessibility
Extra handling for "Add Comment"
  • After a comment is submitted by the user, ensure that the focus is set back to the input. Hint: use React's built-in "autoFocus" property.
  • Add an event handler to the input control so that it submits when the user presses the "Enter/Return" key. To do this, consider using the form's "onSubmit" event versus attaching event handlers to the input and button.

Moodle Submission

Please review the requirements above and ensure you have met them. When you’re done, please submit the following to the Moodle: