everneed

Introduction

Everneed is an e-commerce site selling practical, sustainable, earth-friendly products with a carbon footprint total for your order. It has been developed as my Portfolio Project 5 for the Code Institute's Full Stack Software Developer Course using Django, HTML, CSS, JS & Python.

Everneed has been created using carbon data from available product carbon footprints, or PCFs. As this data is relatively new, this website is to be viewed with the understanding that the data within is unvalidated, 'fictional' data, calculated to the best of my abilities from all available information on the internet. Its purpose is to purely aid in developing the website's concept.

With the growing threat of climate change and sudden mass displacement of large communities from natural disasters, there has never been a more important time, in recent years, to have a 'Go-Bag' ready for yourself and family members. The initial concept of this website was to introduce the idea of living with a minimum of necessary items, in an attempt to escape capitalism and free ourselves to be able to experience life and spend time with our loved ones. This concept could be a more grim, mandatory idea in the not-too-distant future, if all manufacturing of unnecessary goods were to cease in an sudden effort to meet a new global carbon emissions target, since we have already shot through the existing ones.

Choosing to only purchase 100% necessary items, that have been created in the most sustainable way, and to be aware of your carbon spending at the same time, could be an e-commerce store type that will be with us sooner than we think. Carbon credits are already being implemented in industrial and agricultural sectors in an effort to slow our global carbon emissions rate, it could, in the near future, start affecting our purchases as individuals.

View live site: everneed

If you wish to make a test purchase, you can use the following Stripe Dummy Card details:

Success Card Number: 4242424242424242
3D Secure Auth Number: 4000 0027 6000 3184
Exp Date: Any date in the future using the format MM/YY
CVN: any 3 digit number
Postcode: any 5 numerals

Any payments made using a valid debit/credit card will not be processed and the card will not be charged. No orders made will be fulfilled.

For full Admin access to Django Admin panel with relevant sign-in credentials: Everneed Admin

For access to Admin Dashboard frontend view with relevant sign-in credentials: Everneed Admin Dashboard

Overview

Everneed is an eco-friendly products store focusing on procuring the best in sustainable, long-life products. Users are invited to:

View the store as Guests
Register for an Account
Use the stores Wishlist feature to record liked products
Browse products by category and price
View, add and edit products in their bag
Discover their carbon savings on certain items
As registered users, view past orders
Read the latest articles on climate change and environmental impacts
Sign up for a weekly environment issues newsletters

Everneed is accessible via all browsers with full responsiveness on different screen sizes. Its aim is to raise awareness of our carbon spend and provide an alternative to the fast-fashion trap.

Customer Goals

Customers are provided with an easy, intuitive shopping experience and are encouraged to avail of sustainable, eco-friendly products. It is hoped that customers will sign up/register an account with everneed to be able to avail of the full range of user features. Customers are consistently encouraged to make the best choices in terms of quality, environmentally friendly products. A sense of community is created with a weekly newsletter which will inform the customers of new products, trends and articles on everneed.

Business Goals

Everneed provides easy Admin functionality for the business owner with an accessible, easy-use Admin Dashboard to manage inventory and articles. The additional frontend forms allows the business owner to make quick and easy changes. Further information regarding users and orders can be accessed via the Admin Dashboard with a direct link to the information stored within the Django Admin Panel.

Everneed seeks to build a strong base of regular shoppers who seek long-life, quality products made from high quality, natural materials. The newsletter, articles and carbon footprint features aim to attract those who have concerns for the rising environmental issues that our planet faces. Further marketing is made through the businesses social media channels, in particular their Facebook page.

UX/UI - User Experience/User Interface

Design Inspiration

From the beginning of the project, I knew that the colour palette would reflect nature with shades of green acting as the primary colour, in particular forest green, #194f49. The website is kept clean, with good flow, using plenty of white space to draw attention to the products and the website's mission in reducing the carbon footprints of its users.

A simple logo, created using LogoAI is used as a favicon and email branding logo. The logo depicts a plant trapped within a vault, as we must protect our environment at all costs.

Everneed logo

Only the necessary information is displayed so as to not increase the size of the website and its own carbon footprint. Purple #8E164E and gold #CC4818 are used as accents to draw attention to active buttons and carbon totals. I created a hero image, using Figma and the site's product images, to add a modern, graphic edge to the website.

Image created by myself in Figma using product images

Product images are kept clean with no backgrounds so that focus is on the product itself. Feedback is continuously provided to the user via the website's header which displays whether the user is logged in and how many items are in their bag. Message 'toasts' are also visible upon user actions to display further information. Buttons are kept similar for continuity.

Header feedback is kept clean and intuitive

Color Scheme

Everneed Color Scheme

Variables were used within the CSS file to call colours as they were needed:

--forest: #194f49;
--yellow: #ffc824;
--bluegreen: #0e7373;
--purple: #8E164E;
--gold: #CC4818;
--white: #fff;
--black: #0d0d0d;

The above colours were chosen to reflect colours found naturally within nature. The primary, dominant colour of forest green #194f49, is used repeatedly throughout the website for its font and main sectioning. A muted version is used for dashed borders for input field focus and feedback to the user, this replaces the default blue border used in most browsers. The main buttons are created using #e5ede8 in a gradient to a darker #b5c9bd. This creates a sense of depth and creates a 3D feel to the buttons.

Everneed Main Button

The purple is used when a button or field text is brought into focus by the user, this provides feedback that there is an action available in the feature/area. The gold is used to provide contrast for important text that provides a link and also in the 'Subscribe' button visible in the newsletter section of the footer area. White space is maintained throughout the website to keep it clean, clear and fresh.

Further preparation for the colour scheme was carried out on Adobe Color to check for contrast levels and accessibility for those with sight issues. Text contrasts were checked also to ensure they exceeded the WCAG 2.1 Level for suitable contrast of web text.

Everneed Color Accessibility Check

Everneed Color Contrast Check - Main

Everneed Color Contrast Check - Button

Typography & Iconography

Everneed Font Pairing

Karla and Inconsolata were both imported from Google Fonts. They were chosen for their compatibility and aesthetics that aligned with the store brand. Karla is a sans-serif typeface with a clean and modern design which delivers a fresh and simple look to the store. Inconsolata is a monospace font which allows clear display of descriptions and information about the products. Together they apply enough textual contrast to allow for a good flow of information to the user, improving user experience. Using Google Fonts allows for faster, reliable loading times for the website, ensuring the user stays when they visit.

In development, 'Karla' was identified by variable --title, whilst 'Inconsolata' was set as --main-font within the CSS file. Similar to my setup for the project's colours, using variables helped to speed up the frontend process.

Project Planning

Strategy Plane

