Skip to content

p0wen/shelter

BranchesTags

Repository files navigation

Milestone Project 3 with Code Institute

alt text

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

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.

alt text

Components

alt text

Wireframes

Screenshot
Desktop Wide alt text
Medium alt text
iPhone alt text

Final Layout

Screenshot
Desktop Wide alt text
iPad Landscape alt text
iPad Portrait alt text
iPhone alt text

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. alt text

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

Example Data Data Type
_id ObjectId(5f76e...809c) ObjectID
model The Cave String
brand Heimplanet String
description This is a tent.
The structure is held by air pipes.
It is a very robust setup.		 String
score 5 String
category_name Camp String
datecreated 2020-09-30 String
author peter String

Categories Collection

Example Data Type
_id ObjectId(5f76e...809c) ObjectId
category_name Camp String

Users Collection

Example Type
_id ObjectId(5f76e...809c) ObjectId
name peter String
password Binary('JDJiJDEyJERJNHMvM...iRU5lSlVIa0RZQlpiQmlDaVJT', 0 Binary
date_registered 2020-10-06 String
is_admin false Boolean

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:

Testcases / Device-Browser-Setup iPhone
Safari		 iPhone
Chrome		 iPad
Safari		 iPad
Brave		 Mac
Safari		 Mac
Chrome
Sign up ✅ ✅ ✅ ✅ ✅ ✅
Login
a) Happy path
b) Wrong password
c) Wrong Username		 ✅
✅
✅		 ✅
✅
✅		 ✅
✅
✅		 ✅
✅
✅		 ✅
✅
✅		 ✅
✅
✅
Search ✅ ✅ ✅ ✅ ✅ ✅
Add Posting ✅ ✅ ✅ ✅ ✅ ✅
Edit Posting ✅ ✅ ✅ ✅ ✅ ✅
Delete Posting ✅ ✅ ✅ ✅ ✅ ✅
Display Gear Details
a) Featured Items
b) Recent Post
c) Gallery		 ✅
✅
✅		 ✅
✅
✅		 ✅
✅
✅		 ✅
✅
✅		 ✅
✅
✅		 ✅
✅
✅
Browse categories from Navbar ✅ ✅ ✅ ✅ ✅ ✅
Navbar logged in ✅ ✅ ✅ ✅ ✅ ✅
Navbar logged out ✅ ✅ ✅ ✅ ✅ ✅
Log out ✅ ✅ ✅ ✅ ✅ ✅
Delete Account ✅ ✅ ✅ ✅ ✅ ✅

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

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

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")
  1. 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>"
  1. 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
  1. Create requirements.txt from your project with the help of pip3 freeze --local > requirements.txt
  2. Create a Procfile echo web: python app.py > Procfile
  3. Commit changes to Git git add . followed by git commit -m ""
  4. Log in to heroku from your terminal heroku login
  5. Add exisitng repository to Heroku heroku git:remote -a <your repository>
  6. Push changes to Heroku git push heroku master
  7. 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

Acknowledgements

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

References

About

"Find the newest and most impressive Gear - sourced by the crowd"

gearshelter.herokuapp.com/

Topics

heroku outdoorsy shelter milestone3 gear-community

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages