Milestone Project 3 with Code Institute

Shelter allows users to browse and report the newest and most necessary outdoor gear on the market.

Being outside and living an active life is a lot of fun. And even if you don't need a lot to be enjoying the outside I am impressed by all the innovative little (and big) gear innovations on the market. I always try to find useful gadgets and tools to make the best of camping trips and hiking adventures.

This site is the third of four Milestone Projects that made up the Full Stack Web Development Course at Code Institute. The core reuqirements focus on bulding a fullstack site with the use of HTML, CSS, JavaScript, Phython (incl. Flask) and MangoDB. The final result is hosted on Heroku.

Table of Content

• UX
• User Stories
• Wireframes
  • Planned Layout
  • Final Layout
  • Explanation for differences
  • Color Scheme
• Data Model
  • Gear Collection
  • Categories Collection
  • Users Collection
• Features
  • Exisiting Features
  • Features Left to Implement
• Technologies Used
• Testing
  • Test Cycle
  • Validator Checks, Audits & Tools
  • Known Bugs & Issues
• Deployment
  • Local Deployment
    • Prerequisites to work with this Site
    • Step-by-Step Instructions
  • Deployment to Heroku
• Credits
  • Content
  • Media
  • Acknowledgements
    • References

UX

The idea is to build a community based outdoor gear & gadgets collection where content is generated by the community and the site owner themselves. Each author is in control of their own personal postings and the site admin can choose specific postings to be in the featured feed.

User Stories

The following user stories were defined to outline the needed feature set.

• As a user I can browse gear postings, so that I can find the latest trends and innovation from the outdoor industry.
• As a user I can sign up, so I can add postings to the site.
• As a user I can log in, so that I can add postings with my account.
• As a user I can manage my own postings, so that I have full control over my posts.
• As a user I can log out from the site, so that I can access the site even on public devices (e.g. library).
• As a user I can delete my account, so that I am in total control of my account data. (AC: account is deleted from users db, postings remain in gear db)
• As a user I can access details from a posting, so that I can see the whole set of information.
• As a user I can search the site, so that I quickly find equipment or special postings.
• As a user I can see the latest 6 postings on the landing page, so that i quickly notice new gear recommendations.

Wireframes

The wireframes were created in Figma. Figma is a cloud based desing tool which allows you to rapidly create prototypes, wireframes and layouts (www.figma.com)

Planned Layout

Logo

The logo represents the flame of a campfire - which people love to gaze into and enjoy the crackling sound of burning wood.

Components

Wireframes

	Screenshot
Desktop Wide
Medium
iPhone

Final Layout

	Screenshot
Desktop Wide
iPad Landscape
iPad Portrait
iPhone

Explanation for differences

The following differences developed during creation:

• Only show first letter of username instead of first initials of first- and lastname
• Featured cards where displayed in carousel instead of horizontal cards
• instead of notifications icon add gear icon was implemented
• blog site was exchanged for about page

Color Scheme

The color scheme was chosen with the goal to represent natural outdoorsy colors which reminds the visitor of the deep blue ocean, forrest full of green trees and some sunshine.

Color Codes:

• Blue #033F63
• Green #288666
• Green Pastel #7C9885
• Olive #B5B682
• Yellow #FEDC97
• Offwhite #F9F7F2

Data Model

The site is based on three data collections. The gear collection holds all the necessary data for the gear postings/recommendations. The categories collection manages the available categories for postings. The users collection handles the users credentials and its status.

Gear Collection

Categories Collection

Users Collection

Features

The following list of features was created before the actual implementation:

• Sign up
• Log in
• Log out
• Delete account
• Search gear
• Browse gear
• Create posting
• Edit posting
• Delete posting
• Create Categories
• Edit Categories
• Delete Categories

Exisiting Features

These features made it into the MVP:

• Sign up
• Log in
• Log out
• Delete account
• Search gear
• Browse gear
• Create posting
• Edit posting
• Delete posting

Features Left to Implement

The following features would be great for expansion stages after the initial market validation:

• Server Side Validation to increase Security
• Create Categories
• Edit Categories
• Delete Categories
• Add Gear to "My List" to create own "Shelter"
• Use Flask-Login for session and user management (increase security & handle password recovery)
• File Upload for pictures to avoid external dependencies and copywrite
• Image Caroussel for the gear details if more than one image was uploaded
• Autocomplete for Search-Field

