-
This project aims to build a full-stack web application using the python micro-framework Flask, MongoDB database, HTML, Css3 and javascript.
-
I have decided to build a social media blogging platform aimed at new developers to share notes on code they have learned with other each other.
-
My application features a posting forum with full CRUD capabilities, a comment feature, a like feature, user signup and log-in, a customizable user account, and an admin section.
-
For assessor I have included the admin login details in the comments section when submitting the project.
- User experience
- Design
- Features
- Technologies used.
- Testing
- Deployment
- Credits
Table of contents generated with markdown-toc
-
New Visitor
- As a new user, I would like to know what the website is about upon opening the site.
- As a new user, I would like to get information about the website.
- As a new user, I would like to see some posts on the site.
- As a new user, I would like to easily register for the site.
- As a new user, I would like to add a bio and an image to my user account..
- As a new user, I would like to add a new post to the blog.
-
Repeat users
- As a repeat user, I would like to easily login upon opening the site.
- As a repeat user, I would like to be able to like posts.
- As a repeat user, I would like to be able to comment on posts.
- As a repeat user, I would like to edit and delete my posts.
- As a repeat user, I would like to be able to edit and delete my account.
-
All users.
- As a user, I would like to get feedback when I have completed an action on the site.
- As a user, I would like to be able to contact the website owners if there is an issue.
-
Website owner
- As the owner, I want the user to be able to find information easily.
- As the owner, I want the user to be able to sign up or log in easily.
- As the owner, I only want users who have signed up and logged in to see the full post page.
- As a site owner, I only want the user to be able to delete their own posts or comments.
- As a site owner, I want to be able to see how many users there are and how many posts.
- As a site owner, I want the ability to delete any post regardless to who has written them, eg they are offensive etc.
-
I've created WireFrames using Balsamiq and have included the links to access them in pdf form.
- Phone
- Tablet
- Desktop
-
My database consists of four collections. - Users - Posts - Categories - Comments.
-
Users
- The Users collection contains information about the user.
- It also contains a, one to many relationships with the Posts models for the users who liked posts.
-
Posts
- The Posts model contains the information for each post.
- It also contains a relationship with the usermodel for the Post author field.
- It then contains 2 list fields.
- One for the users who have liked the post.
- A list of the id for each comment on the post.
- It also contains a relationship with the category model for each post.
-
Categories
- The category model contains a category name which and id which is then referenced in the posts model.
-
Comments.
- The comments Model contains each comment's content and date.
- It then contains a reference to the users id who wrote the post.
- It then also contains a reference to the id for the post, it belongs too.
-
My database schema is shown in the following diagram.
-
mongodb was used as the project database.
-
I followed the following steps to set it up.
- I signed up to Mongodb and selected the create a shared cluster option.
- I selected Aws as my cloud provider and then selected my region.
- Then I selected The M0 cluster tier.
- I then named my cluster and created it.
- Once the cluster was created I clicked on database access and added in the database user details.
- Then I set the database user privileges to read and write to the database.
- I then clicked add a user.
- Then in the security menu, I clicked on network access.
- Then click on the add IP address.
- I then allowed access from anywhere.
- Now we can start to add collections.
- I clicked on add my own data and then named my database and collection.
- To connect to the database I clicked on the connect button then the connect your application button.
- Then I copied the Url and placed in within an environmental variable in my app.
- I then used Flask-Mongoengine to interact with my database from the application.
-
I've created a light theme for this website using a stone background colour named cultured. My text is in black to contrast against the lighter background. I have used a bold Imperial red colour for the navigation background and button hovers to give the site a pop of colour.
-
-
I've used one font in different weights for headings and text element across the site to create a uniform theme throughout all the text. I've imported the Syne font to my CSS stylesheet from Google Fonts. I used sans-serif as a fall-back font in the case for any reason my fonts were not imported.
-
-
-
When a user opens the site they are presented with the landing page.
-
It contains a clear title and information about the application.
-
There are also links to signup or login.
-
There is an about us section and there is a section showing the last four posts that have been posted.
-
-
-
-
The navigation menu has been made interactive by the use of javascript.
-
When the user clicks on the hamburger icon the navigation will appear.
-
The navigation items have been coded to change when a user has signed up and logged in.
-
-
-
-
The about us page gives the user information about the site.
-
-
-
-
The contact us page contains a heading and a contact form.
-
Upon submittal of the form Flask-mail will send the site owner an email containing the message and the user's contact information.
-
-
-
-
The signup page contains a form for users to sign up.
-
Once the user fills the form and submits their details are stored in the database.
-
The user is then directed to the login paged and a message is flashed to say that signup was successful.
-
-
-
-
The login page contains a form for the user to login.
-
Once the user enters the correct details they are logged in and redirected to the recent posts page.
-
A message will flash to tell the user they were logged in successfully.
-
-
-
-
Each user has access to an account page containing their details.
-
The user then has the options, to update or delete their account.
-
-
-
-
The updated account page contains a form to allow the user to update their account information.
-
Upon opening the form details will be prefilled with information from the database.
-
Here they can also add a bio about themselves.
-
They can also add a user image.
-
The user image is sent to Cloudinary and the response URL is then stored in the database including sizing parameters.
-
-
-
-
If the user decides to delete their account they will be presented with a modal to confirm this.
-
If the chose to cancel they will be directed back to their account page.
-
If the click delete their user details and any posts and comments they have made will be deleted.
-
-
-
-
The user must log in to see this page.
-
Once a user has logged in they will be directed to this page.
-
The posts are shown by most recent and they are paginated showing 4 posts per page.
-
The user can then click on the find out more option and be directed to the post page to see the full post.
-
-
-
-
This page will display each post and its comments and likes.
-
-
-
-
Each user can add posts to the application.
-
This page contains a form for the user to add their post.
-
On form submittal, the post is then saved to the database.
-
-
-
-
If the current user has written this post they will be presented with the update and edit buttons.
-
They will not show for any other user apart from the admin.
-
-
The user can then change their post details here on the update post page.
-
Upon opening the form will prefill with data from the database.
-
Upon form submittal, the data will be saved to the database.
-
-
-
-
If the user decides to delete the post they will be presented with a modal to confirm this.
-
If the chose to cancel they will be directed back to the post page.
-
If they click to delete the post will then be deleted.
-
-
-
-
Each post has a comments section where a user can leave a comment.
-
Once the user submits a comment it is saved in the database.
-
Each comment can then be updated or deleted by their author or the admin user.
-
-
-
- Each post also has a likes button that a user can click to like the post.
-
-
The is also a search function to search through the posts
-
On form submittal, the application will search the posts in the database.
-
If no results are found the user is redirected back to the referral page and a message is flashed to say that there were no results.
-
There is a categories list also to show posts for each category.
-
-
-
-
The application has been coded to have an "admin" user.
-
The admin has access to the dashboard page.
-
If a user gets to this page who isn't admin they will get a 403 error.
-
The dashboard contains information on the number of users and posts.
-
It also gives the function to add, edit or delete, categories.
-
If they want to delete a category they will get a warning screen to confirm this action.
-
The admin also has access to delete posts and comments in case they contain content that isn't allowed.
-
-
- I have created an errors blueprint to deal with page errors.
- I have used the flask app_error handlers to render the error pages.
- Each page contains a reason for the error and a navigation link to return to the home page. It also has access to the navigation menu.
- 404 - not found an error
- 403 - no permission error
- 500 - server error.
In the future, it would be nice to implement some other features.
- A feature to follow other users.
- A notification feature when someone comments on or likes your post.
- A more detailed account page that users can search each other.
- The application was built on the Flask framework.
- I've used Flask Blueprints to split my application up into modules.
- Main
- Users
- Posts
- Admin
- Errors
- This makes it easier to find routes and elements if they need to be updated or changed.
- The templates folder is also split into a similar structure.
- Base
- Admin
- Errors
- Main
- Posts
- Users
- I've also created a
config.pyfile for the apps configuration settings. - Then within the applications
__init__.pyfile I've created the app as a Flask application factory. Initialising my extensions and importing and initialising my blueprints. - Then in the
app.pyfile the application factury is imported and the function is the invoked ie.app = create_app()which then creates the application.
-
- HTML5 was used to create the content and base of each page.
-
- CSS3 was used to then style the page and make it responsive through media queries, and interactive through using CSS transitions.
-
- javaScript was used throughout the website to make the site interactive.
-
- Python was used to build the backend functionality of the web app.
-
- Flask micro framework was used to build the web app using python code.
-
- Flask bcrypt was used to has the users password before storing it in the database.
-
- Flask login was used to manage logged in users.
-
- Flask mail was used to send an email for the contact form.
-
- Flask mail was used to send an email for the contact form.
-
- Flask mongoengine was used to interact with the database.
-
- Flask mongoengine was used to interact with the database.
-
- Flask-Wtf was used to created the forms and validate them.
-
- Gunicorn was used to help deploy the application to heroku.
-
- Cloudinary was used to store the users profile image.
-
- I imported the Mulish font from google fonts and used it consistently across the site.
-
- I used different icons from Line awesome for icons in the application.
-
- Materialize Css was used for its grid system and it's form inputs.
-
- I used quick database diagrams to make a digram of my database schema.
-
- Git was used as a version control in the terminal.
-
- Github was used to create and store the project repository.
-
- Gitpod was used to create my files and code the project.
-
- Balsamiq was used to create Wireframes for the project during the initial planning stage.
-
- Am I responsive was used to taking screenshots of the page at different screen sizes.
-
- jQuery was used to initialize materialize functions.
-
- Cypress was used to writing and execute automated tests for the page.
-
- Markdown toc was used to create my table of contents.
-
- The testing section for this site is located at the following link.
-
-
I first signed into Github and located the Code Institute Gitpod template.
-
-
I then clicked the use this template button.
-
-
I then named the repository and created it.
-
-
Once the repository was created I could then open it on Gitpod.
-
I then used my terminal to create my files and folders and start coding the application.
-
-
-
Throughout the project I used git to save and store my progress.
-
Once I completed a section I used git add command to add the changes I had made to the staging area.
-
git add <filename>
-
-
Once the file was staged I the used the git commit command to commit the changes.
-
git commit -m "commit message"
-
-
Then the changes were pushed to Github using git push command.
-
git push
-
-
The above steps were used for each stage of development throughout the project.
-
-
- The project has been deployed on heroku. To achieve this I followed the following steps.
-
Create a requirements.tx file typing the following command into your terminal.
pip3 freeze --local > requirements.txt -
Then create the procfile by typing the following comand into the terminal.
echo web: python app.py > Procfile -
Once your procfile has been created make sure there is no blank line at the end of the procfile as it can cause isssues if there is.
-
Signin to Heroku.com and select new button then the create a new app option.
-
-
Then name your app and select your region. Your name must be unique.
-
-
Then click the create app button.
-
On the next screen click the connect to github buttton.
-
-
Then add your projects repository name and search for it.
-
-
Once the repository has been found click connect button.
-
Then click on the setting button
-
-
Then click on the reveal config variables button.
-
Add your config variable key values to this section.
-
-
Confirm that both your Procfile and your requirements have been commited and pushed to github.
-
Then enable automatic deploys and then click the deploy branch button.
-
-
Heroku will now build and deploy your application. It will also automatically update it everytime you add a commit to your github repository.
-
- I have used code from my milestone 2 project for the interactive navigation menu and for the elements to fade in on load.
-
- I used the above code to help me understand using the Usermixin class for flask Login.
-
- I used the above code to fix an issue I had that when a user logged out and hit the back button the cache was allowing them to still visit a page they needed to be logged in for.
-
- I used the above code to help with an issue with the csrf tokens id's.
-
- Sante is a project by another code institute student I noticed on the slack, code peer review channel.
- I noticed she had a like function which was something I wanted to implement also.
- I used her code for the like function as inspiration, and her code helped me understand how to implement this function within my own project.
-
-
I used a number of tutorials and youtube tutorials to increase my learning of flask better.
-
-
- I used the above tutorial to help me understand flask better. It was here I learned about blueprints and application factories and structuring my application.
-
-
-
- I used the above tutorial to again help with my understanding of building a flask application.
-
-
-
Corey Schafer flask web series
- I used the above you tube series to help me understand how to implement the blog functionality within my app.
-
-
- I used the above tutorial to help place a smooth transition between page changes. I have adapted the code to fit this project.
-
-
-
-
My version of the todo application
- I used the Code Institue task management application to help with this project also.
-
-
-
- I used this code from webaim to create a sr-only class as I wasnt using bootstrap.
-
-
All Text for the website was written by myself.
-
Text for the posts has been taken from wikipedia.
-
User images have been taken from unsplash.
-
Code Institute for getting me to this point
-
My Mentor for his help with this project.