CONTEXT

In the future, you may want to allow others to post articles on your blog. Turning existing users into authors, or even additional superusers is a great way to do this.

DESCRIPTION

Create a way for a superuser to turn regular users into superusers.

ACCEPTANCE CRITERIA

• A person with a superuser role can make a regular user an author, which gives them permissions to post and edit their own articles
• A person with a superuser role can make a regular user a superuser, which gives them permissions to post and edit their own articles, as well as edit and delete articles that are not their own

DESCRIPTION

Generate each of the tables in the provided ER diagram: LucidChart Diagram

ACCEPTANCE CRITERIA

Generate the following models:

• #21
• #19
• Blog Post Category - These will be hard-coded/defined. Each post can only have one.
• Blog Post Tag - Identifiers for your blog
• Blog Post Likes - Keeps track of all likes on a blog post
• Blog Post Favorites - Keeps track of all favorite records on a blog post. A new record is created each time someone favorites a blog post, and is deleted when un-favorited.
• Comments - Comments made on a blog post. A new record is created each time someone likes a comment, and is edited once they'd like to delete it.
• Comment Likes - Keeps track of all likes made on a comment. A new record is created each time someone likes a comment, and is deleted when un-liked.
• User - The user model. This includes yourself, as well as other users who can leave comments.
• #20
• User Social Media - Other users can view a user's social media profile on their page.
• Social Media Platform - These are supported platforms for social media, and should be hard-coded.
• Inquiry - Messages sent through your contact form. Display these in your admin panel. Has a handy boolean for whether you've viewed them or not.

CONTEXT

This blurb is optional, but often helpful. Provides context that will make this task make more sense in the grand scheme of the project. This may include links to other tickets, or any other pages that can offer context to what you're doing what you're doing

DESCRIPTION

This is typically a description of what you have to do specifically for this ticket.

ACCEPTANCE CRITERIA

• This is a piece of acceptance criteria
• This is another one!
• Here's one more
• And another for your trouble

DESCRIPTION

Create a sign up and sign in view for your users.

ACCEPTANCE CRITERIA

• Create a sign up view with a first name, last name, email, username, password field, and submit button.
• Create a sign in view with a username, password field, and submit button

Complete ERD model for Blog Post Type:

• Blog Post Type - Either a (text) blog post or a video. This can be extended to other types at your leisure.

DESCRIPTION

Create a blog post listing component. On the blog post listing page, each blog post's preview will be displayed here. A preview should only display the blog post's title, preview text (a short description on what the article is about). When there is no preview available (if you leave that field empty), display the first 350 characters of the blog post with an ellipses at the end of those 350 characters.

ACCEPTANCE CRITERIA

Create a component that has the following:

• Space for a title
• The author's name, which, when clicked, links to their profile
• All of a post's tags
• A post's category
• When the post was created (Month, Date, Year)
• The post preview
• The number of native comments (comments made by signed up users) a post has
• OPTIONAL - A post's banner image, somehow.
• Map through all blog posts and display this component on the blog listing page

CONTEXT

Users should fill out certain information when signing up for your site. Similarly, this form should be able to be modified whenever they'd like to make a change.

DESCRIPTION

Create a page that doubles as a sign-up or profile edit page for users.

ACCEPTANCE CRITERIA

Create a sign up page that has the following fields:

• First Name
• Last Name
• Username
• Email
• Password
• Profile Image Link
• Conditionally render fields for social media based on what social media sites you've hard-coded into your accepted social media site accounts
• Have those fields not submit to your API to create a user, but instead, a POST request to the User Social Media model
• A "Submit" button
• Validations for the password criteria (if you have any for length, including some kind of symbol, etc.)
• Validations for the username field on whether or not it's unique

The profile editing page should only have the following fields:

• Username
• Email
• Password
• Profile Image Link
• Profile Description
• Conditionally render fields for social media based on what social media sites you've hard-coded into your accepted social media site accounts
• Validations for the password criteria (if you have any for length, including some kind of symbol, etc.)
• Validations for the username field on whether or not it's unique
• A "Cancel" button that sends you back to your profile page
• A "Save" button that will send off your requests

CONTEXT

In many blogs, there often exists an archive component. These are typically a well that includes a month and year, where users can click on a month, and display all posts created in that month. There's a good example of one here to the right of the page. You'll be creating one of these.

DESCRIPTION

Get the archive widget displaying years and months properly, then set things up so that when a month is clicked, posts are sorted properly.

ACCEPTANCE CRITERIA

• Years that blog posts have been written are displayed as collapses in the archive component
• Within those collapses are months that have contained blog posts. For example, if blog posts have only ever been written in July and November of 2021, and for March and May in 2023, the collapse should only display 2021 and 2023. Once the 2021 collapse is opened, only the months July and November should be displayed, and once the 2023 collapse is opened, only March and May should be displayed.
• The current year's collapse should be open by default.
• Set up query params to only return posts by that year and month once a month is clicked on.

Complete ERD table for Blog Post:

• Blog Post - This model will contain the data for each blog post. Each blog post has a media type you can specify on-creation, which will conditionally render that type of media (a text blog post, or a video)

DESCRIPTION

Create a page for the blog's post. If you've grabbed a theme, you'll only be connecting the necessary fields to the necessary UI elements.

ACCEPTANCE CRITERIA

• The post's title
• The post's author
• The posts's content
• The post's banner
• #27
• A bookmark/favorite button that swaps out with a filled in version of the button when clicked, and un-filled in version when not clicked
• A "like" button/icon that swaps out with a filled in version of the button when clicked, and un-filled in version when not clicked
• #29
• #28
• #30
• A section to the right or beneath the promotion at the bottom of the post talking about the author. This section should be conditionally rendered if there is an "about the author" section.

CONTEXT

All users that have signed up for your site can see their profile and information. The Social Media models exist so users can fill in fields for their social media profiles. This way, they can promote their own content as a result of frequently commenting on your blog posts.

DESCRIPTION

Create a page so all users that have signed up for your site can see their profile and information.

ACCEPTANCE CRITERIA

Create a page that has the following:

• A user's first name
• Icons that link to all social media profiles a user has filled out. Conditionally render the icons users have actually filled out.
• A user's profile image
• A user's description
• Sections for Favorited Blog Posts and Comments
• A user's comments on all blog posts (conditionally render this listed comments section if a user actually has comments)
• Include a link icon somewhere next to each listed comment.
• When the link icon is hovered over, use a tooltip to display the title of the blog post that it belongs to.
• Limit the length of the tooltip to 20 characters, and add an ellipsis to the end if the post title goes beyond that.
• Link users to the original blog post if this icon is clicked
• An "Edit" button somewhere on your page allowing users to edit their profile page on an edit form.
• Placeholder text in the place of a description, if a user doesn't have any.
• If the user is an author, display all of their blog posts
• If the user is an author, display the number of comments on their blog posts
• Display all of the user's favorited posts
• Include a link icon somewhere next to each listed favorited post.
• When the link icon is hovered over, use a tooltip to display the title of the blog post that it belongs to.
• Limit the length of the tooltip to 20 characters, and add an ellipsis to the end if the post title goes beyond that.

DESCRIPTION

Create a view listing all of your blog posts. For the time being, create only a navbar, and a space to list all of your blog post categories.

ACCEPTANCE CRITERIA

• Create your navbar, linking to your homepage, contact page, and blog
• Create a well (a box containing text) for displaying your post's tags (DO NOT ADD TAGS). Conditionally render this if there are tags passed in.
• Create a well for displaying your post's categories (DO NOT ADD CATEGORIES). Conditionally render this if there are categories passed in.
• Create a well for displaying years (DO NOT ADD YEARS). This will later be used to sort a post based on the year and month they were posted.

CONTEXT

URL query parameters are additional fields in a URL that will further filter information for a blog post. For example, https://www.yourblog.com/posts/id=3 will grab the third blog post. Or https://www.yourblog.com/posts/tag="lifestyle" may grab all of the blog posts with the tag "lifestyle". This is pseudocode of course - you'll need to learn how this works with Django.

DESCRIPTION

Set up URL query parameters so that specific blog posts are returned when certain query params are provided.

ACCEPTANCE CRITERIA

• Get query params for post categories working - the post listing page should only list this information when a category in the category well is clicked
• Get query params for post tags working - the post listing page should only list this information when a tag in the tag well is clicked

A promotion section. This section will be available if you'd like to link the reader to any related content, or if you have a guest poster, an opportunity for them to post about themselves. This section should be conditionally rendered if a blog post has the promotion field filled.

CONTEXT

Users should be able to like and/or favorite blog posts, and like comments made by other posters that have signed up for the site. It will assist them in finding their favorite articles of yours later on.

DESCRIPTION

Create the POST/PUT system for comments and favorites.

ACCEPTANCE CRITERIA

• Add a context icon only next to comments that belong to the user (they're typically three dots next to eachother]
• Create a context menu containing the option to delete a comment.
• When clicked on, create a popup that asks users if they're sure they'd like to delete their comment. This popup will have a "Yes" and "No" option.
• When deleted, a PUT request should be submitted, not deleting the comment, but changing its content to "[Deleted by user]"
• When the like button is clicked on a comment or post, only submit that like or comment as a PUT request upon navigating away from the page. This will prevent the page from reloading
• Do the same with the "favorite" button on posts

CONTEXT

In many blogs, there are tabs displaying user comments, as well as tabs for comments for specific social media sites. Some users don't want to create a profile on your website in the case that their data is stolen. Disqus is a popular platform that users make accounts on to comment on other sites with Disqus integrations.

DESCRIPTION

Place your original comment section within a tag for user comments, and add sections for Disqus comments, and at least one other social media platform (though you may add as many as you'd like). Put these platform's comments in their own tabs.

ACCEPTANCE CRITERIA

• Place your website's user's comments in their own tab
• Create a tab for Disqus comments
• Display Disqus comments
• Make a tab for at least one more social media platform's comments (Facebook is a common one)
• Display that social media platform's comments
• Do the same for any other platforms you'd like to add comment integrations to

Complete ERD model for User Role:

• User Role - Should be separated between author and commenters.

DESCRIPTION

Please write validations (character count, required/not required, etc.) for each field in each model.

ACCEPTANCE CRITERIA

Write validations for the following models:

• Blog Post
• Blog Post Type
• Blog Post Category
• Blog Post Tag
• Blog Post Likes
• Blog Post Favorites
• Comments
• Comment Likes
• User
• User Role
• User Social Media
• Social Media Platform
• Inquiry
• Comment

CONTEXT

Fuzzy search is a type of search that's not very exact, but will get the job done as far as looking up information goes.

DESCRIPTION

Use Fuse.js, a fuzzy search library, to add fuzzy search to your website to search through your article's titles.

ACCEPTANCE CRITERIA

• Add Fuse as a React package to your app (or as a CDN, whichever)
• Add a searchbar into the navbar at the top of your app
• Have your searchbar search through the titles of your blog posts
• When a user clicks on a blog post, link that user to the respective blog post

DESCRIPTION

Add a comment section beneath your blog posts. Conditionally render the comments themselves, and display a, "There are no comments yet" message (or something to that effect) when there are none.

ACCEPTANCE CRITERIA

• Add a "Comments" section header beneath your blog post (if your theme does not already have one)
• Create a comment component
• Display that comment's like count
• Add a like button that switches it with a filled in like button when a user likes it, or returns it to its original state when they dislike it
• Have the like count increase by one if liked, and decreased by one if un-liked
• Do not send off a POST requests for a new likes when a user clicks this button. Send off this request only when a user navigates away - this will prevent the page from reloading.
• Prevent a user from liking a comment when
• Display all comments from users

DESCRIPTION

Map through any existing tags and categories that have been created and display them in their respective wells.

ACCEPTANCE CRITERIA

• All tags are displayed in the tags well
• All categories are displayed in the categories well