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).

Note: The AddComment component and the Follow / Unfollow are 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	See Videos	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	See Videos	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	See Videos	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	See Videos	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:

• A link to your GitHub Repository
• A link to your GitHub Pages (which should link to your transpiledindex.html file in the dist directory)
• The name of your partner (if applicable)
• Whether you completed any of the extra credit (so that I can look for it)

Final Checklist

Please verify that you have completed the following tasks before you submit:

	Resource	Description of Task
	Profile	The current user’s profile is rendered in the right panel using React and data from /api/profile.
	Stories	Stories are rendered in React using data from /api/stories.
	Suggestions	Suggested accounts are rendered in React using data from /api/suggestions.
	Suggestions	Individual suggested users are rendered with a Suggestion child component.
	Posts	Posts are rendered in React using data from /api/posts.
	Posts	Individual posts are rendered with a Post component.
	Components	The app uses a series of React components rather than copying the Homework 3 HTML directly into one file.
	React State	props, useState, and useEffect are used appropriately to pass data, manage state, and handle side effects.
	Like Button	The LikeButton component renders the correct heart icon state for liked vs. unliked posts.
	Like Button	Clicking the like button issues the correct create / delete requests and redraws the post in React.
	Bookmark Button	The BookmarkButton component renders the correct bookmark state for bookmarked vs. unbookmarked posts.
	Bookmark Button	Clicking the bookmark button issues the correct create / delete requests and redraws the post in React.
	Composition	The page still looks good and remains responsive after converting the UI to React.
	Build	Running npm run build successfully creates a dist directory.
	Build	The transpiled app works when previewing dist/index.html.
	GitHub	The transpiled Homework 4 app is linked from your homepage.
	GitHub	Your edits have been committed and pushed to GitHub.
	Moodle	You are ready to submit your GitHub repository link and your GitHub Pages link to Moodle.
	Moodle	If applicable, you included your partner’s name and noted any extra credit in your Moodle submission.