Technologies Used

• HTML5
• CSS3
• Python
• PyMongo
• Flask
• Jinja
• MongoDB
• Bootstrap 4.5.2
• Gitpod
• Git Version Control
• GitHub
• Heroku

Testing

Summary of test results:

Test Cycle

Sign up

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Press Sign Up button
4. Choose username
5. Choose password
6. Click Sign Up button
7. User should be logged in

Log in

Happy Path:

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Press Login button
4. Enter username
5. Enter password
6. Click log in button
7. User should be logged in

Wrong Password:

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Press Login button
4. Enter username
5. Enter wrong password
6. Click log in button
7. You should be informed that the password is wrong

Username does not exist:

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Press Login button
4. Enter non-existing username
5. Enter non-existing password
6. Click log in button
7. You should be informed that the user does not exist

Search

Happy/Unhappy Path

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Type text into Search field and hit enter or press button
4. New Page with Search-Results should open 5a. If no Results exist --> Inform User about it 5b. If Result exist --> You should see Gear Cards

Create posting

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Press Login button
4. Enter non-existing username
5. Enter non-existing password
6. Click log in button
7. Click Add Gear Button on top right corner
8. New Site with Form should open
9. Fill out Form
10. Submit posting
11. Your post should be visible in your profile

Edit posting

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Press Login button
4. Enter non-existing username
5. Enter non-existing password
6. Click log in button
7. Click on your Avatar on top right corner
8. Choose post from your Profile via the Edit button
9. Make change to the posting and hit stackoverflow
10. Changes should be visible in your profile

Delete posting

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Press Login button
4. Enter non-existing username
5. Enter non-existing password
6. Click log in button
7. Click on your Avatar on top right corner
8. Choose post from your Profile via the Delete button
9. Confirm your choice to delete
10. Post should be gone from overview

Display Gear Details

For Featured Items

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Click on Carousel

For Recent Post

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Scroll Down to Recent Post
4. Click Details button
5. You should see the details

For Gallery

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Navigate to Gallery
4. Click Details button
5. You should see the details

Browse categories

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Scroll Down to Footer
4. Click on Category
5. New site should open with the category as header and related postings

Navbar logged in

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Press Login button
4. Enter username
5. Enter password
6. Click log in button
7. Sign Up & Login Button should be replaced with Add Gear & Avatar Button

Navbar logged out

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Press Login button
4. Enter username
5. Enter password
6. Click on Avatar Button
7. Press Logout Button
8. Sign Up & Login Button should be visible instead of Add Gear & Avatar Button

Delete Account

1. Open Browser
2. Visit https://gearshelter.herokuapp.com/
3. Press Login button
4. Enter username
5. Enter password
6. Click on Avatar Button
7. Click on Delete Account
8. You should be logged out and should not be able to login again with the credentials you used before

Validator Checks, Audits & Tools

• Code Formatting from Pythoniter Pretty Python: https://pythoniter.appspot.com
• Ran code through http://pep8online.com/ Before: After:
• Checked every page and subpage for HTML Validation Errors: https://validator.w3.org
• Checked the https://jigsaw.w3.org/css-validator/#validate_by_input+with_options

Known Bugs & Issues

• sizing of images in caroussel could be harmonized for future development steps
• form a code perspective the rendering of the delete post modal in the myprofile page could be enhanced through the use of javascript to inject the gear.id and remove the rendering of one modal per post.

Deployment

This site is deployed to heroku and the versioning was done with git and the Repository is hosted on Github.

Local Deployment

Prerequisites to work with this Site

• Dedicated MongoDB (Sign up at www.mongodb.com)

Step-by-Step Instructions

Official Github Documentation on cloning a repositiory: https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/cloning-a-repository

1. Navigate to Mainpage of the repository
2. Click on "Code" button
3. Choose "Clone with HTTPs" & copy URL
4. Open Terminal
5. Change the current working directory to prefered location
6. Type git clone and past copied URL git clone https://github.com/p0wen/shelter.git
7. Press Enter to create local Clone - Make sure your environment supports python3 -
8. Type pip3 install -r requirements.txt into Terminal
9. Create env.py, .env and .gitignore and add the first 2 to git ignore
10. Fill env.py with the following data:

from environs import Env

env = Env()
env.read_env()

# Override in .env for local development
DEBUG = env.bool("FLASK_DEBUG", default=False)
SECRET_KEY = env.str("SECRET_KEY")
# MONGO Connection
MONGO_DBNAME = env.str("MONGO_DBNAME")
MONGO_URI = env.str("MONGO_URI")

11. Fill .env with the following data:

DEBUG=true
MONGO_DBNAME="<INSERT NAME OF YOUR COLLETION>"
MONGO_URI="mongodb+srv://<INSERT USERNAME>:<INSERT PASSWORD>@<INSERT CLUSTERNAME>.zbpbq.mongodb.net/<INSERT COLLECTION NAME>?retryWrites=true&w=majority"
SECRET_KEY="<INSERT SECRET_KEY>"

12. Run the application locally by entering python3 app.py into your terminal

Deployment to Heroku

1. Log in to your Heroku account and create a new App.
2. Set the environment variables in Settings > Reveal Config Variables
3. The following Variables must be set

MONGO_URI = mongodb+srv://<INSERT USERNAME>:<INSERT PASSWORD>@<INSERT CLUSTERNAME>.zbpbq.mongodb.net/<INSERT COLLECTION NAME>?retryWrites=true&w=majority
MONGO_DBNAME = <INSERT YOUR COLLECTION NAME>
SECRET_KEY = <INSERT YOUR SECRET KEY>
IP = 0.0.0.0
PORT = 5000

4. Create requirements.txt from your project with the help of pip3 freeze --local > requirements.txt
5. Create a Procfile echo web: python app.py > Procfile
6. Commit changes to Git git add . followed by git commit -m ""
7. Log in to heroku from your terminal heroku login
8. Add exisitng repository to Heroku heroku git:remote -a <your repository>
9. Push changes to Heroku git push heroku master
10. Visit the app url from heroku and check out your great site!

Credits

Content

Content was written by me - only the integrated image url's are referencing to various sites

Media

• Logo created by me - basis was the github open source icons form figma https://www.figma.com/file/PVcwIwp9dQCVSTDPlZ008G/Octicons---GitHub's-icon-set-(Community)?node-id=176%3A0

Acknowledgements

• Tutor guidance
• Mentor assistance
• Code Institute Community on #slack
• stackoverflow and medium for comprehensive content

References

• Code Institutes Task Manager Project was a great foundation to understand the basic CRUD functionalities
• differences between mongodb and mysql https://medium.com/@rsk.saikrishna/when-to-use-mongodb-rather-than-mysql-d03ceff2e922
• Manual on how to work with env variable - https://pypi.org/project/environs/
• how to make data available for more than one interaction - https://stackoverflow.com/questions/57537866/two-for-loops-in-one-html-page-using-jinja-not-working
• how to work with loop.cycle webforefront.com/django/usebuiltinjinjastatements.html
• how to integrate a search function https://dzone.com/articles/flask-101-how-to-add-a-search-form
• how to search through collections https://stackoverflow.com/questions/2824157/random-record-from-mongodb
• how to work with $sample https://docs.mongodb.com/manual/reference/operator/aggregation/sample/
• building a search field with button included https://www.codeply.com/go/ioPsDfyCBc
• how to style active element in nav https://stackoverflow.com/questions/21991820/style-active-navigation-element-with-a-flask-jinja2-macro
• refresh on css skills https://stackoverflow.com/questions/43119635/fill-div-with-image-without-stretching
• how to make sticky footer really sticky https://medium.com/@mschenk22/bootstrap-4-footer-at-bottom-not-sticky-dynamic-footer-height-b37ccec837e2ss
• how to check if something is empty https://www.shellhacks.com/jinja2-check-if-variable-empty-exists-defined-true/
• sorting https://www.w3schools.com/python/python_mongodb_sort.asp
• where to position logout button https://uxdesign.cc/cognitive-behaviour-how-ux-designers-make-use-of-it-in-design-b9490b974dc1
• footer based on this template https://codepen.io/scanfcode/pen/MEZ
• table for read generated with the help from https://www.tablesgenerator.com/markdown_tables#
• Table of Content generated with https://ecotrust-canada.github.io/markdown-toc/
• create delete modals for each existing item instead of using JavaScript https://stackoverflow.com/questions/45874906/flask-and-javascript-confirm-before-deleting