Project Requirements:
Build an interactive front-end website that responds to user actions and alters the way the site displays data/information.
Required Technologies : HTML, CSS, JavaScript, Python+Flask, MongoDB. A live version of the site is available here.
- As a user, I expect to access the website from any device, so that I can use the website anytime and anywhere.
- As a user, I expect to easily navigate the website, so that I can quickly find what I'm looking for.
- As a user, I want to easily access social media links of the company, so that I can read more information about it.
- As a user, I want to read a summary info about the app and its features and functionality, so that I can quickly decide if it satisfies my needs.
- As a user, I want to view all the joke and videos without having to register.
- As a user, I want to create my own account, so that I can save, view and edit my profile details and access it any time.
- As a user, I want to easily login anytime, so that I can get access to my uploaded videos and jokes.
- As a user, I want to be able to change my password, so that I can create the stronger password (e.g.in case I published my old password somewhere) to protect my personal details.
- As a user, I want to be able to change my email and username, so that I can have an easier access to the website's functionality and to gain more flexibility.
- As a user, I want to add new jokes/upload new videos.
- As a user, I want to edit my jokes/videos.
- As a user, I want to delete my jokes/videos.
- As a user, I want to view a list of my jokes and videos.
- As a user, I want to delete my account and all the jokes and videos I've created.
- HTML
- CSS
- JavaScript
- Python
- Jinja - templating language for Python, to display back-end data in HTML.
- Flask - Python framework for building the project.
- Bootstrap - as the front-end framework for layout and design.
- Google Fonts - to import fonts.
- FontAwesome - to provide icons used across the project.
- JQuery - to simplify DOM manipulation and to initialize Bootstrap functions.
- GitPod and VS Code - IDEs for developing this project.
- Git - for version control.
- GitHub - for remotely storing project's code.
- PIP - for installation of necessary tools.
- Heroku - to host the project.
- PyMongo - a Python distribution containing tools for working with MongoDB.
- Balsamiq - to create wireframes.
- MongoDB - NoSQL database for storing back-end data.
The site was developed in GitPod and pushed to the following remote GitHub repository - here The following GIT commands were used throughout deployment: git status ------ used to check the status of files and any changes made / untracked. git add -A ------ to stage files ready to commit. git commit -m " " ------ to commit the files. git push ------ to push the files to the master branch of the GitHub repo.
This site is hosted using Heroku, deployed directly from the master branch via GitHub. - LIVE SITE
The following steps were taken to complete the hosting process. Set debug=False in the app.py file. Created a requirements.txt file from the terminal, using pip3 freeze --local > requirements.txt, to allow Heroku to detect this project as a python app and any required package dependencies. Created a Procfile using echo web: python app.py > Procfile from the Gitpod terminal so Heroku would be informed on which file runs the app and how to run this project. Created a new Heroku app, my-recipe-m3 and set its region to Europe. Automatic deployment was set up on Heroku - On the app dashboard, in the deploy menu. Connect to GitHub section. The GitHub repository was searched for and connected to the app. In the settings tab on the app dashboard, 'Reveal Config Vars' was used to tell Heroku which variableS are required to run the app. The following config vars were added: IP PORT SECRET_KEY MONGO_URI In GitPod, a check was completed to ensure the master branch was up to date and all commits had been pushed to GitHub, ready for Heroku to deploy. Clicked the Enable Automatic Deploys button located in the Deploy section of Heroku to allow for automatic deploys. Clicked the Deploy Branch button located in the Deploy section of Heroku to finally deploy this project. Clicked the View button to launch this project's app. The deployed site on Heroku will update automatically upon new commits to the master branch in the GitHub Repo : REPO Cloning
To run this code locally, you can clone this repository directly into the editor of your choice by following the steps below:
Open Terminal. Change the current working directory to the location when you want the cloned directory. Type the following into your Terminal: git clone insert link Press Enter to create a local clone. To cut ties with this GitHub repository, type git remote rm origin into the terminal. For more information regarding cloning of a repository click here.
This website is made for educational purposes only as part of the Code Institute March Hackathon 2021.