The aim of the project is to create a full stack site that allows users to Create, Edit, Read and Delete data in a way that's easily manageable for all users as well as giving them a great user experience.

Please see the link to the live page below:

https://quahog-bulletin.herokuapp.com/

The purpose of the project is to create an online platform for the inhabitants of the fictional city of Quahog to create posts in certain categories- much like they would put their flyers or posters on a real-life bulletin board.

This way the registered user can easily take part in the life of their community. They can look for updates from the local council; they can post ads and invitations to events, clubs, goups and so on. They can offer and ask for help and put their possessions up for sale.

Unregistered users can still view the post but the site doesn't allow them to create their own posts or to save them for later.

As a user I want to create new posts in different categories

As a user I want to upload photos to my posts.

As a user I want to be able to edit or delete my posts.

As a user I want to see announcements created by the city council.

As a user I want to see what other users posted in each category.

As a user I want to be able to save posts that I find interesting and view them in my profile page.

As a user I want to see who created each post and how to get in touch with them.

As a user who has admin rights I want to be able to add a new category if needed.

As a user who is in a hurry I want to be able to filter the posts in each category for certain keywords.

As a user who is not a resident would like to see what's going on in the city anyway.

As a user who would like to get in touch with the Council directly I am interested in the contact details of the City hall.

The page has a white background with a blue navigation bar and footer. The colour scheme is consistent with the original colours of the animated series Family Guy where I got the city name and the registered users from. The registration page, login, categories and posts are displayed on cards with a light yellow background.

Buttons with different functions have different colours for better user experience.

The design is responsive on all viewports with the menu displaying as a sidenav on medium screen size and below.

There are some differences between the wireframes I initially crated and the completed project, because sometimes I found a better way to execute my ideas during development.

Homepage

Login

Register

Profile

Boards (Categories)

Create post

View post

Edit post

Admin functions

• Navigation Bar: I have created the navigation bar using Materialize Nav bar with Icon Links and I have also included the Mobile Collapse Button. I added a dropdown option to one of the menu items.

• Page title: The page title appears will in the navigation bar on the right throughout the entire website and acts as a link to the home page when clicked.

• Mobile Collapse Button / Sidebar: The Mobile Collapse Button will appear on medium and small screens and shows the side navigation bar.

• Tooltips: Materialize tooltips show up to give the user further explanation on the purpose of certain fields such as in the registration form.

• Footer: from Materialize to include the contact details for the City Hall and copyright information.

• Contains an input form where the users can enter their username and password.

• Flash message appears if the username is not valid or if the password is incorrect.

• "Register here" link below the form to get redirected to the registration page.

• The app is accessible for read only to anyone, registered users have access to more functions such as creating, editing, saving and deleting posts.

• Contains an input form where the user can enter their details and choose a username and password. A tooltip over each line gives the user helpful tips.

• Flash message appears if the chosen username is already in the database.

• In order to store the passwords securely in MongoDB, the passwords have been hashed.

• After successful login, the user is greeted by a flash message.

• The User's profile page is divided into 2 sections: the top section contains all posts created by the user, the bottom section contains posts created by other users that the current user saved for easier access.

• The User has permission to edit or delete their own posts from here and also to remove posts from the saved section.

• This page has been created to display all categories and to give an idea to the user what each category entails.

• The content is displayed on cards, each of which has a link on the bottom to the page containing posts within each category.

• Admin is able to add a new category (AKA Board).

• This page has been created to display all posts in each category.

• The truncated content of the post is displayed on the cards, each of which has a link on the bottom that takes the user to a separate page where they can view the full details of each post.

• There is a floating action button in the top left corner of each card which reveals some icons. If someone else created the post, the user can save it into their own collection of posts on their profile page. If the user created the post, the user is able to edit or delete the post by simply clicking on the relevant button which appears on mouse hover.

• There is a search field where the user can perform a keyword search.

• The user first selects a category for the post. They can choose from all categories except Announcements which is reserved for Admin.

• The user can give a description, add contact details (name, phone number, address website etc.) if they wish.

• The user can upload a photo to their post by which will be saved in the database as well.

• The new post is created when the User clicks the Save button. The app displays a flash message to let the user know that the post has been created.

• The user can select any post that they created. They are taken to the Edit post page.

• The user can change every input field or upload a different image.

• The post is updated when the User clicks the Done button. The app displays a flash message to let the user know that the post has been updated.

• The user can delete any post that they created.

• The delete icon (trashcan) appears when they hover over the Floating Action Button.

• On clicking the icon a popup message appears asking for confirmation.

• The app displays a flash message to let the user know that the post has been deleted.

• Admin user is able to create posts on the Announcements page or from their profile page. They don't have access to any other categories from the dropdown list.

• They are also able to create or edit categories as well as posts. There is an icon on the page and also an additional menu item named Create Board available for Admin only that serves this purpose.

• I created templates and routes for handling 404 and 500 errors and to give the users customized feedback of the error.

• Allow users to upload multiple images to each posts.

• Allow users to delete their account.

• Allow Admin to manage users and posts and delete categories.

• Add pagination.

• Add a comment section where the users can have a conversation with each other.

I am using MongoDb Atlas as a database for my project. I created a new database within Mongo and added 3 collections: categories, users and posts as seen in the schema below.

• HTML5 

• CSS3 

• JavaScript

• Python3

• Jinja templating language

• Flask framework

• Materialize style library

• Balsamiq app for creating wireframes.

• Am I responsive? to demonstrate responsiveness in this README file.

• Font Awesome for icons.

• Google Fonts

• Icons 8 for sidenav icons

• MongoDB Atlas

I used Google Chrome throughout the development. I used the Development tools throughout the whole process to help me with styling issues and make sure the site is responsive. The app has been tested on Firefox and Microsoft Edge. The app has been tested on mobile versions of Google Chrome and Safari and works without issues.

As user 1 I am able to create new posts in different categories from my profile or the category's page by clicking on the Create post icon. I am taken to the Create Post page where I can fill in a form and upload an image.

As user 2 I am able to upload a photo to my post from my computer when creating or editing the post by clicking on the Upload image button.

As user 3 I can edit or delete my posts. I can access these features from my my Profile page in the My posts section by hovering over the Floating Action Button in the top left corner of each post and choosing the relevant icon. Alternatively, I can view my post and access these options from here.

As user 4 I can see announcements created by the city council by clicking on the Announcements link on the Boards page or in the navbar. I am not able to create a new post in this category.

As user 5 I can to see what other users posted in each category by selecting the relevant category's page from the navigation bar's dropdown or from visiting the Boards page (see all navigation option). Each post is displayed on a card on a light yellow background and contains a link which takes me to a page where I can read the full post.

As user 6 I can save other users' posts by moving my mouse over the floating action button on the top left of the card and clicking on the save icon. They are displayed in my profile page from where I can remove them in the same fashion, by clicking the - button.

As user 7 I can see who created each post just by looking at each card or clicking on "view post" to reveal the full post content.

As Admin I can create a new category from the Boards page and upload a cover image for the card representing the category. As Admin I also have an extra icon in the navigation bar "Create category".

As user 9 who is in a hurry I can use the search field on each category's page to filter the posts for certain keywords. I can save posts as favorites so I can find them easily later on my Profile page.

As user 10 who is not a resident I am allowed see what's going on in the city without logging in. I have access to categories and can view the posts, however I can't interact with them as registered users can.

As user 11 who would like to get in touch with the Council directly I can find the contact details and opening hours in the footer of each page.

I used https://validator.w3.org/ to validate the HTML code.

I used https://jigsaw.w3.org/css-validator/ to validate the CSS code.

I used https://jshint.com/ to check the JavaScript code.

