• Contents
• NameUnspecified
  • UX
    • Purpose
    • User Stories
    • Wireframes
    • Agile Methodology
  • Existing Features
    • Navbar and Footer
    • Home page
    • Feature ddd
  • Future Features
    • feature 1
    • Feature 2
  • Technologies Used
    • Languages Used
    • Technologies and Programs Used:
    • Frameworks Libraries and Programs Used
  • Code Validation
    • HTML beautify
    • HTML valiation
    • CSS validation
    • JavaScript validation
    • Python beautify
    • Python validator
  • Tests
    • Automated tests
    • Lighthouse
    • Manual tests
      • First release
  • Project Bugs and Solutions:
    • bug...
  • Deployment and making a clone
    • Deployment to heroku
    • Forking the GitHub Repository
    • Making a Local Clone
    • Setting up your local enviroment
  • Credits
    • Online resources
    • Tutorials and inspiration
    • People

Click here to live site.

ff

d

Wireframes created with Balsamiq.

Wireframes

(link-to/canba)

Github issues were used to create the User stories and group them according to MoSCoW prioritization technique. Link to the project with live issues can be found here. The issues are currently in two categories - done or for the next relese.

The issues were than closed automaticaly when the pull request was linked to the issue.

xx

dd

d

dd

• HTML5
• CSS3
• JavaScript
• jQuery
• Python
• Django

• GitHub The Git was used for version control Git issues were used for user stories GitPod was used as IDE to write the code and push to GitHub
• Heroku The page was deployed to Heroku
• PostgreSQL PostgreSQL was used as database for this project
• VSCode VSCode was used on the days when GitPod was down
• Google Cloud to get api key
• cloudinary storage for storing static files

• Balsamiq: Balsamiq was used to create the wireframes during the design process.
• Bootstrap 5: Bootstrap was used to add style to the website.
• Bootswach: Bootswatch wass added to change the standard styling and color pallette provided by bootstrap
• Bootstrap icons
• Django

online HTML code Beautifier.

HTML validator

W3C validator. The copy of the CSS report can be found here

Javascript code validation was complited on jshint Initialy it was returning errors in relation of ES6 syntax, which was resolved by adding this line to the beggining of the file

/*jshint esversion: 6*/

All pages were initialy put through Python Formatter which automaticaly sorted most of the too long lines errors. Than the code was checked by pylint and problems were displayed in the console. Once the issues were cleared I have put all code though pep8 validator.

| users | admin.py | all ok | | users | forms.py | all ok | | users | models.py | all ok | | users | urls.py | all ok | | users | views.py | all ok |

Automated tests have not been created due to time constrains of the project.

Relese main fetures:

llll

dddd

In your app

1. add the list of requirements by writing in the terminal "pip3 freeze --local > requirements.txt"
2. Git add and git commit the changes made

Log into heroku

3. Log into Heroku or create a new account and log in

4. top right-hand corner click "New" and choose the option Create new app, if you are a new user, the "Create new app" button will appear in the middle of the screen

5. Write app name - it has to be unique, it cannot be the same as this app

6. Choose Region - I am in Europe

7. Click "Create App"

The page of your project opens.

8. Go to Resources Tab, Add-ons, search and add Heroku Postgres

9. Choose "settings" from the menu on the top of the page

10. Go to section "Config Vars" and click button "Reveal Config Vars".

11. Add the below variables to the list

    • Database URL will be added automaticaly
    • Secret_key - is the djnago secret key can be generated here.
    • Cloudinary URL can be obtained from cloudinary follow the steps on the website to register.
    • Google API key can be obtained here you will have to register with google and create new app to get the API key. Follow the instructions on the website.

Go back to your code

12. Procfile needs to be created in your app

web: gunicorn PROJ_NAME.wsgi

13. In settings in your app add Heroku to ALLOWED_HOSTS

14. Add and commit the changes in your code and push to github

Final step - deployment

15. Next go to "Deploy" in the menu bar on the top

16. Go to section "deployment method", choose "GitHub"

17. New section will appear "Connect to GitHub" - Search for the repository to connect to

18. type the name of your repository and click "search"

19. once Heroku finds your repository - click "connect"

20. Scroll down to the section "Automatic Deploys"

21. Click "Enable automatic deploys" or choose "Deploy branch" and manually deploy

22. Click "Deploy branch"

Once the program runs: you should see the message "the app was sussesfully deployed"

23. Click the button "View"

The live link can be found here.

By forking the GitHub Repository you will be able to make a copy of the original repository on your own GitHub account allowing you to view and/or make changes without affecting the original repository by using the following steps:

1. Log in to GitHub and locate the [GitHub Repository](repo here???)
2. At the top of the Repository (not top of page) just above the "Settings" button on the menu, locate the "Fork" button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log in to GitHub and locate the [GitHub Repository](repo here???)
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open commandline interface on your computer
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone http..repo here???

7. Press Enter. Your local clone will be created.

1. Create Virtual enviroment on your computer or use gitpod built in virtual enviroment feature.

2. Create env.py file. It needs to contain those 5 variables.

• Database URL can be obtained from heroku, add PostgreSQL as an add on when creating an app.
• Secret_key - is the djnago secret key can be generated here.
• Cloudinary URL can be obtained from cloudinary follow the steps on the website to register.
• Google API key can be obtained here you will have to register with google and create new app to get the API key. Follow the instructions on the website.

os.environ["DATABASE_URL"] = "..."
os.environ["SECRET_KEY"] = "..."
os.environ["CLOUDINARY_URL"] = "..."
os.environ["GOOGLE_API_KEY"] = "..."
os.environ["DEVELOPMENT"] = "True"

3. Run command

pip3 install -r requirements.txt

• Icons8
• unsplash
• Fontawsome
• Bootstrap 5
• Markdown best practices
• Markdown Table of content generator

• The project walkthrough I Think Therefore I Blog tutorial provided instpiration for traffic alerts the repository can be found here