The primary objective was to create an e-commerce store that satisfied the assessment criteria of the Code Institute's Project 5: E-Commerce Module. The store must provide the expected functions of a responsive e-commerce store using Stripe as a payment system, user/guest views for authentication and store features, some extra features of my choosing, wishlist and articles, and demonstration of some marketing/SEO skills. Orders on Everneed were to display the carbon footprint totals and carbon saved, (where data is available, see below), reflecting the pressing need for eco-consciousness in these modern times. The User, whether paying customer or just browsing, must receive the best in UX and feel that Everneed is relatable and trust-worthy.

The site's design and graphic assets were collected through various copyright-free image websites. Images were edited for the website to be cohesive. The hero-image on the home page and above, was created by myself in Figma. Bootstrap and Crispy Forms were used for the project's frontend to speed up the process and to keep the templates consistent. Further customisation to the buttons, forms, modals, toasts and user feedback processes were added to the project's CSS files.

If a customer chooses to make a purchase then they are given consistent feedback through the use of 'toasts' messages and confirmation emails. The purchasing process is presented using Stripe payment handlers, obtained and setup using Stripe's documentation and website.

Carbon Footprint Planning

I spent a large portion of my project planning and researching to ensure that I would have sufficient product carbon footprint data available to me. This was so I could set up the carbon footprint total for the bulk of my store items. Carbon totals were calculated through my assessment of research materials and articles about carbon footprints and industry responsibilities. The values contained in the project are to be treated as approximate and are as follows:

Carbon Footprint Data Calculations-Part 1

Carbon Footprint Data Calculations-Part 2

Site Goals

Site provides enjoyable experience for shoppers.
Customers are educated about carbon footprints/credits/sustainable products through the checkout process and through reading the site articles and FAQ's.
Customers feel informed that they are making a good choice shopping with Everneed.
UX remains similar across screen sizes.
CRUD functionalities work as intended with easy to use frontend forms.
Scalable site to allow for extra features in the future.

Agile Methodologies

Everneed followed Agile planning methodologies to its completion. GitHub Projects provided an ideal platform to create issues, boards and milestones for each of the project's Epics. Using labels I could easily identify my next task and organise them into the appropriate Milestones and Sprints. Keeping focused on individual sections as I built Everneed reduced the number of bugs and human errors.

MoSCoW Prioritization

I chose to follow the MoSCoW Prioritization method for Everneed, identifying and labeling my:

Must Haves: the 'required', critical components of the project. Completing my 'Must Haves' helped me to reach the MVP (Minimum Viable Product) for this project.
Should Haves: the components that are valuable to the project but not absolutely 'vital' at the MVP stage. The 'Must Haves' must receive priority over the 'Should Haves'.
Could Haves: these are the features that are a 'bonus' to the project, it would be nice to have them in this phase, but only if the most important issues have been completed first and time allows.
Won't Haves: the features or components that either no longer fit the project's brief or are of very low priority for this release.

Sprints

My Sprints were broken down into appropriately sized chunks from the beginning and I followed them to the best of my abilities. It is difficult to quantify the time taken exactly for each sprint as running a busy household outside of the course meant the hours the project was completed in hours outside of the normal working week. I have done my best to record them below. They are representative of a general timeframe of focus on the project areas.

Sprint No.	Sprint Content	Start/Finish Dates
# 1	Project Setup	01/08/23 - 20/08/23
# 2	AllAuth & Basic Navigation	20/08/23 - 22/09/23
# 3	Product Views & CRUD	22/09/23 - 02/09/23
# 4	Shopping Bag Functionality & Styling	02/09/23 - 15/09/23
# 5	Wishlist Feature	15/09/23 - 17/09/23
# 6	Carbon Footprint & Articles	17/09/23 - 22/09/23
# 7	Admin Dashboard	22/09/23 - 26/09/23
# 8	User/Customer Correspondence	26/09/23 - 02/10/23
# 9	Documentation & Testing	02/10/23 - 15/10/23

Marketing

An Everneed Facebook Page was created to demonstrate promotion of the Everneed store on social media. Posts informing customers of deals and new products would be made on the page with the hopes of drawing in more revenue. Facebook provides an easy, minimal-step process to allow business owners to promote their business, with additional paid 'boost' features to further promote and spread the reach of the posts. Everneed also offers a newsletter subscription service through MailChimp. The benefit of both of these services is that the customer is not forced to sign up to either and potentially worry that they will be spammed with an unnecessary amount of information. Everneed avoids this in order to keep its brand clean and uphold its eco-friendly efforts.

Within the head's meta tags of the base template are researched keywords and a description of Everneed's goal as a business. These keywords have been researched usingWordtracker to ensure that both short-tail and long-tail keywords are included. Keywords such as 'carbon-neutral', 'zero waste' and 'practical products' aim to reach most of the market, with additional descriptive key phrases such as 'buy longlife products' and 'buy once products' to draw in users who know exactly what type of product they are looking for. Important keywords like 'Vegan', 'Organic' and 'Bamboo' are present in the product names and descriptions in the hope to catch a chance to appear at the top of the customers' Google searches.

In addition to this, sitemap.xml and robots.txt files are included to increase the site's visibility. These files are essential for SEO (Search Engine Optimisation). The sitemap.xml was generated using XML Sitemap and included in the root folder of the project. A robots.txt file was created in the root folder to instruct search engine crawlers on how to access and crawl the site's pages.

Everneed Facebook Business Page

User Stories

User stories and features were recorded and managed on GitHub Projects

Visitor User Stories

User Story	Priority
As a customer, I can view the site's home page so that I can understand the site's intentions and purpose.	MUST HAVE
As a customer, I can see and use the navigation bar so that I can make my way around the site and get to where I would like.	MUST HAVE
As a customer, I can enter text into the search bar so that I can search for a specific item.	MUST HAVE

Epic - Home View & User Account

User Story	Priority
As a customer I can create and manage an account with Everneed so that I can keep my personal details, order history and speed up my checkout process.	MUST HAVE
As a customer, I can edit my personal details on my account so that I can keep them up to date.	MUST HAVE
As a site user, I can enter my login details so that I can login in to my account.	MUST HAVE
As a site user, I can click on the visible links in the footer so that I can view the relevant information and destinations.	MUST HAVE
As a site user, I can register my email and receive a validation link via email so that I can create an account with everneed to track my spending and purchases.	SHOULD HAVE
As a customer, I can use the Contact Us form so I can send a message to the business/site admin.	SHOULD HAVE

Epic - Products

User Story	Priority
As a site user I can interact with sorting and view features on the 'All Products' page so that I can improve my shopping experience on the site.	MUST HAVE
As a site user, I can click on a navbar item for a specific category so that I can choose to view a smaller amount of related products.	MUST HAVE
As a customer, I can choose an individual product so that I can view its description, price, colours, sizes available etc.	MUST HAVE
As a site admin I can add a product to my inventory using a frontend from so that I can increase my range/amount of products available on site.	MUST HAVE
As asite admin, I can edit existing inventory from a frontend form so I can change the quantity of stock, sizes, colours or edit products description, price or image.	MUST HAVE
As a site admin, I can delete product from the inventory using a frontend form so that I can remove it from sale.	MUST HAVE

Epic - Basket Management & Purchasing

User Story	Priority
As a customer I can create and manage an account with everneed so that I can keep my personal details, order history and speed up my checkout process.	MUST HAVE
As a customer, I can click on 'Add to Bag' in my product viewso that I can add the product to my bag.	MUST HAVE
As a customer, I can increase/decrease/remove quantities of a product in my bag so that I can have control over what I wish to purchase.	MUST HAVE
As a customer, I can view my bag total from any page so that I can keep track of my potential spending.	MUST HAVE
As a customer, I can view my running total of carbon saved when I add products so that I can see how much carbon my purchases would had saved in their production vs non eco-friendly products of the same type.	MUST HAVE
As a customer, I can view my total carbon footprint saving on checkout and it's associated climate impact/lifestyle changes so that I can understand the equivalent value of carbon saved versus purchasing the same non eco-friendly products.	MUST HAVE
As a customer, I can checkout my products securely so that I can complete my purchase.	MUST HAVE
As a customer, I can receive an email after purchasing so that I can confirm my purchase and keep a record of my order.	MUST HAVE
As a site user I can view error pages with 'Home' links so that I can return to the main page if a page is missing or forbidden.	MUST HAVE

Epic - Wishlist

User Story	Priority
As a logged-in user I can click the 'Add to Wishlist' button so that I can keep a record of my favourite items.	COULD HAVE
As a logged-in user I can click the 'Remove' icon beside my Wishlist item so that I can remove that product from my Wishlist.	COULD HAVE

Epic - Newsletter

User Story	Priority
As a customer, I can enter my details into the newsletter form so I can receive emails about products or environmental issues/climate saving tips.	SHOULD HAVE

Scope Plane

To focus on the learning of the Stripe API and webhook handlers that would ultimately drive the inner workings of the project, I kept my Everneed scope lower than my previous project, FreeFido. A working e-commerce store was essential so I initially planned to keep to the MVP to ensure that I would complete the project successfully. Especially with the project being my final one for this Diploma, a rigorous year of learning left me ecstatic with my progress but cautious not to fall at the final hurdle from fatigue. However, through the planning stages I realised that I wanted to push further with the theme of an eco store and introduce carbon footprint as a currency that we may see in the future in the form of carbon credits.

Adding an Articles feature posted solely by the Admin of the website felt important to give more information to the customers on climate-change and manufacturing processes and their environmental impacts. An additional Wishlist feature would complement the site as some of the items have a higher price point due to their robust and eco-friendly manufacturing processes and longevity and the customer may like to purchase them at a later date.

Django's MVT framework allowed these features to be built quickly and addition of an Admin frontend panel for managing products and articles created a robust e-commerce site that could start taking orders tomorrow.

Essential features were:

User Accounts with AllAuth
Payment system with Stripe
Articles creation and management - Full CRUD
Product inventory management - Full CRUD
Shopping UX with Bag and Checkout processes - Full CRUD
Site responsivity
Business details to inform the user

Structural Plane

Everneed is built using Bootstrap, with Code Institute's Boutique Ado e-commerce project as its foundation. However, I picked apart the structure and styling to fit my own vision and changed quite a bit of the code. In particular I simplified the navbar and made the delivery banner a dropdown source of information, as is common with many modern e-commerce applications. Icons were sourced from Fontawesome and Flaticon through the wireframing process in Figma. The typography was chosen to give a clean, strong reading experience for the user. The Everneed icon was used as the Favicon. This is also repeated through the newsletter email.

A dashed forest green 2px border is used for form fields throughout the project to replace browsers default blue highlight. Form validation has been left with it's original styling as no change was needed. Bootstrap allowed for easy transition between screen sizes as many ecommerce purchases are made using our mobiles, so this was a priority focus. Bootstrap components such as forms, an accordion section and a product carousel raised the spec of the project, to give it a professional finish.

Skeleton & Surface Planes

Wireframes

Figma was used to create basic wireframes for Everneed. I had a vision of what the site would look like from the beginning so the planning process went smoothly. Figma allows easy creation of wireframes to the appropriate frame sizes for different screens. Addition of icons and extra design features is easy with their Plugins component which can connect to Flaticon for example.

Desktop/Tablet Home Page Wireframe

Mobile Home Page Wireframe

Desktop/Tablet/Mobile All Products Page Wireframe

Desktop/Tablet Product Page Wireframe

Shopping Bag Wireframe

Bag Contents Toast Wireframe

Mobile Menu & Auth Pages Wireframe

Desktop Register Page Wireframe

Desktop SignIn Page Wireframe

Desktop SignOut Wireframe

Database Schema

Database Schema (ERD) for Everneed displaying relationships between feature components saved within the database

Lucidchart was used to create the ERD(Entity Relationship Diagram) for Everneed. To satisfy the assessment criteria, multiple models were created to personalise the Everneed project. These include:

Articles: Articles may be added by Admin with image and text fields within the Add/Edit Article forms.
Order: Carbon Footprint total and Carbon Saved Total have been added to the Boutique Ado Order model to handle the carbon total logic. This logic duplicates the product adding/updating/quantity logic within the bag contexts to allow for the carbon footprint to be calculated for products that had some form of data available to me to calculate approximate values.
Product: Carbon Footprint and Carbon Saved have been added to the Boutique Ado Product model to handle the carbon total logic. The Admin can enter these values into the Product Management forms to be made available for the bag/checkout logic to process them.
Wishlist: The Wishlist model takes simple values of the connected user and the product id to display the items in a list for the individual user.

Future Feature models are visible in the ERD for Reactions, Reviews and Discount Codes. These will be incorporated into the next version of Everneed. At the moment they are beyond the MVP.

Defensive Design

Everneed was developed to ensure a reliable user experience. It's intention was to cause no frustrations for the users and to ensure they return to make further purchases.

Django AllAuth for user registration/log in/log out
Input validation and error messages provide feedback to the user to guide them towards the desired outcome.
Unregistered users are diverted to the Sign Up page from restricted access pages.
Authentication processes control edit/delete icons to reveal them to the Admin only, this is further secured through accessing of CRUD functionalities in the Admin Dashboard.
Deletion of data is confirmed through an additional modal, double-checking with the user.
Error pages are displayed with 'Home' buttons to help users get back on track.
Testing and validation of features completes the process.

CSRF Tokens

CSRF (Cross-Site Request Forgery) tokens are included in every form to help authenticate the request with the server when the form is submitted. Absence of these tokens can leave a site vulnerable to attackers who may steal a user's data.

Features

User View - Guests/Account Holders

