Skip to content

malmgrenola/rooster

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

105 Commits
static
static
 
 
templates
templates
 
 
wireframes
wireframes
 
 
.gitignore
.gitignore
 
 
Procfile
Procfile
 
 
README.md
README.md
 
 
app.py
app.py
 
 
env_example.py
env_example.py
 
 
requirements.txt
requirements.txt
 
 

Repository files navigation

Purple Rooster Farm Shop

The local farm shop site that promotes their products online with the ability to reserve goods in advance.

Live site location:

Purple Rooster Farm Shop Website

badge

Live site screenshot: Purple Rooster Farm Shop layout

Table of Contents

UX

Features

Technologies Used

Testing

UX

The typical website user is interested in sourcing local farm products.

The site owners goal is to promote products that is for sale in the local farm shop and administrator reservations from website users.

  • As an admin user, I would like to CRUD my products to the website so my customers can see what the farm shop currently sells.
  • As a user, I would like to click and collect items for later pickup in the farm shop, so I know items are available when I visit the shop on site.
  • As an admin, I would like to CRUD all click and collect so I can see all reservations and remove reservations.
  • As a user, I would like to login to the site and see my click and collect, so I can follow up on what I have for pickups.
  • As an admin, I would like to login to the site, so I can administer products, click and collects & users.
  • As an admin, I would like to comment on the click and collect, so I can let other admins know if there is anything to mention.

Site screenshots are found in the project folder /wireframes.

Site wireframes:

  • Front page search meal page, showing search results. Also acts as site index page
  • Product detail page displays product details.
  • basket page displays selected items prepared for reservation.
  • admin page displays user details including clicks and collects.

Features

The website contains a clear navigation on every page. The site is based on a navigational hierarchical tree structure. Navigation bar is responsive and will fold down to a burger menu when it wont fit the size.

Navigation items: Home Category navigation Click and collect basket Sign in (only anonymous users) My page (only signed in users) Admin (only signed in admins)

Each page includes a footer element containing copyright information about the site.

Existing Features

  • Sign in/out - allows users to sign in to see reservations made and sign out when the user would like to leave.
  • Sign up - allows users to sign up for an account so users don't have to fill out the information again.
  • Find products by category - allows users to find products based on category.
  • Add to click and collect basket - allows users to add product to a basket while navigating on the site.
  • Create click and collect reservation - send current click and collect basket to the farm shop.
  • Set requested pickup date
  • Administrate users - CRUD
  • Administrate products - CRUD
  • Administrate categories - CRUD
  • Administrate reservations - CRUD
  • Upload product images to external CDN for use on this website.
  • Front page shows random products

Database model

MongoDB is used to store all data. Within one cluster ("Cluster0") the database "roosterDB'' contain the following collections:

Users collection

Users collection holds client contact and access information.

field type description
_id ObjectId unique record id
name string Holds client Full name
email string Holds client email address
password string user hashed password
isAdmin Boolean Gives user admin access
Categories collection

Categories collection holds a list of the different product categories.

field type description
_id ObjectId unique record id
name string Holds Category name
Products collection

Products collection holds information about each product.

field type description
_id ObjectId unique record id
name string Holds product name
description string Holds product description
price Decimal128 product item price
image-url string Holds url to product image
categories Array Array of categories id's
Reservations collection

Reservation collection holds each reservation in separate records.

field type description
_id ObjectId unique record id
client_id ObjectId Client id
client-name string Holds client Full name
client-email string Holds client email address
products Array Holds an array of product objects
order-comment string Client order comment
order-date-pickup Date Date when client pickups order
order_placed Boolean True when customer placed the order
Products Array of objects

Each product client would like to reserve.

field type description
id string products id reference
name string Holds product name
amount Int32 Number of items client would like to reserve
price Decimal128 product item price
sum Decimal128 the product of the amount and prices

Site content

The sample products, information and images is provided from Product daylesford.com

About text is used from Tapnell farm

Style Information

Selected Typefaces

Site uses sans-serif to stay clean on all supported platforms.

Color Scheme

The site color scheme is wooden and high contrast, with user information text and navigation bar in light color

Features Left to Implement

  • Restore password flow
  • Send click and collects as email

Technologies Used

In this section, all of the languages, frameworks, libraries, and any other tools that are used to construct this project are listed with its name, a link to its official site and a short sentence of why it was used.

  • HTML5
    • Used to render the DOM
  • CSS
    • Used to layout the site.
  • Javascript
    • Used to handle site code logic and API integrations
  • Python+Flask
    • used to render site and connect to database
  • MongoDB
    • Used to store all data.
  • Bootstrap
    • used to make site responsive
  • Fontawesome
    • Used to display icons on website
  • JQuery
    • The project uses JQuery to simplify DOM manipulation.
  • boto3
    • Used to create, configure, and manage AWS services.

Testing

Site is tested on the following platforms and browsers

  • Mac
    • Google Chrome (93.0.4577.82)
    • Safari (14.1.2)
    • Firefox (92.0)
  • Windows 10
    • Google Chrome (93.0.4577.82)
    • Edge (93.0.961.52)
    • Firefox (92.0)
  • Iphone 12
    • Safari (latest)
    • Google Chrome (latest)
  • Samsung Galaxy S10
    • Google Chrome

All tests pass on all platforms.

Test site

Basic navigation

  1. feature test:
    1. Goto https://purple-rooster.herokuapp.com/
    2. click items in navbar
    3. confirm navbar active state and general look.

Feature passed this test

Test users

Test sign in

  1. feature test:
    1. Go to a https://purple-rooster.herokuapp.com/signin
    2. use username [email protected] and password bad
    3. Confirm incorrect Username and/or Password.
    4. use username [email protected] and password 123456
    5. Confirm successful sign in.
    6. change your user name and press Save name

Feature passed this test

Test sign up

  1. feature test:
    1. When signed out, Go to https://purple-rooster.herokuapp.com/register
    2. register with name My name and email [email protected] use any password
    3. confirm username already exists message
    4. register with name Your Name and email [email protected] use password 123456
    5. Confirm Registration Successful!
    6. sign in with new username
    7. confirm successful login

Feature passed this test

Test sign out

  1. feature test:
    1. When signed in, Go to https://purple-rooster.herokuapp.com/me/overview
    2. click sign out next to username in header
    3. confirm you are signed out and redirected to sign in page

Feature passed this test

Test Click and Collect

The site has a click and collect feature by adding items to a basket and from basket click click and collect. The user can select a pickup date and place the order.

The feature handles errors & success in the UI.

Test basket Click and collect

The feature handles errors & success in the UI.

  1. feature test:
    1. Go to front page
    2. Click Add to basket on any product
    3. Click Add to basket on another product
    4. Confirm by click on cart in top menu
    5. step up a couple of steps on product row and press update
    6. press the trash icon on one of the rows and confirm the item is removed.

Feature passed this test

Test place click and collect

  1. feature test:
    1. with items in basket
    2. go to https://purple-rooster.herokuapp.com/basket
    3. click Click and Collect button in the bottom of the form
    4. select Select your prefered pickup date in the date time field and press set pickup date button
    5. modify your items and confirm functions update and remove
    6. click the Place Click and collect
    7. confirm your order is placed

Feature passed this test

Test Administrator

The site has an administrator section where the site can be controlled.

The feature handles errors & success in the UI.

Test Admin Click and collect

The feature handles errors & success in the UI.

  1. feature test:
    1. When signed out, Sign in as [email protected] and password 123456
    2. In the navbar click the toolbox (https://purple-rooster.herokuapp.com/admin/collect)
    3. Click on any sample Click & Collect made to open up details
    4. confirm pickup date, comment and items row can update on request using Save changes
    5. confirm a sample click and collect can be deleted by clicking delete

Feature passed this test

Test Admin Categories

The feature handles errors & success in the UI.

  1. feature test:
    1. in the admin section click Categories in the horizontal toolbar.
    2. Press create new
    3. Give the new category the name Test and press Save
    4. Confirm toolbar get the new category Test
    5. Go back to Category Test and click Delete category
    6. Confirm Test is removed from toolbar

Feature passed this test

Test Admin Products

The feature handles errors & success in the UI.

  1. feature test:

    1. in the admin section click Products in the horizontal toolbar.
    2. Press create new at the bottom of the page.
    3. Give the new product the name Test product
    4. Give the new product the description A test description
    5. Give the new product the price 10
    6. Select category Meat
    7. Press Save
    8. Download sample image to your local desktop from https://purple-rooster.herokuapp.com/static/assets/testproduct.jpg
    9. click choose file and select the sample image from your local desktop or image library on mobile device.
    10. Press upload and confirm file uploaded message
    11. In the top navbar click Meat section and confirm Test product is there.
    12. Go back to https://purple-rooster.herokuapp.com/admin/products and click on test product
    13. Press Delete product and confirm the product is deleted in the list.

Feature passed this test

Test Admin Users

The feature handles errors & success in the UI.

  1. feature test:

    1. sign out and register a test user.
    2. Sign in as [email protected] and password 123456
    3. In the admin section click Users in the horizontal toolbar.
    4. Click on the user created in step 1
    5. confirm name change, email change and set as admin change when Save is clicked
    6. Confirm the user is removed when delete is clicked.

Feature passed this test

Confirm Page not found

  1. Goto https://purple-rooster.herokuapp.com/nothing
  2. Confirm you get a "Page not found" Page

Feature passed this test

HTML & CSS Validator tests

Each page should return no errors & warnings using validator.w3.org

Pages to test

  1. index.html
  2. Product Fruits Page

Pages are validated without errors or warnings.

CSS Validation

Site CSS should return no errors or warnings.

  1. CSS Validator testing style.css
  2. CSS Validator testing rooster.css

CSS files passed the test. Note that there are Bootstrap warnings.

Known issues

  1. When clicking the navbar and a new route is made, style is flickering before landing on the correct style.
  2. Some tables uses table-responsive where user would have to scroll sideways where table columns won't fit.
  3. The template shop-homepage used has CSS warnings when running CSS validator.
  4. datetime fields in Firefox is not popups and date and time must be specified manually

Deployment

Site is deployed to https://purple-rooster.herokuapp.com/ using Heroku.

Heroku is connected to the Github repository with automatic deployment from the branch main. Every push or merge to main will trigger a new deployment.

make sure you run pip3 freeze > requirements.txt for all dependencies used.

Development

Versioning of this project uses Github

  1. Fork the rooster repo
  2. In the terminal run git clone https://github.com/{your-own-gituser-here}/rooster.git - to fetch code
  3. In the terminal run cd rooster - to place yourself in the root of the project.
  4. In the terminal run python3 app.py - to start a dev environment.

A python3 should start using the file app.py serving the Flask app and the site is now available on http://localhost:3000.

Credits

Template

The template shop-homepage used on this site is from Start Bootstrap

Media

The photos used in this site were obtained from:

Acknowledgements

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages