By Melody Lisa.
This is the documentation for BlissBoost - a social media site aimed towards spreading positivity in all aspects of life. The site has been built using HTML5, CSS3 with materialize templating, MongoDB and Python with Jinja templating for the Milestone 3 backend development project for Code Institute's web development diploma.
- User Experience (UX)
- User Interface (UI) Design
- Features
- Future Implementations
- Accessibility
- Technologies Used
- Deployment & Local Development
- Testing
- Credits
This project was built as a milestone project on my Diploma in Web Application Development with Code Institute as a learning tool for interactive frontend development and my first project using Python and Flask and so there was no specific client. However, in order to create a more professional product I treated it as a real-world application inspired by social media. The aim was to create a site that spreads positive and uplifting messages that users can like and look back on when they want a boost.
- Create an account on the site.
- Add personal details and information onto a personal profile.
- View and create posts on the community page.
- Edit or delete personal posts.
- Like posts from the community page to view on their profile.
- Delete personal account when no longer in use.
In addition to user goals:
- Edit or delete any post from the community page.
- Add, edit or delete post themes from the theme management page.
- I want to be able to create my profile and edit it to my liking.
- I want to view all posts created on the site and like my favourite ones.
- I want to be able to see my liked posts in one place on my profile to read later.
Taking all of the above into account I decided I would need 5 main pages that users can navigate to from the navbar plus 3 pages for adding and editing information:
-
Home Page: When users first navigate to the site they are taken to the index.html page, this provides information to the user about the purpose of the site and it's core values. There is a call to action here for users to register an account or log in. Once a user is logged in, they are redirected to their profile as the "home" instead.
-
Register: Here users can create their account. This is a simple form that asks them to create a username and password, with an extra password field for validation. Users can hide or unhide their password input for accessibility.
-
Log In: Here users who already have an account can log in to view their profile and the community page. They are prompted to enter their username and password. Users can hide or unhide their password input for accessibility.
-
Profile Page: Here users can upload a photo url via the upload modal and delete their profile, as well as view posts that they have liked from the community page. In this current version of the site the user is the only person who can view their profile.
- Edit Profile:: From the user's profile page they can also click a link to edit profile information. Here they can add their name, date of birth and write some information about themselves.
-
Community Posts: Here the users can view posts made by anyone on the site, search for posts based on post title, theme or username, like posts to be saved to their profile, use the floating action button to navigate to create their own posts, and navigate to edit posts using the edit button that appears only if they have created the post.
-
Add Post: Using the floating action button, users navigate to the add post page. Here they can write a title, choose a theme, and write a post description. Themes come with their own custom image that shows up when the post is created.
-
Edit Post: When viewing your own post, an edit button appears in the top corner of the post card. Here users can navigate to the edit post page. This is similar to the add post page, with current post information stored within the input fields.
-
As well as these main pages, Admin can access 3 additional pages as well as edit any post on the site.
-
Manage Themes: Here admin can view all themes that users can post under as well as a preview of the theme images that appear within posts. They can navigate to add, edit, and delete themes. The delete theme button opens a modal to confirm deletion.
-
Add Theme: This takes admin to a simple form where they can input the theme name and upload an image url for the new theme.
-
Edit Theme: This takes admin to a form similar to add theme, but the information for the current theme is available in the input fields.
-
The navigation bar for the site will take users to all main sections of the site with some non-navigation links implemented for adding or editing content. Content deletion is implemented using modals for confirmation. The navbar brand logo will take logged out users to the home page and logged in users to their profile page.
| Navbar? | Logged Out | Logged In (non-admin) | Logged In (admin) |
|---|---|---|---|
| Yes | Home | ---- | ---- |
| Yes | --- | Community | Community |
| No | --- | Add Post | Add Post |
| No | --- | Edit Post (created_by) | Edit Post (Any) |
| Yes | --- | Profile | Profile |
| No | --- | Edit Profile | Edit Profile |
| Yes | Register | --- | --- |
| Yes | Sign In | --- | --- |
| Yes | --- | Sign Out | Sign Out |
| Yes | --- | ------- | Manage Themes |
| No | --- | ------- | Add Theme |
| No | --- | ------- | Edit Theme |
Logged Out Navbar
Logged In Navbar
Admin Navbar
For this site I will be using Mongodb to create a non-relational database. I have chosen a non-relational database for this project to allow for more dynamic and varied inputs across collections.
First draft of the mongodb database collections can be found here.
All wireframes have been created with Figma.
BlissBoost Home Wireframes
BlissBoost Register Wireframes
BlissBoost Login Wireframes
BlissBoost Profile Wireframes
BlissBoost Community Posts Wireframes
BlissBoost Edit Profile Wireframes
BlissBoost Add and Edit Posts Wireframes
The add and edit post pages will be almost identical, with just the addition of "Delete" link in edit post page.
BlissBoost Manage Themes Wireframes
BlissBoost Add Theme Wireframes
BlissBoost Edit Theme Wireframes
Much of the design of the site is based on using Materialize styling across the site. This framework was chosen due to its introduction in the learning materials for this module, providing an opportunity to explore a new framework. Additionally, opting for Materialize allowed me to practice and delve into the functionalities of a fresh resource, aiding in broadening my skill set.
Fonts have been imported from Google Fonts.
-
Kaushan Script: This font is used for the headings across the site with "cursive" used as the back up font style. This font was chosen for its easy-to-read cursive script, which adds a touch of fun and whimsy while fitting the theme of the website, creating a harmonious and engaging visual experience for visitors.
-
Mukta: This font is used for all other text on the site with "sans-serif" used as the back up font style. This font was chosen due to its simplicity, ensuring easy readability while maintaining a relaxed and approachable tone, suited to the website's style without being overly formal.
The colour scheme for the site was kept simple and chosen through materialize color picker to keep styling as seamless and easy as possible. Various shades of cyan are used for navbars, cards and text areas, alternating with white background cards and text areas. The text across the site is white for cyan backgrounds and black for white backgrounds. Shades of deep orange are used to accent flash messages and various action buttons across the site with red shades used for any buttons or links where a user can delete any information pushed to the database.
Main colour scheme for the site
Colour scheme images made with figma using screenshots from materialize.
Favicon
The favicon for the site. The favicon was created using favicon.io.
Navbar
The navigation bar at the top of each page features the brand logo along with different links depending on whether you are signed in or not. The navbar links collapse into a sidebar for smaller screens.
For users not logged in to the site, the home, sign in and register pages are available. Once a user logs in to the site they have access to their personal profile and the community page where they can view posts that have been made to the site.
Footer
The footer contains the copyright information and social media links. Each of the links has a hover effect that fades each icon into its logo color. The social media links open in a new tab.
Home
Here users can use buttons to register or log in to the site.
Register
Here users can input a username and password with password validation. There is a link that directs users to the log in page if they already have an account. If a username already exists or the passwords do not match a message will flash to let the user know. If a user enters correct details they are redirected to their profile page with a flash message confirming their successful registration.
Log In
On this page users can input their username and password to log in. A message will flash if they enter incorrect details. If the user correctly enters their details they are redirected to their profile page with a flash message welcoming them back.
Profile
Edit Profile
Delete Profile
Here users can view their profile. Using the floating action button they can edit their profile, upload a profile picture url and delete their account. Users are flashed a message when they successfully edit their profile or upload a photo. The liked posts section shows the user which posts they have liked, with an option to unlike and remove them from their profile. When selecting the button to delete their profile, a modal appears asking the user to confirm deletion.
Community Posts
Add Post
Edit Post
Delete Post
Here users can view and search for posts that anyone has made on the site. Users can add their own post using the floating action button. Each of the post cards have an action to view the full post and users can like posts to be saved to their profile. If a user has created the post, an additional icon appears in the top corner for users to edit their profile. From the edit profile page users can also delete their post. A modal pops up asking the user to confirm post deletion.
Admin Posts View
Admin Manage Themes
404 Page
The 404 page is a custom page that redirects the user to the main page if they type in an incorrect url.
Because there are aspects of the site where certain users cannot access, defensive programming has been put into place throughout the various routes on the site to ensure that anyone with a link cannot edit other users' posts unless they are an admin, or access any admin areas. Conditional checks have been put into place to ensure that a user is the creator of their own post or an admin before allowing access. If users don't have access to a certain page or if they are not logged in, they are redirected either to their profile page or the home page.
User not Logged in
Unauthorised Profile View
Unauthorised Post Edit
Unauthorised Admin Area
Due to the nature of the site there are many features that can be added that cannot be implemented in the time frame required for the project. The next steps that can be added to the site have been identified as follows:
-
The database has been set up to catch the date users join the site, this will be shown on users' profile pages.
-
The site originally intended for users to be able to upload image files. This is a feature to explore in future.
-
Allow users to view each other's profile pages without being able to unlike other's favourited posts or access any edit functionality.
-
Allow users to comment on each other's posts.
-
Code here includes functionality to redirect a user to the home page automatically from the 404 page. This would be an interesting feature to add in future.
Alternative text has been included for all images across the site.
Aria labels have been included for all links across the site with modals labelled by their headings.
The colours have been kept simple with Materialize color styling implemented across the site. Various tones of only 3 different colors have been used along with simple black or white text based on the background it sits on to ensure readability.
The font used for heading across the site is cursive, however this specific font has been chosen due to its easily readable form. Main text across the site has been kept simple and any small text or links featured have been given accent colors and wrapped in strong tags to ensure that they can still be easily seen.
- HTML
- CSS
- Jquery
- Javascript
- Python
- Flask - Micro framework for site templating.
- Materialize v1.0.0 - The framework for the website.
- Font Awesome - For the iconography on the website.
- Jinja - Templating engine.
- Google Fonts - To import the fonts used on the website.
- Bing Create - For background image and logo generation.
- Favicon - To create the favicon for the site.
- Figma - For wireframes and other graphics in readme.
- Git - For version control.
- Google Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling.
- Heroku - For website deployment.
- MongoDB - The database used for storing information for the site.
- Pip - To install Python packages.
- Red Ketchup - To convert background image to webp format.
- Samsung Talkback - To test accessibility.
- JS Hint - To check the JavaScript code for errors.
- UI.dev - To show the site on a range of screen sizes.
- W3C Markup Validation Service - To validate HTML and CSS code.
This project uses MongoDB for the Non-Relational Database.
To obtain your own MongoDB Database URI, sign-up on their site, then follow these steps:
- The name of the database on MongoDB should be called "blissboost".
- The collection(s) needed for this database should be "posts", "themes", and "users.
- Click on the blissboost name created for the project.
- Click on the Connect button.
- Click Connect Your Application.
- Copy the connection string, and replace
passwordwith your own password (also remove the angle-brackets).
This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
Deployment steps are as follows, after account setup:
- Select New in the top-right corner of your Heroku Dashboard, and select Create new app from the dropdown menu.
- Your app name must be unique, and then choose a region closest to you (EU or USA), and finally, select Create App.
- From the new app Settings, click Reveal Config Vars, and set your environment variables.
| Key | Value |
|---|---|
DATABASE_URL |
user's own value |
IP |
0.0.0.0 |
MONGO_DBNAME |
user's own value |
MONGO_URI |
user's own value |
PORT |
5000 |
SECRET_KEY |
user's own value |
Heroku needs two additional files in order to deploy properly.
- requirements.txt
- Procfile
You can install this project's requirements (where applicable) using:
pip3 install -r requirements.txt
If you have your own packages that have been installed, then the requirements file needs updated using:
pip3 freeze --local > requirements.txt
The Procfile can be created with the following command:
echo web: python app.py > Procfile- replace app.py with the name of your primary Flask app name; the one at the root-level
NOTE: The Procfile uses a capital P and doesn't have a file extension on the end.
For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:
Either:
- Select Automatic Deployment from the Heroku app.
Or:
- In the Terminal/CLI, connect to Heroku using this command:
heroku login -i - Set the remote for Heroku:
heroku git:remote -a app_name(replace app_name with your app name) - After performing the standard Git
add,commit, andpushto GitHub, you can now type:git push heroku main
The project should now be connected and deployed to Heroku!
This project can be cloned or forked in order to make a local copy on your own system.
For either method, you will need to install any applicable packages found within the requirements.txt file.
pip3 install -r requirements.txt.
By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- Once clicked, you should now have a copy of the original repository in your own GitHub account!
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
- Open Git shell or Terminal
- Change the current working directory to the one where you want the cloned directory
- In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/Melody-Lisa/blissboost.git
- Press Enter to create your local clone.
Please see TESTING.md for all testing elements of this site.
-
Code Institute non-relational database management systems module: The entire module was revisited to help set up the app and ensure CRUD functionality across the site.
-
Materialize: Code from this page was used and adapted to create various features across the site, including the navbar, footer, cards for different sections of pages and floating action buttons.
-
Mini Tales: Code from this CI project used to create the like buttons functionality.
-
Stack Overflow: This thread was used to create the route for custom 404 page.
-
W3Schools: Code used to show/hide password inputs from here.
- ChatGPT: Used to generate sample posts on the community page.
- Melody Lisa: All other content created by the developer.
-
Bing Create: This image generator was used to create the site's logo, background image and default profile image.
-
UI.dev: Used to generate images that showcase the responsive design within the readme file.
-
Amy Richardson - Cohort Facilitator: For providing great resources to help with everyone's projects through weekly stand ups.
-
Class of June 2023: Everyone in my class channel on slack who is involved with the stand ups and group chat for contributing to the great atmosphere and supportive environment.
-
The wider slack community: For quick responses to various issues and questions I had at all stages of the project.
-
Friends and Family: For helping me to test my site on various devices and provide feedback.