Feature	Guest	Registered, Account Holder
Home Page	Visible	Visible
Account	Not Visible - 'Account' option only appears for registered, logged-in users	Visible and full feature interaction available
All Products	Visable - items can be viewed and added to Bag, Wishlist function not available	Visible and full feature interaction available
Categories	Visible - items can be viewed and added to Bag, Wishlist function not available	Visible and full feature interaction available
Read	Visible	Visible
Search	Visible	Visible
Contact Us/Newsletter	Visible	Visible
Admin Dashboard	Not Visible	Only visible to Admin

CRUD Functionality

Customers have full CRUD functionality with their prospective purchases. They may edit their bag, add more items or remove all items. They may also edit their delivery details if they are registered, logged-in users. Everneed Admin have access to the Admin Dashboard which allow them full CRUD over Product Management and Article posting.

Feature	Create	Read	Update	Delete
Account	On registration	Yes, delivery details and order history	Yes, update address	No, users are unable to delete their accounts, this is restricted to Admin
Bag	Yes, customers may add to their bag	Yes	Yes, items can be added/removed	Yes
Products	Yes, Admin only	Yes, all users	Yes, Admin only	Yes, Admin only
Articles	Yes, Admin only	Yes, all users	Yes, Admin only	Yes, Admin only

Features Showcase

Header & Navigation - All Users

For features showcase, screenshots of the features in use were taken on Laptop/iPad Pro/iPhone 12 Pro

Everneed's navbar is kept clean, with a simple dropdown menu for the 'All Products' section.

The search icon yields a search modal when clicked.
The profile icon changes to reflect the logged in/out status of the user.
The heart icon takes the user to the wishlist, if logged in, otherwise they will be directed to the log in page.
The bag displays the number of items within it if the customer adds an item to it.

The navbar is displayed via a dropdown toggle in mobile view.

Header & Navigation - All Users

Header & Navigation Menu Demo

Header & Navigation Mobile View

Home Page - All Users

The Everneed Home Page invites the user in with a large hero graphic, designed in Figma by myself using product images. An 'Explore Now' button brings the user straight to the 'All Products' page. On scrolling down, the bestsellers section is visible in a carousel fashion that displays four products at a time. The Admin has the option to select the 'Featured Item' box in the Admin Product CRUD view. Additional side arrows allow the user to cycle forwards and backwards through the items at their pace. When clicking the product image the customer is brought to the product page.

Below this is the Mission section with a smooth scroll animation fade-in and underline when the user moves down the flow of the page. Here the customer can identify the business's core values.

A simple accordion section for business FAQ's follows this. Answering a broad spectrum of possible customer questions.

Home Page - All Users

Home Page: Bestsellers Carousel Demo

Home Page: Mission Section - All Users

Home Page: FAQ Section - All Users

Delivery Banner - All Users

This dropdown banner is inspired by Patagonia's colourful dropdown banner. I wished to replicate it and I was happy with the outcome. Extra delivery and contact information is displayed to the user when the dropdown arrow is clicked. The webpage that the user was currently visiting is blurred out and click is disabled outside the delivery banner area. Clicking the x in the top right corner returns the delivery banner back upwards to the top and the blur is removed from the webpage. When extended or in place at the top of the screen, the banner cycles through a selection of the Everneed design palette colours.

Delivery Banner - All Users

Search - All Users

The search icon when clicked presents the user with a search modal that will take the user's input and return the relevant products. If that product is not available then the search result informs the user that there are '0' products with that name.

Search - All Users

All Auth - All Users who wish to create an account

Django AllAuth provides a comprehensive, customisable authentication system that keeps user data safe. If a customer wishes to register an account they may enter their username and email and password x 2 to ensure precision. Upon submitting the form the user will receive an email to validate their email and then sign in to Everneed. Similar to all form fields throughout the site, I have applied my own styling to keep in line with Everneed's design. The log in page is similar to the register page with the log out page presenting the user with two buttons to continue the log out process or to return home.

Feedback is continually released to the user through toast messages to confirm successful registration, log in and log out.

AllAuth handles password reset by sending an email to the user with a link to change their password to something new.

Register - All Users

Confirm Email - All Users

Log In - All Users

Log In Toast - Registered, Verified Users

Log Out - All Users

Password Reset - All Users

Password Success - All Users

Account - Registered, logged in User

The Account page for Everneed is kept simple, with only relevant information and functionality. The registered, logged in user may adjust their personal, delivery address to be autofilled into their checkout form when making a purchase. Previous purchases are displayed in the Order History, displayed by most recent date.

Account Toast - Registered, logged-in Users

Account View - Registered, logged-in Users

All Products - All Users

Everneed sells a curated list of products, selected because of their sustainable production values and natural materials. Products with natural, sustainable materials such as organic wool, bamboo, vegan leather and cotton are available to the customer. Eco-labels will identify these materials quicker to the customer in future versions of Everneed. Clothes are presented as ungendered.

The product list and product details pages are kept responsive and neat thanks to Bootstrap's grid system to collapse the rows into single columns. A 'Back to the Top' button appears in the bottom right corner of the webpages if the user has scrolled more than 20 pixels from the top of the screen. Only essential information is displayed with size options broken into three categories for clothes, accessories and shoes.

Products may be sorted according to price, A-Z, rating and category using the dropdown sort field.

Admin may access the Admin Dashboard to add/edit/delete any items within the database. Crispy Forms renders the adding/editing forms with some extra styling from myself to remove the default blue highlight border and replace it with a green dashed border to fit within the project's design. Border radius of 15px is added to round the form fields and buttons are styled to be similar across the website. Products have the ability to display a 'Rating', at themoment it is at the discretion of the Admin to add these values based on sales. With the next version of Everneed, the Reviews feature will dictate the average rating for each product.

No information is lost when viewing the website on mobile view. All screen sizes display the same information to give all users the same experience.

All Products Desktop - All Users

All Products Mobile - All Users

Product Detail Desktop - All Users

Product Detail Mobile - All Users

Admin Product List - Logged-In, Admin only

Admin Add Product Form - Logged-In, Admin only

Admin Edit Product Form - Logged-In, Admin only

Admin Confirm Delete - Logged-In, Admin only

Categories - All Users

Everneed keeps it's shopping experience clean and easily accessible with four categories:

Wear for clothing, accessories and footwear
Care for personal care items
Eat for food and drink items
Travel for bags and travel items

'All' displays all of the products available. Icons from FontAwesome, below the product images, show which category the item is from.

Everneed Categories - All Users

Articles - All Users/Admin CRUD

The articles currently displayed on Everneed are informing customers of the ecological, environmental and climate issues our planet is currently facing. The text within the article has been created by Chat GPT when prompted to respond about natural disasters that the world has been facing. The Admin have sole responsibility to add/edit/delete articles with no current option for the customer/reader to respond or engage with the post. This is partly because the brand aims to engage the customer into making a purchase to better the planet, by choosing sustainably-produced, long-life products.

The Admin may add/edit/delete articles via the Admin Dashboard. If no image is included in the form or if the image url brekks, a placeholder image is present so as not to display a broken image link. Deletion is confirmed via a confirm deletion modal. When adding an article, the Admin may choose to save the article to drafts or publish them immediately. Drafts are accessible via the django backend panel and are published by selecting the published checkbox.

Articles List - All Users

Individual Article View Desktop - All Users

Individual Article View Mobile - All Users

Articles List Edit/Delete View - Admin only, accessed via Admin Dashboard

Add Article Form Mobile View - Admin only, accessed via Admin Dashboard

Articles Edit Form Mobile View - Admin only, accessed via Admin Dashboard

Articles Delete Confirmation Modal - Admin only, accessed via Admin Dashboard

Bag - All Users

Everneed's Shopping Bag feature is presented in a clean and clear format to correctly and quickly inform the user of their possible purchase choices. The customer has the option to change the amounts of the items that they wish to buy or to remove them completely from the bag. The customer is shown their running totals as well as their delivery charge and their carbon saved and carbon footprint total. When products are added/updated/removed to/from the bag, then a toast message displays to give the customer feedback on their most recent choice.

A clear message is shown if there are no items in the bag and a 'Keep Shopping' button redirects the user back to the 'All Products' page. A delivery threshold banner informs the customer how much more they need to spend to reach the free delivery threshold.

Bag Contents Desktop/Tablet - All Users

Bag Contents Mobile - All Users

Bag Toast Message displaying Bag Contents

Bag Toast Delivery Threshold message - All Users

Bag Empty - All Users

Checkout - All Users

The checkout process for Everneed is operated through the Stripe API. As stated above -> If you wish to make a test purchase, you can use the following Stripe Dummy Card details:

Success Card Number: 4242424242424242
3D Secure Auth Number: 4000 0027 6000 3184
Exp Date: Any date in the future using the format MM/YY
CVN: any 3 digit number
Postcode: any 5 numerals

Any payments made using a valid debit/credit card will not process and the card will not be charged. No orders made will be fulfilled.

When the customer has added items that they wish to purchase to their bag, they are given the option to proceed to 'Secure Checkout' to complete their order. This checkout form contains a personal, delivery/billing information form that will display previously entered details if the user is logged in and had previously ticked the box to save their details. The Stripe Payment form accepts the user's information and will inform them if they attempt to use an invalid card. Validation is also present in the delivery form area, to remind the user if they have not entered all of the relevant details.

The items the customer has chosen are visible on the right hand side of the webpage with their grand total and an additional box to display the Carbon saved and Carbon footprint total for their order. If the customer has not satisfied the free delivery threshold of €50, then a delivery charge of 10% of the grand total will be added to cover the cost of delivery.

Once the Checkout form has been submitted, a loading spinner informs the user that their payment is processing. Stripe's webhook handlers make this process smooth as the payment may attempt 5 times before being unsuccessful overall. In the Developer's view in the Stripe Dashboard, developers can check the webhook and payment processes to confirm they are working correctly.

Stripe Webhook/Payment Successful - Admin

Checkout Desktop - All Users

Checkout Mobile - All Users

Checkout Stripe Form - All Users

A confirmation email for the order is emailed to all customers. This details their spending amount and the date of their purchase. Their totals and items purchased are also visible in the checkout success page upon successful payment processing. If the user is logged in, they can view this order and all previous orders, if they were logged in at the time of purchase, in their account view.

Confirmation Email for Purchases

Checkout Success - All Users who've made a purchase

Order History - All Users who've made a purchase with a registered, logged-in account

Wishlist - Registered, logged in Users only

A Wishlist feature allows the logged in user to keep a list of their favourite products. When logged in, on viewing an individual product, the user will see the 'Add to Wishlist' button. When clicked, user is informed via toast message that the product has been added successfully or whether the product already exists within the Wishlist. The heart icon in the navbar, when hovered displays the 'Wishlist' tooltip, and when clicked brings the logged in user to the wishlist page. If not logged in, when clicked it brings the user to the 'Log In' screen.

The Wishlist is a simple list display with a 'Remove Item' icon and text aside the product. There is no delete confirmation modal as this action is not a permanent deletion action, so is easily rectified if the product is accidentally removed from the list. When the item image is clicked the user is brought to the product detail page where they may add the item to their bag. The item is not automatically deleted from the wishlist if the user adds it to the bag.

Wishlist Button - Registered, logged-in Users only

Wishlist Page Desktop - Registered, logged-in Users

Wishlist Page Mobile - Registered, logged-in Users

Admin Dashboard - Logged in Admin/Superuser only

When developing this project it was important to me to have a separate Admin area accessible via the frontend, in addition to the Django Backend Panel. I fulfilled this by separating out the CRUD features for the Admin/Superuser into an Admin Dashboard. This provides a direct link to editable forms for adding/editing products and articles. A separated 'Admin' view (viewable only to the Admin when they are logged in) has been created for Articles and Products with lists that display 'Edit' and 'Delete' Buttons. The 'Add' buttons bring the Admin directly to adding products or articles. Crispy Forms and Summernote render forms that allow for a high degree of editing, manipulation and connection to the database models. Defensive design for deletion of items appears in the form of a 'Delete Confirmation' modal.

Admin Dashboard View - Admin Only

Admin Django Backend Panel - Admin Only

Footer - All Users

Everneed's footer is brightly coloured with the default forest green colour to contrast against the site's important white space. A purple SVG presents the newsletter subscription form for users to sign up for weekly emails. Across from this are a list of links that aim to give the customer all of the information they would need about Everneed. FAQ links the user back to the home page's accordion section of the usual questions and answers. Contact Us opens a contact modal for any queries that remain unanswered by the FAQ's.

The stores Privacy Policy and Terms and Conditions follow underneath. The Privacy Policy opens in a new tab whilst the Terms and Conditions are displayed on a new Everneed webpage thanks to Termly's pasteable HTML block, once you have given the relevant business details. Finishing off that column are the business's Social Media connections. A Facebook page for Everneed opens in a new tab, as does my Twitter page containing a mix of climate change documents and web development articles. My LinkedIn and GitHub are also connected and will open in a new tab.

At the very bottom of the footer are the business's address which highlights in yellow when hovered and links to the Google Map for a generic address in Mullingar, the address for this fictional business. The copyright link when clicked brings the user to my project's README file.

Footer - All Users

Privacy Policy - All Users

Terms & Conditions - All Users

Contact Us - All Users

A brief contact form is offered in the footer of Everneed for any queries the customer may have. Once they have submitted their name, email and message, a thank you page is displayed, with a 'Return Home' button. The Admin may view the messages in their connected business email service and reply directly to the customer.

Contact Us Form - All Users

Contact Form Thank You

Contact Form Email

Newsletter - All Users who subscribe

Everneed customers are invited to subscribe to Everneed's weekly eco newsletter. This form is located on every page in the footer. The newsletter service is offered through Mailchimp. The newsletter aims to keep customers informed of discounts, new products, sales and environmental issues on a weekly basis. On entering their email and clicking subscribe, the user is brought to a new page in a new tab confirming their subscription to Everneed. They may unsubscribe from here or from the bottom of the weekly newsletter.

Everneed Newsletter Form

MailChimp Newsletter Sign Up Confirmation

MailChimp Newsletter Example

404 Page - All Users

If a customer navigates to a page that does not exist eg 'everneed-herokuapp.com/test/' this page is displayed to the user. A 'Go Home' button takes the user back to the Home page.

404 Error Page

Future Features

Stock Levels: Editable stock levels are a priority future feature for Everneed. This will be added to the Admin Dashboard and the customer will be informed of stock levels via display labels if a product is out of stock.
Article Comment, Article React: As the Article's feature is only added to/edited by Admin, I considered having some way for user's to interact with the content. Through its development I decided that Article Comments would be a 'WON'T HAVE' issue as I felt that having that much of a social media feature would not suit the Everneed brand. I also considered a 'Reaction' feature which at the moment remains at 'COULD HAVE'. Having several eco-related emojis could be a possibility but I would want to ensure that they do not detract from the seriousness of the article's content.
Reviews feature with Ratings: I hope to include a Reviews feature in Everneed's future development. I would like the customer's to have access to real-life reviews of the products' robustness, wear and materials. I feel that for the brand it is important for transparency to be front and centre to ensure customers make the best choice in their purchases, particularly with most of the products aiming to be non-gendered sizing. Reviews will have their averages calculated and this will determine the products' rating out of 5 when implemented.
Eco-Labels:Further Categorise products with eco-labels for materials and production processes. This will further inform the customer of what exactly they are purchasing and will add to the carbon footprint feature.
Newsletter Discount Code:Discount codes obtained through newsletter subscription will offer the customer a 10% discount on their first purchase if they subscribe to the newsletter distributed via MailChimp.
Sale Section: Inclusion of a sale section for Admin to add stock that is ready to be offered at a discounted price.
Product Slugs: Using Django-Slugify, the future version of Everneed will ensure that the product's name is displayed in the URL.

Technologies & Languages Used

HTML
CSS
JavaScript
Python
Git used for version control.
Github used for online storage of codebase and Projects tool.
CodeAnywhere as an online, cloud-based IDE for development.
Figma for project design planning and wireframe creation.
Adobe Color for colour theme creation and accessibility checkers.
Django was used as the Python framework for the site.
Heroku was used to host the 'everneed' application.
WAVE to evaluate the accessibility of the site.
Procreate for image creation and editing.

Libraries & Frameworks

Libraries and frameworks used were dictated by the 'Boutique Ado' walkthrough from our course material with the Code Institute. This project will be upgraded on completion of the course to more recent packages to meet current standards and security packages.

Django v3.2
AllAuth v0.41 for user authentication and account management.
Bootstrap v4.6 for template rendering.
Crispy Forms for form rendering.
boto3 for AWS CRUD with Python scripts.
dj-database-url for DATABASE_URL.
django-countries for country field rendering in checkout form.
django-storages for handling static and media files.
django-summernote a WYSIWYG editor for Django forms and models.
gunicorn apure-Python WSGI server for UNIX.
oauthlib OAuth request-signing logic.
psycopg2 s PostgreSQL database adapter for Python.
Stripe for processing Everneed's payment system.

Tools & Programs

ImageCompressor for compressing PNG/WEbp files
Image ReSizer for reducing image size
EZGif for gif conversion.
Convertio for file conversion to PNG, WEBP.
Tiny Png for file size reduction.
Lucidchart for ERD (entity relationship diagram) creation.
Favicon for converting an icon into a favicon.
amiresponsive for screenshot of Everneed on different screen sizes.
Perplexity AI for breaking down Python concepts and Django documentation into more understandable chunks.
Mailchimp is used for marketing with their newsletter subscription service.

Testing

For all testing, please refer to the TESTING.md file.

Deployment

Connecting to GitHub

To begin this project from scratch, you must first create a new GitHub repository using the Code Institute's Template. This template provides the relevant tools to get you started. To use this template:

Log in to GitHub or create a new account.
Navigate to the above CI Full Template.
Click 'Use this template' -> 'Create a new repository'.
Choose a new repository name and click 'Create repository from template'.
In your new repository space, click the purple CodeAnywhere (if this is your IDE of choice) button to generate a new workspace.

Django Project SetUp

Install Django and supporting libraries:

pip3 install 'django<4' gunicorn
pip3 install dj_database_url psycopg2

Once you have installed any relevant dependencies or libraries, such as the ones listed above, it is important to create a requirements.txt file and add all installed libraries to it with the pip3 freeze --local > requirements.txt command in the terminal.
Create a new Django project in the terminal django-admin startproject everneed .
Create a new app eg. python3 mangage.py startapp home
Add this to list of INSTALLED_APPS in settings.py - 'home',
Create a superuser for the project to allow Admin access and enter credentials: python3 manage.py createsuperuser
Migrate the changes with commands: python3 manage.py migrate
An env.py file must be created to store all protected data such as the DATABASE_URL and SECRET_KEY. These may be called upon in your project's settings.py file along with your Database configurations. The env.py file must be added to your gitignore file so that your important, protected information is not pushed to public viewing on GitHub. For adding to env.py:

import os
os.environ["DATABASE_URL"]="<copiedURLfromElephantSQL>"
os.environ["SECRET_KEY"]="my_super^secret@key"

For adding to settings.py:

import os
import dj_database_url
if os.path.exists("env.py"):
import env
SECRET_KEY = os.environ.get('SECRET_KEY') (actual key hidden within env.py)

Replace DATABASES with:

DATABASES = {
    'default': dj_database_url.parse(os.environ.get("DATABASE_URL"))
  }

Set up the templates directory in settings.py:

Under BASE_DIR enter TEMPLATES_DIR = os.path.join(BASE_DIR, ‘templates’)
Update TEMPLATES = 'DIRS': [TEMPLATES_DIR] with:

os.path.join(BASE_DIR, 'templates'),
os.path.join(BASE_DIR, 'templates', 'allauth')

Create the media, static and templates directories in the top level of the project file in the IDE workspace.

A Procfile must be created within the project repo for Heroku deployment with the following placed within it: web: gunicorn everneed.wsgi
Make the necessary migrations again.

Elephant SQL

A new database instance can be created on Elephant SQL for your project.

Choose a name and select the Tiny Turtle plan, which is free.
Select your Region and the nearest Data Center to you.
From your user dashboard, retrieve the important 'postgres://....' value. Place the value within your DATABASE_URL in your env.py file and follow the below instructions to place it in your Heroku Config Vars.

Heroku Deployment

To start the deployment process , please follow the below steps:

Log in to Heroku or create an account if you are a new user.
Once logged in, in the Heroku Dashboard, navigate to the 'New' button in the top, right corner, and select 'Create New App'.
Enter an app name and choose your region. Click 'Create App'.
In the Deploy tab, click on the 'Settings', reach the 'Config Vars' section and click on 'Reveal Config Vars'. Here you will enter KEY:VALUE pairs for the app to run successfully. The KEY:VALUE pairs that you will need are your:
- DATABASE_URL:postgres://...
- DISABLE_COLLECTSTATIC of value '1' (N.B Remove this Config Var before deployment),
- SECRET_KEY and value
- AWS_ACCESS_KEY and value
- AWS_SECRET_ACCESS_KEY and value
- EMAIL_HOST_PASS and value
- EMAIL_HOST_USER and value
- STRIPE_PUBLIC_KEY and value
- STRIPE_SECRET_KEY and value
- STRIPE_WH_SECRET and value
- USE_AWS and value
Add the Heroku host name into ALLOWED_HOSTS in your projects settings.py file -> ['herokuappname', ‘localhost’, ‘8000 port url’].
Once you are sure that you have set up the required files including your requirements.txt and Procfile, you have ensured that DEBUG=False, save your project, add the files, commit for initial deployment and push the data to GitHub.
Go to the 'Deploy' tab and choose GitHub as the Deployment method.
Search for the repository name, select the branch that you would like to build from, and connect it via the 'Connect' button.
Choose from 'Automatic' or 'Manual' deployment options, I chose the 'Manual' deployment method. Click 'Deploy Branch'.
Once the waiting period for the app to build has finished, click the 'View' link to bring you to your newly deployed site. If you receive any errors, Heroku will display a reason in the app build log for you to investigate. DISABLE_COLLECTSTATIC may be removed from the Config Vars once you have saved and pushed an image within your project.

Google Mail Setup

Setup a Gmail Account that will be used to hold and store the emails for your project.
Logged in, navigate to Settings -> Other Google Account Settings -> Accounts -> Import -> Other Account Settings
Activate 2-Step Verification
Once verified access App Passwords -> Other -> enter a name for the password, eg Everneed.
Click Create -> copy the 16 digit password that is generated.
In your settings.py add the following Email Settings:
Django Email Settings for Everneed Email setup
Add EMAIL_HOST_PASS, EMAIL_HOST_USER variable, password and email address to your Heroku Config Vars

AWS Config

AWS is used to store the media and static files online for Everneed. Please follow the below steps to set it up for yourself:

Setup AWS Account and Login
Create a new S3 Bucket -> name it to match your Heroku App name -> Choose the region closest to you.
Allow Clock All Public Access, tick 'Bucket will be public' in order for the bucket to connect to Heroku.
In Object Ownership -> ACLS Enabled -> Bucket Owner Preferred.
Properties tab -> turn on static web hosting and add 'index.html' and 'error.html' into the correct fields -> click Save

In the Permissions tab, paste in the following CORS config:

 [
 	{
 		"AllowedHeaders": [
 			"Authorization"
 		],
 		"AllowedMethods": [
 			"GET"
 		],
 		"AllowedOrigins": [
 			"*"
 		],
 		"ExposeHeaders": []
 	}
 ]

Copy your ARN string.
From the Bucket Policy tab, select the Policy Generator link, and use the following steps:
- Policy Type: S3 Bucket Policy
- Effect: Allow
- Principal: *
- Actions: GetObject
- Amazon Resource Name (ARN): paste-your-ARN-here
- Click Add Statement
- Click Generate Policy
- Copy the entire Policy, and paste it into the Bucket Policy Editor
```
 {
 	"Id": "Policy1234567890",
 	"Version": "2012-10-17",
 	"Statement": [
 		{
 			"Sid": "Stmt1234567890",
 			"Action": [
 				"s3:GetObject"
 			],
 			"Effect": "Allow",
 			"Resource": "arn:aws:s3:::bucket-name/*"
 			"Principal": "*",
 		}
 	]
 }
```
- Before you click "Save", add /* to the end of the Resource key in the Bucket Policy Editor (like above).
- Click Save.
In the ACL - Access Control List -> Edit -> enable List for Everyone(Public Access) -> Accept the warning.

AWS - IAM setup

AWS Services Menu -> Create New Group -> add name eg. 'group-project-name'.
Navigate from there to REview Policy page -> User Groups -> Select newly named group.
Navigate to Permissions tab -> Add Permissions -> Click Attach Policies
Select policy -> Add Permissions at the bottom, click when finished.
From JSON tab -> select Import Managed Policy link -> search for S3 -> select Amazon3FullAccess policy -> Import.

Copy ARN from S3 Bucket again ->

 	{
 		"Version": "2012-10-17",
 		"Statement": [
 			{
 				"Effect": "Allow",
 				"Action": "s3:*",
 				"Resource": [
 					"arn:aws:s3:::bucket-name",
 					"arn:aws:s3:::bucket-name/*"
 				]
 			}
 		]
 	}

Click Review Policy -> name eg. 'policy-everneed' -> enter a description -> Create Policy
Search for your new policy and click it to Attach Policy
User Groups -> Add User -> name eg. 'user-everneed'
For Select AWS Access Type -> select Programmatic Access -> Add group to 'user-everneed' -> Review User -> Create User.
Find Download.csv button to download immediately and save a copy.
- This contains the user's Access key ID and Secret access key.
- AWS_ACCESS_KEY_ID = Access key ID
- AWS_SECRET_ACCESS_KEY = Secret access key

Media Folder Setup

In Heroku Config Vars, remove DISABLE_COLLECTSTATIC.
In AWS S3 create a new folder -> media -> Add project images -> Manage Public Permissions -> Grant public read access to the objects -> Upload

Django AWS Connect

Packages needed to use AWS S3 Buckets in Django:
- pip3 install boto3
- pip3 install django-storages
In settings.py add:
```
INSTALLED_APPS = [
    'storages',
]
```
In env.py ensure AWS variables are present for AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY and environment variable paths are in settings.py:
```
import os
from pathlib import Path
import dj_database_url

if os.path.isfile('env.py'):
import env
```

Ensure DATABASES are set up to connect with Heroku Postgres server in production vs SQLite3 when in local development.

if "DATABASE_URL" in os.environ:
 DATABASES = {
 	"default": dj_database_url.parse(os.environ.get("DATABASE_URL"))
 }
 else:
 DATABASES = {
 	"default": {
 		"ENGINE": "django.db.backends.sqlite3",
 		"NAME": os.path.join(BASE_DIR, "db.sqlite3"),
 	}
 }

Setup media and static file storage in settings.py:

STATIC_URL = "/static/"
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

S3 Bucket config in settings.py is as follows:

if 'USE_AWS' in os.environ:
 # Cache control
 AWS_S3_OBJECT_PARAMETERS = {
     'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT',
     'CacheControl': 'max-age=94608000',
 }

 # Bucket Config
 AWS_STORAGE_BUCKET_NAME = 'everneed-096aafe5d13c'
 AWS_S3_REGION_NAME = 'eu-west-1'
 AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
 AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
 AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'

 # Static and media files
 STATICFILES_STORAGE = 'custom_storages.StaticStorage'
 STATICFILES_LOCATION = 'static'
 DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
 MEDIAFILES_LOCATION = 'media'

 # Override static and media URLs in production
 STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
 MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'

In the main project directory create a 'custom_storages.py' file and add the following:
```
  from django.conf import settings
```

from storages.backends.s3boto3 import S3Boto3Storage

class StaticStorage(S3Boto3Storage): location = settings.STATICFILES_LOCATION

class MediaStorage(S3Boto3Storage): location = settings.MEDIAFILES_LOCATION ``` 8. AWS S3 Bucket is now connected through the above settings and Heroku's Config Vars.

Stripe Config

Stripe's API is used to handle Everneed's payment system. To setup follow the below steps:

Create and log in to a Stripe account.
In the Stripe Dashboard -> Get your test API keys.
Add your STRIPE_PUBLIC_KEY and STRIPE_SECRET_KEY to your env.py, connect to your settings.py using your environment variables and then enter them into your project's Heroku Config Vars.
Including Stripe's Webhooks creates a failsafe if a customer exits the page during payment authorisation. In Stripe's Dashboard -> Developers -> Webhooks -> Add Endpoint: 'herokuapp url/checkout/wh'
Choose Retrieve all events -> Add Endpoint.
Add new key STRIPE_WH_SECRET to env.py, settings.py and Heroku Config Vars as before.

Clone Project

A local clone of this repository can be made on GitHub. Please follow the below steps:

Navigate to GitHub and log in.
The Everneed Repository can be found at this location.
Above the repository file section, locate the 'Code' button.
Click on this button and choose your clone method from HTTPS, SSH or GitHub CLI, copy the URL to your clipboard by clicking the 'Copy' button.
Open your Git Bash Terminal.
Change the current working directory to the location you want the cloned directory to be made.
Type git clone and paste in the copied URL from step 4.
Press 'Enter' for the local clone to be created.
Using the pip3 install -r requirements.txt command, the dependencies and libraries needed for FreeFido will be installed.
Set up your env.py file and from the above steps for ElephantSQL, gather the Elephant SQL url for addition to your code and add your SECRET_KEY and STRIPE/AWS keys if using these services.
Ensure that your env.py file is placed in your .gitignore file and follow the remaining steps in the above Django Project Setup section before pushing your code to GitHub.

Fork Project

A copy of the original repository can be made through GitHub. Please follow the below steps to fork this repository:

Navigate to GitHub and log in.
Once logged in, navigate to this repository using this link everneed Repository.
Above the repository file section and to the top, right of the page is the 'Fork' button, click on this to make a fork of this repository.
You should now have access to a forked copy of this repository in your Github account.
Follow the above Django Project Steps if you wish to work on the project.

Credits

Code

The following blogs/tutorials complimented my learning for this project, alongside the Code Institute's Learning Content. The Portfolio Project 5 - Boutique Ado provided a foundation which I took apart and altered to fit my project's design

Django Docs
Bootstrap Docs
Code Institute's Blog/Boutique Ado walkthroughs
Daisy McGirr's easy to follow Django Recipe App tutorial for understanding how to use Django's MVT framework
Remove blue highlight shadow from around input field when selected StackOverflow
Newsletter sign up template and SVG Bootsnipp
Change color of Bootstrap svg item using background image url Codepen
Bootstrap e-commerce carousel for 'Bestsellers/Featured Items' GeekProbin & colorlib
Scroll fade in animation for 'Mission' section Nucleio Tech
Underline animation for 'Our Mission' section Youtube
Scroll to top button & hide/show button devdevshow
Change color of checkbox using 'accent' CodeProject

Media

Freepik for images used within the site
Pexels for images used within the site
Unsplash for images used within the site
Flaticon for icons used in wireframing and on the website
Chat GPT was used to produce the content text for the Articles section prompted by myself with several talk points about climate change and current eco-issues.

Image credits are as follows:

Additional reading/tutorials/books/blogs

Python Crash Course, Author: Eric Matthes, Publisher: No Starch Press, Year: 2019 Edition.
Geeks for Geeks for additional Python learning.

Acknowledgements

A huge thanks to my family for their continued support during this project and Diploma and the many, many cups of coffee sent my way.
Much gratitude is extended to my mentor Rahul Lakhanpal for his expert guidance and advice during this Diploma, which gave me the confidence to make the most out of every project.
Thank you to my fellow students and Code Institute alumni for their guidance and support.

Name		Name	Last commit message	Last commit date
Latest commit History 328 Commits
.devcontainer		.devcontainer
article		article
bag		bag
checkout		checkout
docs		docs
everneed		everneed
home		home
media		media
products		products
profiles		profiles
static		static
templates		templates
wishlist		wishlist
.gitignore		.gitignore
.gitpod.yml		.gitpod.yml
Procfile		Procfile
README.md		README.md
TESTING.md		TESTING.md
custom_storages.py		custom_storages.py
db.sqlite3		db.sqlite3
manage.py		manage.py
products_data.json		products_data.json
requirements.txt		requirements.txt
robots.txt		robots.txt
sitemap.xml		sitemap.xml

Folders and files

Latest commit

History

Repository files navigation

everneed

Introduction

Table of Contents

Overview

Customer Goals

Business Goals

UX/UI - User Experience/User Interface

Design Inspiration

Color Scheme

Typography & Iconography

Project Planning

Strategy Plane

Carbon Footprint Planning

Site Goals

Agile Methodologies

MoSCoW Prioritization

Sprints

Marketing

User Stories

Visitor User Stories

Epic - Home View & User Account

Epic - Products

Epic - Basket Management & Purchasing

Epic - Wishlist

Epic - Newsletter

Scope Plane

Structural Plane

Skeleton & Surface Planes

Wireframes

Database Schema

Defensive Design

Features

User View - Guests/Account Holders

CRUD Functionality

Features Showcase

Future Features

Technologies & Languages Used

Libraries & Frameworks

Tools & Programs

Testing

Deployment

Connecting to GitHub

Django Project SetUp

Elephant SQL

Heroku Deployment

Google Mail Setup

AWS Config

AWS - IAM setup

Media Folder Setup

Django AWS Connect

Stripe Config

Clone Project

Fork Project

Credits

Code

Media

Additional reading/tutorials/books/blogs

Acknowledgements

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages