Project Part 2
In this portion of the project, you will develop some of the frontend of the x440 image sharing website. In particular, you’ll be making the parts of the website designed for creating and viewing the posts and comments. To do this, you’ll have to use your API that you designed and implemented in part 1.
The good news is that I have only a few requirements for you to implement, and how you do so is up to you. Every approach has its benefits and weaknesses; however none is going to be much worse or better than the others overall.
I supplied you with a sample CSS file in your Project 0 repo. This will give you some hints on what classes you could use to structure your HTML, and it will make everything look better if you use those same classes. This isn’t a course on web design, so don’t worry about the appearance. If I can figure out how to test the functionality, you are okay. And if I can’t figure out how to test the functionality, then I will ask for clarification on your next submission.
Requirements
You are to implement four pages for this website. Each one will provide the visitor the ability to see posts by users. When you display a post, show the image, caption, author, and when the post was submitted in a human-readable way. Don’t show the comments unless otherwise specified.
Post Viewing Page (/post.html?id=:post_id:)
This page is where you can view a particular post, specified in the get parameter, and its comments. Display the post’s image, caption, author, time, and all of the comments with their authors in chronological order. Additionally, there should be a comment box below the last comment that lets the visitor comment. For now, allow the user to enter their own name and the comment. Both username and comment body must be non-null for the form to proceed. If they are missing, stay on the same page and prompt the user to correct their input. If the post id doesn’t exist, return a reasonable error code and page.
Post Creation Page (/new-post.html)
This page is where you can create a new post. There should be a form that allows image upload, and lets the user enter their name and a caption. When the user presses submit, it should first check if all fields of the form are filled out. If there is another error on upload, it should also explain that to the user on this page. If the upload was successful the site should redirect the user to the Post Viewing Page for their new post.
User Posts Page (/user.html?id=:user_id:&page=:n:)
This page is where you can view a particular users’ posts. The user is specified by the GET parameter id, and which posts are specified by the GET parameter page. Posts should be displayed in reverse chronological order, and not show any comments. The page should only load at most 10 posts at a time, with page=1 representing the 10 most recent posts. To load the next 10 most recent posts, the GET parameters would be set with page=2. If the page is set so large that there aren’t (n-1)*10 posts, page isn’t a Natural number, or page isn’t set at all, then default to the first page. If the user id doesn’t exist, return a reasonable error code and page.
Landing Page (/index.html)
This page is the first page a user visits. It is also where we will display all of the most recent posts. Again, show all of the posts in reverse chronological order, without displaying any comments and only load 10 posts initially. However, this page differs in that it will be an “infinite scroll” of all of the posts. That is, when the user reaches the bottom of the page, I want you to load an additional 10 posts and display them below the previous last post. This should continue until there are no further posts to display, at which point a message should be displayed to the user in the page.
Restrictions
Please do not use any outside JavaScript libraries, except the ones I install in your npm project. Also, please conform to the academic integrity policy of the course.
Submitting
To submit the project, create a new release in GitLab with name like “project2-24-08-2020” (instructions available at https://docs.gitlab.com/ee/user/project/releases/index.html#create-a-release) and email me that you would like it graded. You may do this up to two times a week. I will do my best to get back to you with a graded rubric by the end of the next workday. This project, like all other projects, is due Friday, December 4, 2020 at noon. However, I recommend that you finish this within the first few weeks of its availability.
Rubric
| Points | Requirement | Comment |
| Post Viewing Page Requirements | ||
| __/1 | Error pages (large post id, no post id, long post id) | |
| __/1 | Comment box sends POST request | |
| __/1 | Comments created, immediately rendered | |
| __/1 | Comment box handles missing fields | |
| __/3 | Post and comments appear on page in happy path | |
| Post Creation Page Requirements | ||
| __/1 | Missing fields handled | |
| __/1 | Error on upload handled | |
| __/1 | Redirect on submit | |
| __/3 | Successful upload on happy path | |
| User Posts Page Requirements | ||
| __/2 | GET Parameters handled according to spec | |
| __/1 | Reverse chronological order, no comments | |
| __/3 | Successful display on happy path | |
| Landing Page Requirements | ||
| __/2 | 10 posts initially, displayed as expected | |
| __/4 | Infinite scroll works and no errors on reaching the end | |
| Documentation Requirements | ||
| __/1 | Project runs with `git pull`, `npm install`, `npm start`, and visiting `https://localhost:8888` in the browser | |
| __/4 | README.md explains what source files do and source files contain meaningful comments | |
| __/30 | __/30 * 7 = ____ |