To insert an image into MongoDB I learned from the Pretty Printed Youtube channel which I discovered when looking at the code from this project: https://github.com/elenasacristan/CookBook It did not work for me at first so I asked for tutor advice. They suggested that I find an alternative storage for the images as MongoDB is not the best solution for this. In the end I decided I am not giving up on this as I've seen it work on the video and on a live example as well. It seemed that the code worked after all and there was a connection issue with MongoDB. The code now works and I am able to insert images.

I wanted Admin to have rights to create a post in the Admin category, and all other users to every other category. In order to achieve this I had to figure out how to filter the dropdown list . I first specified which category the Admin user should have access to by using an if statement; and second I created an if statement inside a for loop for every other user, excluding the category I don't want them to be able to use by using a != operator.

To create an option for marking posts as favorites and displaying them on the User's profile page I required guidance from my Mentor as I wasn't able to find a useful example that I could study. The solution was to create a new key-value pair in the user object "favorite_posts" which takes the post_ids as values. This is used in the save_post function in the application so that if the save button is clicked it updates the user's object.

I created a GitHub reposiroty using the Gitpod full template as my basis.

I installed Flask, Flask-pymongo and dnspython.

I created an env.py file that contains my environment variables:

import os
os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "THIS_IS_A_SECRET")
os.environ.setdefault("MONGO_URI", "mongodb+srv://KKMongo:[email protected]/DATABASE_NAME?retryWrites=true&w=majority")
os.environ.setdefault("MONGO_DBNAME", "bulletin")

I added env.py to gitignore file along with pycache/

I created the app.py file and added the import env as well and added the dependencies:

import os
from flask import (
    Flask, flash, render_template,
    redirect, request, session, url_for)
from flask_pymongo import PyMongo
from bson.objectid import ObjectId
from werkzeug.security import generate_password_hash, check_password_hash
from werkzeug.exceptions import HTTPException
if os.path.exists("env.py"):
    import env


app = Flask(__name__)


app.config["MONGO_DBNAME"] = os.environ.get("MONGO_DBNAME")
app.config["MONGO_URI"] = os.environ.get("MONGO_URI")
app.secret_key = os.environ.get("SECRET_KEY")

mongo = PyMongo(app)

I used Gitpod to track changes in the website by making regular commits with descriptive titles and pushed them to my GitHub repository.

I added the below code to the end of the app.py file and changed debug=False when I finished development.

if __name__ == "__main__":
    app.run(host=os.environ.get("IP"),
            port=int(os.environ.get("PORT")),
            debug=True)

The project is deployed to Heroku: https://quahog-bulletin.herokuapp.com/ . In order to do this I closely followed the tutorial videos on Heroku which are part of the course.

First I created a new app in Heroku called quahog-bulletin.

I created requirements.txt and Procfile that Heroku requires to run the app:

pip3 freeze -- local > requirements.txt

echo web: python app.py > Procfile

I pushed both files to GitHub.

Then on the Deploy tab in Heroku I enabled automatic deploys to the master branch:

First I clicked on Connect to Github, added my repository name and clicked connect.

Then in the Heroku app's settings (Config Vars) I've added my environmental variables for the IP, PORT, MONGODB_URI and SECRET_KEY.

Then back on the Deploy tab I clicked Enable automatic deployment and clicked Deploy branch. I waited until Heroku notified me that the app was successfully deployed.

During the development I relied on the Data Centric Development course material, I used many solutions I learned from the the Task Manager and Thorin and company projects.

Another important source was the Materialize style library which I found easy to work with. I used code from here to build navigation, modals and cards.

I watched tutorial videos such as the Pretty Printed Youtube channel and the following source: https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world.

I also used the Flask Documentation when doing my research.

My code for creating alert is from Stack Overflow.

The user's names and city hall image are from the Family Guy fanpage

Card cover images are from Freepik.com, menu icons from Icons8.com.

Many thanks to my Mentor Guido Cecilio Garcia Bernal for offering guidance and constructive crticism. Similarly, the Tutors at Code Institue were a big help when I got stuck in the process. Also a big thanks to the Slack community who helped me brainstorm when I needed it.

The page has been created for educational purpose only, not for commercial use.