Over the past decade, the world has truly become a global economy. Global supply chain expansion has provided unparalleled choice for the consumer. In relation to the food industry, the term 'out of season' has become a thing of the past. No longer do we have to wait until the summer months to enjoy berries or winter for citrus fruits. With the popularity of grocery chains such as Lidl & Aldi, locally sourced fruit & vegetables are being phased out for cheaper produce which is normally shipped halfway across the globe. To endure this expedition, the produce is harvested well before it has reached maturity and ripened in shipping containers by the use of 'controlled environments'. This produce tends to turn bad very quickly due to this unnatural journey, sometimes within 48 hours of purchase causing massive food wastage. Most of us have lost the connection to the food we eat.
With my final milestone project for Code Institute, I will attempt to tackle this problem within our society. My goals is to get Ireland eating locally & in season again by creating a marketplace to connect local producers with consumers. My project Farm2Table aims to reduce the friction associated with sourcing local produce by having all local producers of fruit & veg in one marketplace. This environment will inspire competition between producers, allowing the consumers to easily find the best price for their local fruit & veg.
This section will outline potential features which I would like to implement in the future.
The goal of this project is to get Ireland eating locally again by creating a marketplace where fruit & vegetable producers will compete for orders.
This section will outline goals set out by application creator both in relation to how they would like to develop as a software engineer & their financial goals as regards to the website.
Currently, I have identified 3 possible streams of income this project would be able to generate.
-
A small fee will be applied to each purchase made within the application for connecting the producer with the consumer & processing payment between the 2 parties.
-
Producers will have the ability to purchase premium Farm2Table memberships giving them access to additional features, such as being highlighted on the front page of the website, ad-free storefronts.
-
Advertising revenue will be generated from the web traffic on the application.
| User Type | I want to be able to... | So that I can... |
|---|---|---|
| Seller | Add my listing to a marketplace | I can attract orders from a larger number of customers |
| Seller | Display product information | Allow the consumer to make an informed purchase |
| Seller | Post a photo of the produce | Entice customers to purchase my produce |
| Seller | Update listings | Change product descriptions, availability or pricing |
| Seller | Delete listings | Remove items that are no longer for sale |
| Seller | Receive reviews from consumers | See areas at which I can improve upon |
| Seller | Display my reviews to the end user | Encourage new users to choose me over my competitors |
| Seller | See the pricing of other producers | Regulate my pricing accordingly |
| Seller | Update listings | Change product descriptions, availability or pricing |
| Seller | Provide delivery options to the customer | Avoid the customer having to collect the order |
| Buyer | To view all listings in one marketplace | Find the best price or closest producer |
| Buyer | View individual product details | Make an informed purchase |
| Buyer | Easily view the total of my purchases | Control how much I am spending |
| Buyer | To view my previous orders | Compare current pricing or to review my spending |
| Buyer | Sort marketplace listings by category | Search for exactly the type of product I want |
| Buyer | Sort marketplace listings by price | Find the best price |
| Buyer | Sort marketplace listings by a number of categories simultaneously | Exclude product types that I'm not looking for |
| Buyer | Pay for my order within the application | Avoid payment upon collection |
| Buyer | Adjust the quantity of items within my shopping bag | |
| Buyer | View order confirmation after checkout | |
| Buyer | View the seller location before checkout | |
| Site User | Easily register an account | Have a profile in order to start placing orders |
| Site User | Easily log in/logout | Access my profile |
| Site User | Change my password | Recover access to my account in case I get locked out |
| Site User | Receive an email confirmation after registration | Verify that my registration was successful |
| Site User | Have a personalised user profile | View my previous orders |
| Site User | Easily make or receive secure payments | Place orders within the application |
-
As a user of this web application I want:
- A clean and enjoyable UX, everything should be where I want it.
- Fonts that are legible but something a bit different to the norm.
- Little to no load times when the website first starts or has to complete a process.
-
As somebody looking to advertise on this website I would like:
- Content that is family friendly and not provocative, so our brand doesn't become tarnished.
- Heavy user traffic in order to get our brand in front of as many eyeballs as possible.
- Fast load times to ensure impatient users don't leave the site.
I really enjoy this favicon which was sourced from Favicon.cc
For this project, I decided to use the Materialize framework which is build on the principles of material design. After completing the project using this new framework, I can safely say that I prefer it more than Bootstrap which I have used on my previous 2 milestone projects. It appears to provide more feedback to the user when they are navigating throughout the web application while remaining responsive on most devices.
All icons for this application have been sourced from Google Fonts collected from the Material Icons library. As the designer of the web application, the selection of the icons must be done in line with other successful applications.
The colour of the buttons throughout the site is unchanged as it is the primary button colour for the Materialize framework. During the design process, I noticed that this shade of blue complemented the teal hue of the navbar.
This section will outline the key elements within this application giving descriptions on the purpose of each element.
Other low level exceptions such as client-side errors (4xx) or server-side errors (5xx) will also be handled, describing to the user which error occurred. The user will also have an option to either return to their homepage or the login page depending on their credentials.
Lottie provides lightweight animation hosting which provides significantly smaller footprint than conventional animations.
This section will outline the technologies & processes used in the design & implementation of this application.
For this project, the frontend framework I decided to use was Materialize. In my previous 2 milestone projects, I chose Bootstrap for the frontend, but I can now safely say that I much prefer the look of Materialize. As it is based on the principles of material design, all elements just seem that little bit sharper and current.
One of the main goals of this milestone project was to integrate a database within our application and use it to it's full potential. CRUD in computer programming is an acronym which stands for create, read, update & delete. This covers the 4 main operations of a database. Within this section I will go over how I implemented each of these operations.
Flask is a web application framework written in Python based on the Werkzeug toolkit & the Jinja2 templating language. During my development of this application is when I noticed the usefulness of flask, getting to experiment with the different flask libraries. Jinja templating also opened a lot of doors for me as a web developer when managing repeated pre-defined data.
Due to the nature of the application, no image compression was needed as all design elements are from the Materialize framework. No images were used in the making of this application.
By using the Lottie animation player, we can bring beautiful animations into our application without having to worry about file size and hence performance. I have used a single hosted Lottie animation on the error.html page.
The CSS style rules have been Autoprefixed to maintain uniformity of style rules across all browsers.
As the application began to take shape with all major components in place, the user testing could commence. This was done by reviewing each component line by line to ensure that the code works as intended. If an edit was to be made, the developer made sure to the changes were reflected correctly on the frontend.
This section will cover all software dependencies needed to run this application.
This project was developed using Gitpod, committed to git and pushed to Github using the built-in function with Gitpod.
To deploy this page from Github pages from its Github repository, the following steps were taken.
- Log into Github.
- From the list of repositories on the screen, select saoirse-defi/milestone1-bad-arts-1.0.
- From the menu items near the top of the page, select Settings.
- Scroll down to the Github Pages section.
- Under source click the drop-down menu labelled None and select Master Branch.
- On selecting Master Branch, the page is automatically refreshed, the website is now deployed.
At the moment of submitting this milestone project, the default branch is version1.2 which is the latest version.
To clone this project into Gitpod you will need:
- A Github account
- Use the Chrome browser
Then follow these steps:
- Install the Gitpod browser extensions for Chrome
- After installation, restart the browser
- Log into Gitpod with your Gitpod account
- Navigate to the Github project repository
- Click the green 'Gitpod' button in the top right corner of the repository
- This will trigger a new Gitpod workspace to be created from the code in Github where you can work locally
To work on the code within a local IDE such as VScode:
- Follow this link to the Github repository
- Under the repository name, click 'clone' or 'download'
- In the clone with the https section, copy the clone URL for the repository
- In your local IDE, open the terminal
- Change the current working directory to the location where you want the cloned directory to be made.
- Type 'git clone', and then paste the URL copied in step 3
git clone https://www.Github.com/USERNAME/REPOSITORY
- Press enter. Your local clone will be created.
Further reading and troubleshooting on cloning a repository can be found here Github.
Follow these steps:
- Create a virtual environment with pipenv and install Flask and Gunicorn
- Create a “Procfile” and write the following code "touch Procfile" in the command line
- Create “runtime.txt” and write the following code "touch runtime.txt" in the command line
- Create a folder named “app” and enter the folder
- Create a python file, “main.py” and enter the sample code below
from flask import Flask app = Flask(name) @app.route("/") def home_view(): return "
- Get back to the previous directory “eflask”.Create a file“wsgi.py” and insert the following code
from app.main import app if name == "main": app.run()
- Run the vitual environment write "pipenv shell" in the command line.
- Initialize an empty repo, add the files in the repo and commit all the changes
- Login to heroku CLI using "heroku login"
- Create a unique name for your Web app, write "heroku create hashboard"
- Push your code from local to the heroku remote using "git push heroku master"
- Create a MongoDB Atlas account here
- Log into your MongoDB Atlas account
- Create a free, shared cluster by selecting your preferred provider, stick to the free tier
- Name your cluster and click create to deploy your cluster
- Add your connection IP address to the IP access list
- Create a new database user for your cluster
- Install PyMongo within your flask application, check version to see if installed correctly
- Provide a connection method & a configured connection string to MongoDB Atlas
- Import MongoClient from PyMongo within flask
- Insert a command within flask that specifies a client is for connecting to your cluster
- Create a new database within your cluster
- Create a new collection for your database
- Create a new document to add to your collection