[EPIC] Home page (posts feed)

[dogezen]

Homepage - posts feed

Whenever a user logs in, they should be redirected to the home page which will present the logged in user with:

• a feed with posts made by other users, sorted by most recent post
• a form for create a new post onto the feed
• a sidebar with additional information (which will be different if the logged in user is a student or a teacher)

The path for the home page is /posts

Creating posts

• As a student or teacher, I should be able to create a new post by typing the content in a text area and submitting
  • I should not be able to submit if the text is too short (or too long - TBC)
• When a new post is created, it should appear in the feed and the form should be cleared
• Any errors from the API should appear as a small error message for the user to see

Posts feed

• The posts feed should present a view of all posts (it should be scrollable beyond the page limit)
• Each post should present:
  • The name of who created the post (this should be a clickable link to go view that user's profile)
  • Indicate if who posted is a teacher or student (can use colours for this)
  • Present the content of the post
  • Have an icon to delete the post if the user viewing the post can delete
  • Have an icon to edit the post if the user viewing the post can delete
  • Have an icon to like the post (if the user viewing the post HAS NOT LIKED it already)
  • A LIST OF COMMENTS (see below)
  • A small FORM to post a new comment (see below)
  • (if possible, the date and time the post was made)
• Only a teacher can edit or delete another student's post
• The user who made a post can edit or delete their post

Post comments

• A teacher or student should be able to add a new comment to a post by entering the comment content
• Comments should be sorted by oldest first
• Only a teacher can edit or delete another student's comment
• The user who made a comment can edit or delete their comment
• A comment should present:
  • the user's INITIALS that should be clickable to visit that users' profile page
  • the content of the comment
  • (if possible, the date/time it was created)
  • an edit/delete icon if the user viewing the comment can edit or delete this
  • a like icon if the user viewing the post can like (see below)

Liking posts and comments

• any user can like or (remove a like) from a post or comment
• a user can like if they have not liked that comment or post already
• a user can dislike if they have liked that comment or post already

Sidebar details

A sidebar next to the posts should present the user with additional information.

For logged in students, it will present:

• a list of other students in my cohort
• a list of teachers

For logged in teachers, it will present:

• a list of cohorts
• a list of teachers

Student list sidebar

This is only visible if the logged in user is a student.

• As a student visiting the home page I should see my cohort's members in the sidebar
• The cohorts student list sidebar should present:
  • the cohort's name (for the logged in student)
  • the list of students in that cohort
• Each student in the list of students should present:
  • the initials of the student
  • the full name, which should be clickable and take me to that student's profile page

Teacher list sidebar

This is visible by any user.

• As a teacher or student visiting the homepage I should see a list of other teachers in the sidebar
  • Each teacher in the list should have the initials and name of the teacher, with a clickable url

Cohort List sidebar

• As a teacher visiting the homepage I should see a list of cohorts:
  • Each cohort should present the name of the cohort as a clickable link to take me to that cohort's page

Wireframes

Student wireframe

Here's an example wireframe for the student view.

NOTE: this is a concept, you can choose a different layout

Teacher wireframe

Here's an example wireframe for the teacher view.

NOTE: this is a concept, you can choose a different layout