Milestone Project Three: In this project, I have built a data-driven web application using the technologies that I have learned throughout Data Centric Development.
The Given Brief and Requirements
Create a web application that allows users to store and easily access data
design a database schema based on Twitter and Facebook, and any other related properties and entities (e.g. views, upvotes, authors, etc).
Create the backend code and frontend form to allow users to add new data to the site.
Optionally, you may choose to add basic user registration and authentication to the site. This can be simple as adding a username field to the post creation form, without a password (for this project only, this is not expected to be secure)
UX
I aimed for a simple and modern interface with an easy to use forms for registration, sign in, add your thoughts and edit your posts. When a user looks for a social media application they want quick easy access that gets straight to the point. If the users likes the flow of the webapp and its usability they may be interested in contributing their own content to the database to make the application they enjoy using better for others to use.
User Stories
As a user I want an easy to use application that I can use on all devices. Whether using my Tablet, laptop, on desktop or mobile.
As a user I want access to see their posts and others with the correct information
As a user I want to be able to follower users whose posts I like
As a user I want to be able to contribute to the page with my own posts.
As a user I want to sign into my own account to have access to my own posts that I can edit or delete as I please.
Users
users of the application can use all functionality and leave with no registration or log in
users can create an account and log in / log out.
users that have created an account and are logged in. can add / edit / delete any of their posts they have contributed.
Existing Features
Create account and log in
A user is able to create and account and log in which changes the Navigation bar
Home page
Home page gives information about the application's functionality. It shows all the latest posts, you can either view as a guest or sign in.
Home page has a button link to create an account or a user can use the Nav bar.
log in and log out in Nav bar.
Navigation bar
The main Title on top left of Nav goes back to home page from any page.
The navbar has a login and register feature
Features left to implement
If I had more time to spend on this project I would like to add:
pagination is a must for any web app like this.
Image upload instead of url.
home page images would link to their page.
up voting on favourite posts
user comments on the posts so people have feedback.
delete function
A back button for Iphone users
drop down options to not sit in front of the submit button on the pop up modal.
most popular posts by views
Database
The database I have used Is MongoDB, Mongo DB is a document-oriented NoSQL database. Each database contains collections which in turn contains documents. Each document can be different with a varying number of fields. The Schema doesn't need to be defined beforehand as the fields can be created on the fly.
Technologies used
Languages
HTML5
Python 3
CSS3
JavaScript
Tools
GitPod code editor
MongoDB Atlas NoSql document oriented database.
GitHub hosting
Browserstack testing all browsers and devices
Git version control
Libraries
JQuery to simplify DOM manipulation.
Flask to redirect and render pages.
Bootstrap Simplify the structure of the website and make the website responsive easily.
Jinja displaying data from the backend
FontAwesome icons
Google Fonts font styling
Testing
Manual Testing
Home page
Text, controls and images are aligned properly
Color, shading, and gradient are consistent
Font size, style and color are consistent for each type of text
Text, images, controls, and frames do not run into the edges of the screen.
Typed text (data entry) scrolls and displays properly
Pages are readable on all resolutions.
Title link goes to the home page.
Front page
Cards are displaying correct data.
Read more buttons connected to a single
Log in and Log out
login signs that user into their account enabling that user to see their section and the option to add a post.
log out pops the session removing the option to add posts and see their section user is flash a message 'logged out'
Register / Create and Account
warns users if that username is already taken
warns users if password is not the same after entering password in both input fields
register button submits that entry into the Flask collections
Browser Testing
All testing on the list of Browsers below.
Google Chrome (no issues found at time of testing)
Firefox (no issues found at time of testing)
Internet Explorer & Edge (no issues found at time of testing)
Opera (no issues found at time of testing)
Responsive-Design testing
Responsive testing done on Google DevTools – Device Mode and Browserstack.
Deployment
App is deloyed here socialmedia-milestone3.herokuapp.com
Heroku
Create a new app
In the terminal: -log into heroku with heroku login using username and password.
initialise a git repository git init -link the GitHub repo to the app in heroku git remote add heroku
creates a txt file with all the dependencies to run the app pip3 freeze --local > requirements.txt
This is a web app that will run on app.py echo web: python run.py >procfile .
will scale your app to one running dyno ps:scale web=1
In app.py set the app.config variables so Heroku can find them.
PORT = 8000
HOST = '0.0.0.0'
In the terminal line entered:
git add
git commit -m "message"
git push -u heroku master pushes the project to Heroku.
In Heroku:
Go to the project > setting > config vars
HOST = 0.0.0.0
PORT = 8000
SECRET_KEY = [email protected]
More > restart all dynos
How to run the project locally?
To run this project these instructions are given for a code editor I am using GitPod on a windows desktop.
You will need:
MongoDB Atlas
Python 3
Git
Pip
How to get started
From Github repository Repo download.zip and extract to your chosen destination.
Using python in gitpod you need to set up a virtual environment. check to see if pip is installed with pip -h get help setting up environment Install the virtualenv package
pip install virtualenv
Create the virtual environment
virtualenv mypython
Activate the virtual environment
mypython\Scripts\activate
install all requirements needed to run this app using
pip install -r requirements.txt.
Create a file called config.py In the terminal line enter echo 'config.py' > gitignore to hide the config.py file.
Create app.py file In app.py, set the app.config variables to the variables set in the config.py file import config
In the terminal line enter:
python -m flask run which will run on http://127.0.0.1:8000
Errors Occured
While deploying on Heroku I ran into the following error
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
A work around this was installing gunicorn to fix the PORT issue and updating the Procfile with
web: gunicorn app:app
Code Used
code templates used for cards
index page layout theme bootstrap theme
code templates used for modals
code templates used for dropdowns
code templates for sign in and registration
Credits
Special thanks to
My Tutor and Mentor, and the Code Institute tutors for helping me throughout this project and the never ending effort made by the Slack community to answer any questions I may have.
Media
Font Awesome for icons
Git for version control and pushing to GitHub
Each commit should be used to save each new change to keep record of what changes have been made. Throughout this project between study early morning, work through the day, study after work and into the evening I have used both git (saving locally) and pushing to github as more of a general save option. I have a greater understanding of version control than what I have used in this project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent