This is a blog website that I made with the help of the walkthrough project "I Think Therefore I Blog" by Code Institute. On the main/home page is where you can see the list of posts made by the website's bloggers, with a title, excerpt, image, who's the blogger, and when it was uploaded.
As a site-dedicated blogger, you can add, edit, and delete posts from the UI, they also have staff status for the ability to view, add, edit, and delete posts from the Admin panel.
As a site user, you can click on the post you want to read, if the user has signed up for an account and is logged in, they can also leave comments on each post. The Admin has to approve the comments before they show up on the page. You can edit and delete a comment when it has been approved or while it's pending on being approved.
On the About page, you can read about the site owner/creator and fill out a form if you're interested in contacting them or maybe becoming a blogger for the site.
When a user is logged in, they're username will be shown as "Logged in as" at the upper right corner of the page, if you're not logged in or don't have an account it will say "Not logged in".
-
User Story: Post List Pagination #1
As a User I can view a paginated list with posts so that I can pick the post I want to readAcceptance Criteria
- Have a paginated list of posts accessible to the user from the homepage or dedicated blog page.
Tasks
- Implement Pagination Logic.
- Create UI for Paginated List.
- Integrate Frontend with Pagination Logic.
- Display Paginated List on Homepage/Dedicated Blog Page.
- Test Pagination Functionality.
-
User Story: Read post #2
As a User I can click a post so that I can read the text fullyAcceptance Criteria
- A detailed view of a post can be seen when a post title is clicked.
Tasks
- - Design Post Detail Page.
- - Implement Frontend Click Functionality.
- - Fetch and Display Post Content.
- - Test Click-to-Read Functionality.
-
User Story: Read Comments #3
As a User/Admin I can view comments on a post so that I can read user's conversationsAcceptance Criteria
- Admin can view one or more comments from users.
- A user can click the comment thread to read all the conversations.
Tasks
- - Design Comment Display.
- - Implement Backend for Comment Retrieval.
- - Integrate Comment Display in Post View.
- - Test Comment Viewing Functionality.
-
User Story: Account Registration #4
As a User I can register an account so that I can leave comments on postsAcceptance Criteria
- A user can register an account.
- Then the user can log in.
- When the user is logged in they can comment on posts.
Tasks
- Design and implement the Registration Form.
- Implement Sign Up, Sign In, and Sign Out functionality.
- Implement Commenting for logged in users.
- Test functionality.
-
User Story: Comment On Posts #5
As a User I can comment on a post so that I can share my thoughts.Acceptance Criteria
- Logged-in users can submit comments on posts.
Tasks
- Design Comment Section.
- Implement Comment Submission Backend.
- Integrate Comment Section Frontend.
- Display Comments on Posts.
- Test Functionality.
-
User Story: Edit Or Delete Comments #6
As a User I can edit or delete my comments on posts so that I can join in on the conversationAcceptance Criteria
- A logged-in user can edit their comment.
- A logged-in user can delete their comment.
Tasks
- Design Edit Comment Interface.
- Implement Edit Comment Backend.
- Design Delete Comment Confirmation.
- Implement Delete Comment Backend.
- Integrate Comment Editing and Deletion Frontend.
- Test Edit and Delete Functionality.
-
User Story: Create Posts #7
As a Admin I can create posts so that I can share content with site usersAcceptance Criteria
- A logged-in user can create blog posts.
Tasks
- Design Post Creation Form.
- Implement Post Creation Backend.
- Integrate Post Creation Frontend.
- Test functionality.
-
User Story: Draft Post #8
As a Admin I can save my post as a draft so that I can continue/finish writing my post laterAcceptance Criteria
- A logged-in user can save a blog post as a draft.
- They can then continue/finish writing the post at another time.
Tasks
- Implement "Draft" Field.
- Create Draft Storage in Backend.
- Enable Draft Retrieval.
- Test Draft functionality.
-
User Story: Comment Approval #9
As a Admin I can approve or disapprove a comment so that I can manage and remove unpleasant commentsAcceptance Criteria
- A logged-in user can approve comments.
- A logged-in user can disapprove comments.
Tasks
- Implement Approve Field.
- Implement Backend Logic for Comment Approval.
- Integrate Approval Functionality into Frontend.
- Test Comment Approval functionality.
-
User Story: About Page #10
As a User I can click the About link so that I can read about the blogAcceptance Criteria
- A visible About text will show when the About link is clicked.
As a Admin I can create or update content on the About page so that users can read about my blog
Acceptance Criteria
- The About Page is visible in the admin panel.
Tasks
- Create About Page App.
- Integrate About Link in User Interface.
- Implement About Page Display.
- Design Admin Panel Section for About Page.
- Integrate Admin Panel Link for About Page.
- Implement Content Creation/Update Functionality.
- Verify About Page Visibility in Admin Panel.
- Test About Link and Page Display.
- Test Admin Content Creation and Update.
-
User Story: Edit Posts #17
As a Admin I can edit posts so that I can correct any mistakes or update content.Acceptance Criteria
- A logged-in user can edit blog posts.
Tasks
- Design Edit Post Interface.
- Implement Edit Post Backend.
- Integrate Edit Post Frontend.
- Test Edit Functionality.
-
User Story: Delete Posts #18
As a Admin I can delete posts so that I can remove any post I don't likeAcceptance Criteria
- A logged-in user can delete blog posts.
Tasks
- Design Delete Post Confirmation.
- Implement Post Deletion Backend.
- Integrate Post Deletion Frontend.
- Test Post Deletion Functionality.
-
User Story: Contact Form #19
As a Potential Collaborator I can fill out a contact form so that I can request a user for collaborationAcceptance Criteria
- Contact Form Access on About page.
- Form Fields.
- Submit Button.
Tasks
- - Design and implement Contact Form.
- - Implement Contact Form Backend.
- - Integrate Frontend with Contact Form Logic.
- - Test Contact Form Functionality.
-
User Story: Store Contact Requests #20
As a Site Owner I can store contact requests in the database so that I can review themAcceptance Criteria
- A form is available for users to submit contact requests on the About page.
- Submitted contact requests are in the database.
- Site owner can access and review stored contact requests.
Tasks
- - Implement Backend for Storage.
- - Integrate Frontend with Form and Backend.
- - Create Database Schema for Requests.
- - Implement Access for Site Owner.
- - Test Functionality.
-
User Story: Mark Collaboration Requests As Read #21
As a Site Owner I can mark collaboration requests as "read" so that I can see how many I still need to processAcceptance Criteria
- A "Read" Field is available for collaboration requests.
- Clicking "Read" updates the request status to "read".
Tasks
- - Implement "Read" Field.
- - Update Request Status in the Database.
- - Test "Read" Field Functionality.
- - Ensure Accessibility and Usability.
Font Family Roboto Font Family Lato
- Authentication via social media.
- Enable email verification and 2-step authintication for more account security.
- User profiles, users can add/edit/delete their own posts.
- Share posts to other social media platforms.
- Ability to send private messages to other users.
- HTML.
- CSS.
- Python.
- Bootstrap 5.
- Crispy Bootstrap 5.
- Google Fonts.
- Font Awesome.
- Git.
- GitHub.
- Django.
- Django AllAuth.
- Summernote.
- Django Staticfiles.
- Ckeditor.
- Crispy Forms.
- Cloudinary.
- Cloudinary Storage.
- Heroku.
- ElephantSQL.
- Whitenoise.
- Gunicorn.
- Django JS Asset.
- W3C - Passed.
- CI Python Linter - All clear.
- Testing was done throughout the development, with multiple deployments in between to make sure the site's layout/design, forms, views, url's, functions, and requests responds the way it should.
- A large amount of testing was done to ensure that everything were linking correctly.
- The site has been viewed and tested on both desktop and mobile.
- Links to add, edit, and delete posts and comments work as intended and only shows up for users that is autherized and has permission. Auth for register, login, and logout work as intended as well.
- Contact form on About page sends a rewuest with the name, email, and message in it to the admin panel. If fields are empty an error occurs telling those fields can't be empty.
- Clicking on a post link works as intended.
- Add post page works as indended.
- The slug field in Add Post doesn't automatically fill when a user with staff/posting permission is writing the title, so the post_slug field has to be visible in the Add Post view so it can be written manually. I haven't been able to figure it out as for now with slugify/auto populate, but it's something I'm planning on fixing in the future.
Deployed using Heroku.
- Log in/sign up to Heroku.
- Go to your Heroku App and click on "Deploy".
- At section "Deployment method", click "GitHub" and connect your account with Heroku.
- When you're connected, search for the project you wanna connect the app to and click on it.
- Click "Deploy Branch".
- Your app will now be deployed to GitHub and when it's done you can click "Open App".
Fork the repository:
1. Log in/sign up to GitHub.
2. Go to the repository for this project pp4-blog.
3. Click the 'Fork' button in the top right corner.
Clone the repository:
1. Log in/sign up to GitHub.
2. Go to the repository for this project pp4-blog.
3. Click the code button, select which one you want to clone with (HTTPS, SSH or GitHub CLI) and copy the link shown.
4. Open the terminal in a code editor and change the current working directory to a location of your choice to use for the cloned directory.
5. Type 'git clone' in the terminal, paste the link that you copied in step 3 and then press enter.
- I was coding along the Code Institute walkthrough project "I Think Therefore I Blog". All blog posts comes from their fixtures posts that I added images to from Google.
- Help with assigning permissions from OPENCLASSROOMS:
- Help with making AddPost, EditPost, and DeletePost pages from Youtuber Codemy.com:
Code Institute's module for Portfolio Project 4: "Full-Stack Toolkit"
- User Story Issues.
- User Story Template.
-
Blog post images:
- Student Care, CI.