GitHub Repo Happy blogging!
Welcome to Blog It, a webapp to helps bloggers with similar interest interact with each other! This is a Python Flask app using MongoDB and Flask Mail to produce a social blogging application.
Blog it brings bloggers together and allows them to interact and share their interests in similar subjects! Anyone can write on Blog It. Thought-leaders, journalists, experts, and individuals with unique perspectives can share their thinking here. The application lets users create a profile that allows them to add their details, add photos, let other users know when they last posted,how many followers they have add comments both and private message each other. The site offers the additional functionality; reset passwords, change passwords contact us, editing and deleting comments, backend validation. Please look at the features section for a more detailed description.
- User Experience (UX)
- Strategy
- Scope
- Structure
- Database
- Validation
- Security
- Features
- Design
- Skeleton
- Surface
- Technologies
- Testing
- Deployment
- Known Bugs
- Acknowledgements
Everyone has got something interesting to say or even full depth of knowledge about a particular subject. Blog it enables people to blog about anything and everything and also provides users with a way to communicate with others and attain information about a particular subject.
- Have a interest in writting blogs
- Reading blogs from other bloggers
- Have an interest in being part of a blogging community.
- Have an interest in gaining knowledge far beyond his/ her neighbourhood or circle.
- connect with fellow bloggers from around the world.
- As a new user to the website, I want to understand the purpose of the site and how to interact with it.
- As a new user,i want to explore blogposts written by other bloggers easily without registering
- As a new user ,I would like to easily register
1.As an existing user to the website, I want to be able to easily sign in. 2.As an existing user to the website, I would like to be able to delete my account 3.As an existing user to the website, i would like to be able to reset my password incase i forgot my previous password 4.As an existing user to the website, I would like to be able to add/read/edit and delete my blogposts. 5.As an existing user to the website,I would like to see the blogs by other people to decide which blog I would like to read. 6.As an existing user to the website, I would like to easily add new blogs. 7.As an existing user to the website, I would like to be able to upload a profile photo or change my profile photo. i. If I don’t have a profile photo, I'd like to have a choice of placeholder (default avatar).
Create a simple, intuitive, and responsive website that acts as a respository of blogs that users can browse and contribute to.
The structure should adhere to convention and be simple and intuitive, ensuring the user always knows where they are, how they got there and how to get back to where they started.
The design should be simple, utilising the same colour palette,
Any addition features or functionally are out of scope at this stage.
- To find blogs from different authors and various categories.
- To be able to write , read, edit and delete blogs.
- To be part of a social blogging platform.
- To build on and expand the community for bloggers and readers around the world.
- To create a safe and welcoming platform for users to share their passion for blogging.
- To encourage bloggers to create their own blogs for other readers.
- The ability for admin to edit and delete any inappropriate blogs to keep the platform safe and welcome for bloggers.
- User Registration: allows new users to create an account so they can log in.
- User Log-in: allows existing users to log in using their username or email and password. Passwords are hashed for security reasons. Log-in is required to read , post your own blogs and give feedback.
- User Profiles: allow users to tell others about themselves, provide a username, and users can see blogs created by themselves of their profiles
- A user must be logged in to edit their own profile. A user cannot edit someone else's profile.
- A user must be logged in to view messages and interact with other members.
- Password reset page- allows users to reset their password incase they had forgotten it.
- Expore: This allows both non registered and registered users to explore blogposts in the system that all the users have written.
- Search: allows a registed bloggers to search for blogposts by simple words and more complex phrases
- Logout : allows a user to securely logout of the page.
- Admin role - The admin can Create ,Read ,Update and Delete blog categories.
- Admin may also delete blogs written by users that is considered inappropriate.
- Allow users to upload their own cover image for a blog.
- Allow bloggers to rate other people's blogposts.
- Allow bloggers to search for blogposts based on other users' ratings.
- Allow admins to block/suspend users when necessary.
- follower feature
- comments feature
- upload profile pic
- incoporate a blog editor in the write new blog page.
- implement a better editor in the write a blog page to ensure proper paragraghing/ design and possibly add symbols and image
-
A logo in the top left hand corner, that not only forms part of the branding and design of the site but also as is consistent with a user's expectations, clicking the logo will return the user to the home page of the site.
-
A responsive, collapsible navigation bar, allowing users to easily navigate the site on any device.
The home page introduced users to the site and with a call to action button to direct thm to register. users may also contact the site owner incase of any unforeseen issues.
Here the both unregisstered and registered users may view and read blogs created by registered logged in users. The user can also search for a blog based on single words or text phrases.
The registration page allows a user to register an account. To register a user is required provide a username, email and password. Validation has been added to form. The Registration page also provides a link to the Log In page if a user has already registered and simply needs to log in, once a user is registered , he or she is redirected to the log in page.
The Log in page allows registered user to log in to their account in order to view their own blogss, add a new blog, edit or delete one of their own blogs. The Log In page also provides a link to the Registration page if a user hasn't yet registered.
This page displays a form to the user to enable them to create a new blog. The user first selects a category from a dropdown list, then enter the title of their blog, content,publish_date ,read_time, created_by and hashtags the content/text area allows up to 2000 words and is expandable. The user then clicks submit and their blog is saved in MongoDB and visible on the site. This page is not accessible to users that are not logged in.
This page displays a form to the user to enable them to edit their blogs. The same form that is used to add blogs is shown again and is prefilled with the original information. The user can then edit their blog and click the edit button to update their blog, there is also is the option to click cancel if they have changed their mind and no longer want to make any edits.
This page is specific to the blog that has been seleted to edit and is only available to the creater of the blog when they are logged in.
This is an admin only area and allows an admin to create, edit and delete categories on the front end. This page displays a list of categories available to users, the categories have an edit and delete icons to allow an admin to either make edits to a category or to delete one. The page also has an 'Add Category' button to allow an admin to create a new category.
All user generated content is stored in mongo db. There are three collections for blogit db.
- users
- categories
- blogs
- HTML5 - Mark-up language using semantic structure.
- CCS3 - Cascading style sheet used to style.
- JavaScript - Programming language.
- Python - Programming language
- Flask - Framework + Extensions
- Materialize - CSS Framework for structure, buttons, and some styling
- jQuery - Materialize initialising
- Favicon - was used for creating the favicon
- Gitpod.io - for writing the code. Using the command line for committing and pushing to Git Hub
- GitHub - hosting repositories
- GIT - Pushing code to repositories
- Google fonts - for the font
- Font Awesome - for icons used
- Beautifier - for helping to keep code tidy
- Random Key Gen - to generate a random secret key
- Power Mapper to check for browser compatibility
- Temp Mail
wireframes - for planning of site flow, creating wire frames and general mind mapping
The application was built using the Flask Framework which is reliant on the Jinja templating language. The application was written in python.
I used the following Extensions:
- Flask Mail - For emailing users
- Flask-PyMongo - For interacting with the MongoDB database
- Werkzeug - For providing security’s, password_hash, check_password_hash
I tested the site in the following ways:
-
I used the inspector tool to test the site in all the screen sizes and devices available in the Chrome developer tool. In addition to this I also tested it on live devices, including but not limited to iPhone, iPad, MacBook Pro, MotoG7.
-
I also viewed my site in multiple browsers including, Chrome, Firefox and Safari in terms of design, responsiveness and functionality
- HTML Validator - checking the validity of code
- CSS Validator - checking the validity of code
- JSHint- Testing and checking JS. - checking for errors in code
- Pep8 Online - Testing and checking PEP8 compliance
- Am I Responsive - checking whether the site is responsive.
- DEV Tools - Lighthouse
- All links were tested to ensure there were no broken links and that all links to external sites open in a new tab.
- In addition to testing with the inspector tool, real devices and validation tools, I also work through a series of test cases, to ensure that the site met the users stories and that any functionality that was added worked as intended.
- As a new visitor to the website, I want to understand the purpose of the site and how to interact with it.
- The home page of the site features a title and an introduction with an explanation of the purpose of the site and how to interact with it.
- As a new visitor to the website, I want to find blogs easily from fellow blogggers without the need to register.
- There is no requirement to register to view blogs. The blogss are the main feature of the site and are visible from the explore page for all visitors to view.
- As a new visitor to the website, I want to be able to register easily.
- The nagvigation is clear and has a item named 'Register', when a user clicks on this nav item they are brought to a simple form, with clearly labelled fields, placehold text and a clearly marked 'Register' button.
- As a logged in visitor to the website, I want to be able to easily add a blog..
- When a user logs into the site there are now options available to them in the navigation bar. When a users click 'write a blog' in the navigation bar, they are taken to the add_blog page. This page displays a form to the user to enable them to create a blog, The user first selects a category from a dropdown list, then enter the title,content,date,created_by, read_time and tags, and finally selected a . The user then clicks submit and their blog is saved in MongoDB and visible in the site.
- As a logged in visitor to the website, I want to be able to easily edit my blogs.
- When a user logs into the site there are taken to their blogs, from there they can easily view, or select to edit or delete their blogs. If they click on the edit button within a blog listings they are taken to a page that consists of a form that is prepopulated with the orginal blog data. The user can then then edit their blog and click the edit button to update the blog , there is also the option to click cancel if they have changed their mind and no longer want to make any edits.
- As a logged in visitor to the website, I want to be able to easily delete my blogs.
- When a user logs into the site there are taken to their blogs, from there they can easily view, or select to edit or delete their blogs. If they click on the delete button within a blog listings a pop up modal appears asking the user to verify that they want to delete their blog. If the users click the delete button on the modal, their blog is delete from the database and no longer appears in the site.
- As a logged in visitor to the website, I want to be given visual confirmation when I edit or delete my blog that the update has been successful. When a user is logged in and and adds, edits or deletes a blog, a message is flashed to confirm that the action has been carried out successfully.
- As an admin, I want to be able to edit or delete any blogs to remove any inappropriate content. When an admin is logged in, the edit and delete buttons are available to them on all blogs allowing then to edit or delete any inappropriate blogs- an orange delete button is present to show its a blog not written by admin.
- As an admin, I want to be able to easily add, edit or delete categories within in the site rather than having to access MongoDB.
- When an admin is logged in a new nav item is added called Categories. Clicking on this page allows an admin to view exisiting catgories, as well as edit or delete them. Additionally there is an add category button allowing then to add a new category on the front end.
- While logged out, make sure you can see all the nav links for logged out and unregistered users:
- home
- explore
- sign in
- register
- While se logged out make sure that you can see welcome page that are on the home page, and that it includes the following:
- nav-links
- 2 background parallax images
- 3 column information/how to get started
- 1 CTA get started button
- contact us btn
- footer with quick links info , logo and copyright.
- While logged out make sure that you can see all recommendations that are on the home page, and that each recommendations included the follow:
- Category name_
- title
- content
- tags
- Created by
- published date
- While logged in, make sure you can see all blogs and that any blogs that was created by you, now has the edit and delete button on them.
- while logged in , make sure you can see blogs written by you on your profile page.
- While logged in as an admin, make sure you can view all blogs and blog categories and that all categories blogs now have the edit and delete button. so the admin may delete inappropriate blogs created by users but may not edit blogs created by other users.
- admin can delete and edit blogs created by him /her
- admin can also create edit and delete blog categories
Type a word into the search box that you know there isn't match for in the DB, ensure that the flash messaging saying that "Sorry ,No results were found ". Click the reset button and ensure all blogs are visble again. blogs that match that criteria are visible. Home: Filter functionality
Click on the word filter above the blogs and ensure the filter option buttons are visible. Click on each button in turn and ensure that only recommendations that match that filter are visble. Ensure there is one filter option that has no corresponding entries in the DB and then click on the option, ensure the flash messagin saying "Sorry ,No results were found".
- Firstly complete the fields, click submit and ensure that the data is saved to the DB.
- Attempt to submit the form with empty fields and ensure that valitation errors are displayed.
- Attempt to submit the form without a correctly formatted email address and ensure validation error is displayed.
- Log in with valid data and ensure flash message is show to confirm that the data has been submitted.
- Log in with valid data and enusre you are taken to the profile page.
- Attempt to register with a username that you know already exists and ensure the error message is shown and you are redirected back to the register form.
- Attempt to register with an email that you know already exists and ensure the error message is shown and you are redirected back to the register form.
- Click on the 'Log In' link at the bottom of the registration form and ensure you are taken to the Log In screen.
- While logged out ensure that you can only see 'Home','Explore 'Log In', and 'Register' in the navigation bar.
- Log in with valid credentials and ensure you are logged in and directed to your profile page and you can now see 'profile', 'write a blog' and 'Log Out' in the navigation.
- Attempt to log in with invalid credentials and ensure that an error message is displayed on screen and you are redirected to the Log In screen.
- Click on the 'Register here' link at the bottom of the form and ensure you are taken to the Registration Screen.
- While logged in, click on the 'Log Out' item in the navigation bar and ensure that you are logged out, that you see the success confirmation message and that you can now only see 'Home', 'Log In', and 'Register' in the navigation bar.
While logged in, navigate to the explore page and ensure you can see all the blogs that you have added. While on the profile page ensure that a greeting and your username are visible in your profile. While on the explore page click on the edit button and ensure that the Edit blog page opens. While on the explore page click on the delete button and ensure that a pop up verification modal appears.
- While logged in, navigate to the write a blog page and ensure the form loads and all fields are visible
- While on the write a blog page ensure that all the categories are visible in the category drop down.
- While on the Write a blog page ensure that all the levels are visible in the category drop down.
- While on the write a blog page try to submit the form with fields left blank, ensure that custom valitation message is shown. Do this with each field in turn.
- While on the write a blog page check the textarea/ content feield to see the data length - only upto 2000 words allowed.
- While on the write a blog page try to submit the form with blank spaces entered into the fields and ensure validation messages are shown.
- While on the write ablog page complete all fields and submit the form, ensure the new entry is saved in the DB and is visible in the recommendations page.
- While logged in, navigate to the Explore,select blogs written by you and click on edit button, ensure the form loads and all fields are visible and pre populated with the data for that blog.
- While on the Edit blog form ensure that all the categories are visible in the category drop down.
- While on the Edit blog form try to submit the form with fields left blank, ensure that custom valitation message is shown. Do this with each field in turn.
- While on the Edit blog form try to submit the form with blank spaces entered into the fields and ensure validation messages are shown.
- While on the Edit blog form make an edit to the blog and click the edit button, ensure the new edited version is saved in the DB and the edited version is visible in the explore page.
- While on the Edit blog form don't make any changes and click the cancel button, ensure you are taken back to the explore page.
- Delete blog: Carry out the tests below from the explore page
- Click the delete button within a blog, ensure that a delete verification modal appears. When the modal has appeared, click the cancel button and ensure the modal closes and theblog is still visible on the page.
- Click this time click the delete button. Ensure the blog is deleted and the confrimation flash message is visible. Take care to ensure that the correct blog has been deleted i.e. the one in which you click the delete button.
- While logged in and admin navigate to the Categories page and ensure all existing categories are visible with the option to edit or delete.
- While on the Categories page click on the Add Category button and ensure the form opens.
- While on the Add Categories page try to submit the form with fields left blank, ensure that custom valitation message is shown. Do this with each field in turn.
- While on the Add Categories page try to submit the form with fields left blank, ensure that custom valitation message is shown. Do this with each field in turn.
- While on the Add Categories page try to submit the form with blank spaces entered into the fields and ensure validation messages are shown.
- While on the Add Categories page complete all fields and submit the form, ensure the new entry is saved in the DB and is visible in the categories page.
- While logged in and admin navigate to the Categories page and click the edit button on one of the categories and form loads and all fields are visible and pre populated with the data for that category.
- While on the Edit Categories page try to submit the form with fields left blank, ensure that custom valitation message is shown. Do this with both fields.
- While on the Edit Categories page try to submit the form with blank spaces entered into the fields and ensure validation messages are shown.
- While on the Edit Categories page make an edit to the blog and click the edit button, ensure the new edited version is saved in the DB and the edited version is visible in the categories page.
- While on the Edit Categories page don't make any changes and click the cancel button, ensure you are taken back to the categories page.
- Click the delete button within a category, ensure that a delete verification modal appears. When the modal has appeared, click the cancel button and ensure the modal closes and the category is still visible on the page.
- Click the delete button again, this time click the delete button. Ensure the category is deleted and the confrimation flash message is visible. Take care to ensure that the correct category has been deleted i.e. the one in which you click the delete button.
In addition to all the above testing I also checked my site with accessibility tools in the inspector.
- scored 91%
- scored 100%
- scored 93%
- 😢 44%
During the development of this site I encountered a number of different bugs that have been now been fixed. A few notable bugs include the following:
- During testing it was highlighted that a user could enter empty spaces and submit the forms. I search online and adapted my code based on information using the pattern attribute class="validate" and ensuring all fields were required. users can see a small text message advising them on how to fill the form incase they have gotten it wrong
- I also used "validateMaterializeSelect();" from materialize to validate the option selected value while choosing catergories in the add blog form - this is from code institute mini flask project.
- for admin to have acess to delete blogs created by users i had to try out nesting jinja templates in the blogs.html.
{% if session.user|lower == "admin"|lower %} <a class="waves-effect red btn-small" href="{{ url_for('delete_blog', blog_id=blog._id)}}">Delete</a> {% endif %}
- categories were being deleted based on alphabetization not considering which category was chosen to be deleted. - solved- fault in the delete_category function
MongoDB was used as the database to store the users details to set up MongoDB follow the steps below
- Sign up to MongoDB
- Create a new shared Cluster
- Select a Cloud provider and region
- For free use m0 cluster tier
- Give your cluster a name
- Go to collections and add a database
- Go to database access and add a username and password
Connecting - via application
- Go back to the cluster overview
- Click the CONNECT button.
- Select 'connect your application'
- Select your language/ driver (I used Python 3.6 or later)
- Copy the connection string and change the details.
- Set the cluster name, collection name, URI connection string and password as environmental - see Configuration to set up your application configurations
Beneath your imports you will need to configure your app.py file. You will need to import your local env.py for local environments. For configuration for Heroku.
Configure as follows:
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)
mail = Mail(app)
To start your application, you will need to user the following at the bottom of your app.py file. You will need to ensure that debug=False prior to deployment.
if __name__ == '__main__':
app.run(host=os.environ.get('IP'),
port=int(os.environ.get('PORT')),
debug=False)
You will need to add a Procfile and ensure your requirements.txt are up to date. In your root folder in the terminal type - touch Procfile - this will create a Procfile Add the following with the following echo web: python app.py
To install the requirements.txt use the following command in the terminal command line pip3 install -r requirements.txt
Create env.py file in the same file system. In your route folder type - touch env.py - to create the file. Your virtual configurations should look similar to this. You will need to create a SECRET_KEY and input the IP and PORT settings. I used Random Key Gen.
import os
# App config
os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "<Your secret key>")
# MongoDB config
os.environ.setdefault(
"MONGO_URI", "mongodb+srv://<user>:<password>@<project>.af8bz.mongodb.net/<database>?retryWrites=true&w=majority")
os.environ.setdefault("MONGO_DBNAME", "<database>")
To add files to the repository, take the following steps
In the command line type -
git add .
git commit -m "This is being committed"
git push
To add all new files or modified file use " ." - To add a single file, use the pathway to the file eg .index.html or assets/css/style.css When committing make sure your comments are clear about what changes have been made. Pushing will send your work to the repository
Requirements for deploying:
- MongoDB Account
- Heroku Account
- Email account
Deploying to Heroku
- You will need to sign up to Heroku
- Once logged in click the create new app button
- Select the region closest to you and give the APP a name
- Set your deployment method to 'GitHub'
- Connect to GitHub and login
- Search for the repository you wish to deploy from
- You will need to head to settings and click 'Config Vars'
- Make sure you have set up your Procfile and you have updated the requirements.txt prior to deploying
- Click the deploy tab and go to manual deploy
- Select the branch you wish to deploy and deploy the application
- Once it is deployed you will be able to view the app
- You can set it to automatically deploy every time you push to the repository by enabling the Automatic deploys
Forking the GitHub Repository
By forking the GitHub Repository, you can make a copy of the original repository in your own GitHub account. This means we can view or make changes without making the changes affecting the original.
- Log into GitHub and locate the GitHub Repository.
- At the top of the Repository there is a "Fork" button about the "Settings" button on the menu.
- You should now have a new copy of the original repository in your own GitHub account.
- You will need to install the requirements.txt using the following command the command line pip3 install -r requirements.txt
- You will need to set up your local environments and key value pairs for deployment
Making a Local Clone
-
Log into your GitHub then find the gitpod repository
-
Under the repository name there is a button that says, "Clone or download". Click on this button.
-
If cloning with HTTPS "Clone with HTTPS", copy this link.
-
Open Gitbash
-
Change the current working directory to the location where you want the cloned directory to be.
-
Type git clone, and then paste the URL you copied earlier.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY Press - Enter- Your local clone will be created. $ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY > Cloning into `CI-Clone`... > remote: Counting objects: 10, done. > remote: Compressing objects: 100% (8/8), done. > remove: Total 10 (delta 1), reused 10 (delta 1) > Unpacking objects: 100% (10/10), done.
Click Here for more info on cloning.
You will need to install the requirements.txt using the following command the command line pip3 install -r requirements.txt
- You will need to set up your local environments and key value pairs for deployment and running the application in your local environment.
This project is hosted on Heroku. It's been deployed using the following steps:
- Sign up (new user) or sign in to Heroku account. I already had an account from previous projects, so only needed to sign in.
- Click the button at the top right that says "New", select "Create new app" in the dropdown.
- Choose an app name. Caution! This must be unique!
- Select your region. In my case, this is Europe.
- You'll be redirected to the Deploy tab of the new app.
- Go to Deployment method. Select your prefered deployment method. As my code was already on Github, I chose the "Connect to Github" option. The following steps will be specific to this option.
- Sign in to your Github account to allow Heroku access to repositories.
- Search for your repo name. If you can't remember the specific spelling of the name, leave the input field blank and click "Search" to get a list of all your repos.
- When you've found your repo in the list, click the "Connect" button.
- You now have the choice to enable automatic deploys or deploy manually.
- Your project will need to contain the following in order for Heroku to deploy it:
-
a Procfile: this specifies the commands that are executed by the app on startup. You can use a Procfile to declare a variety of process types, including:
- Your app’s web server
- Multiple types of worker processes
- A singleton process, such as a clock
- Tasks to run before a new release is deployed.
In the case of this project, the Procfile contains only a single line:
echo web: python app.py
-
a requirements.txt file. This tells Heroku which dependencies need to be installed in order for the project to run. It's created by using the command
pip install
+ the name of any dependencies you have (for example, Flask needs to be installed for this project) in the terminal of your prefered editor, followed by the commandpip freeze > requirements.txt
which will write the installed dependencies to a text file which Heroku then installs usingpip install requirements.txt
.
-
- Go to settings in the Heroku tab. Click "Reveal Config Vars". Add the relevant environment variables you've used in your project to the Config Vars so Heroku can access them. Specifically, for this particular project, that means the following Config Vars were added:
- DEBUG (set to False to turn off Debug mode in the deployed version. Locally, in development, this variable was set to True.)
- IP
- MONGO_DBNAME
- MONGO_URI
- PORT
- SECRET_KEY
- Check the activity tab. The two most recent items in the list should read "Deployed" and "Build Succeeded" in their status.
- Click "Open App" in the top right side if this is the case, this will take you to the live site of the Blog It.
- Clone the Github repo using the green "Clone or download" button. Several options are available here.
- Open the project in your prefered editor.
- Create a virtual environment using the command
python -m venv envname
, replacing "envname" with the name you want to give this environment. (More information on virtual environments: https://docs.python.org/3/library/venv.html) - Open the virtual environment:
- Windows Cmd Shell:
<envname>\Scripts\Activate
- Posix/Linux bash Shell:
$ source <envname>/bin/activate
- Windows Cmd Shell:
- Install the dependencies using the command
pip install -r requirements.txt
- Set up environment variables. There are different ways to do this depending on your system and/or editor. In my editor of choice, VS Code running on Windows, you can do this in the .vscode directory that's generated for every project. This will contain a settings.json file. Add the following to the json dictionary:
"terminal.integrated.env.windows": { "MONGO_DBNAME": "theDatabaseName", "MONGO_URI": "theDatabaseURL", "SECRET_KEY": "YourSecretKeyHere" },
- Run the project in your terminal using the command
python app.py
(like pip, for Unix-based systems you may need to usepython3
).
The content of the site was written by myself and inspired by the idea of creating a social blogging site that has room for improvement as i improve on my skills and make it fully functional with time.
- Code for my navigation and footer was from materialize navbar and customised to my liking.
- I adapted the code from materialize documentation examples Bootstrap documenation for the main structure of the create blog form.
- homepage image1 is from pexels.com by cottonbro girl in a yellow top
- homepage image2 is from pexels.com by Tony Schnagly man in brown sweater using mac book pro
- I based the layout for the site on this flask mini project-code institute.
- My color scheme for this site was based on different shades of green,teal,cyan and blue. I wanted a colour that is easy on the eyes as bloggers may spend hours of the screen.
- I would also like to thank the team at Tutor support, who helped me solve some issues I encountered due to the recent Gitpod upgrade as well helping me solve an issue and connection with mongodb.
- Full stack whattsapp group who are happily available to help fix an issue.
- A final thank to my mentor gbenga_mentor who has advised and guided me through this Milestone 3 project.
Summary- i had wished to implement several features for this site to make full functional and usefull for the community,
- But with limited time and also not enough knowledge of how to achieve what i wanted. For now i hope this is enough as i continue to improve on my skills and update this project in the future.