FreshlyRooted Market

Deployed Link

Contents

FreshlyRooted Market
- Deployed Link
Contents

Agile Methodology

Overview

Agile methodology is a project management approach centered on adaptability, collaboration, and consistent progress toward well-defined goals. It’s particularly effective in software development, where requirements and solutions evolve through the combined efforts of self-organizing, cross-functional teams. Agile emphasizes delivering frequent, incremental updates that improve quality and enable rapid response to changing needs.

Back to Top 🔝

MoSCoW Prioritization

The MoSCoW prioritization technique is a framework used to evaluate the importance of various project features and tasks. It organizes items into four categories: Must Have, Should Have, Could Have, and Won't Have. This method supports efficient time management by ensuring that the most critical features are prioritized and completed before others.

Back to Top 🔝

GitHub Projects

GitHub Projects offers a structured approach to task management and progress tracking through project boards. Each board represents an EPIC, with columns reflecting task statuses like To Do, In Progress, On Hold, Done, and Bugs. Tasks are systematically organized using labels to indicate the assigned user, priority level, and associated sprint, enabling efficient team collaboration and streamlined project oversight.

Link to Kanban Board

Back to Top 🔝

EPICS

An Epic is a large segment of work broken down into smaller user stories. In this project, each Epic represents a significant component of the platform's development, ensuring all necessary functionalities are fully covered.

Back to Top 🔝

User Stories

This project aims to create a robust, user-friendly platform that caters to both visitors and registered users, prioritizing a seamless experience. The platform will facilitate content creation and management, showcase developer profiles, and enable interactive opportunities. The following user stories capture the core functionalities and their purpose, guiding the development toward a user-centered solution.

Back to Top 🔝

Developer Stories

#11 - As a developer, I want to create layouts so that I can visually represent the view and structure of the application.
#12 - As a developer, I want to adopt Agile methodology so that I can deliver a high-quality product that aligns with user needs.
#13 - As a developer, I want to be able to create visually engaging and responsive designs so that users can easily navigate the website and access relevant information.
#14 - As a developer, I want to be able to design an efficient database schema so than I can store and manage platform content, ensuring optimal performance, scalability, and flexibility.
#15 - As a developer, I want to be able to set up and configure Django so that I can create a functioning application.
#16 - As a developer, I want to be able to deploy the Django app to Heroku so that I can verify the initial setup is functional.
#17 - As a developer, I want to be able to deploy the Django app to Heroku so that I can verify the initial setup is functional.
#59 - As a Developer, I want to be able to improve the website's search engine optimization (SEO) so that it ranks higher in search engine results and attracts more organic traffic.
#61 - As a Developer, I want the platform to load quickly and respond quickly to user interactions so that users can **ensure a flawless experience **.
#65 - As a Developer, I want to be able to improve the website's search engine optimization (SEO) so that it ranks higher in search engine results and attracts more organic traffic.
#66 - As a Developer, I strive to maintain thorough documentation so that I can facilitate seamless future code maintenance.
#67 - As a Developer, I want to be able to deploy the application to Heroku so that it is accessible to users online.
#68 - As a Developer, I want to ensure that the application meets performance and accessibility standards so that it provides a seamless experience for all users and performs optimally.
#69 - As a Developer, I want to ensure that user stories are thoroughly tested so that they meet acceptance criteria and deliver the expected functionality.

Back to Top 🔝

Shopper Stories

#18 - As a Shopper, I want to be able to * view a list of products* so that I can select some to purchase.
#19 - As a Shopper, I want to be able to * view a specific category of products* so that I can quickly find products I’m interested in.
#20 - As a Shopper, I want to be able to * view individual product details* so that I can **identify the price, description, rating, image, and available sizes **.
#21 - As a Shopper, I want to be able to * quickly identify deals, clearance items, and special offers* so that I can take advantage of savings.
#22 - As a Shopper, I want to be able to * easily view the total of my purchases at any time* so that I can avoid overspending.
#23 - As a Shopper, I want to be able to * view related products or suggestions for each product I view* so that I can discover similar items.
#30 - As a Shopper, I want to be able to * sort products to easily* so that I can identify the best-rated, best-priced, and category-specific items.
#31 - As a Shopper, I want to be able to * sort a specific category of products* so that I can to quickly find the best-rated or best-priced items.
#32 - As a Shopper, I want to be able to * sort multiple categories simultaneously* so that i can see the best-rated or best-priced items across broader categories.
#33 - As a Shopper, I want to be able to * search for products by name or description* so that I can find a specific item easily.
#34 - As a Shopper, I want to be able to * see my search term and the number of results* so thant I can know if the product I want is available.
#35 - As a Shopper, I want to be able to * filter products based on price range and availability* so that I can **find items within my budget that are in stock **.
#70 - As a Shopper, I want to select the size and quantity when purchasing so that I can ensure accuracy.
#71 - As a Shopper, I want to be able to * view items in my shopping bag* so that I can confirm total cost and contents.
#72 - As a Shopper, I want to be able to * adjust the quantity of items in my bag easily before checkout* so that I can add or delete from my bag.
#73 - As a Shopper, I want to be able to * enter payment information quickly* so that I can check out without hassle.
#74 - As a Shopper, I want to be able to * feel my personal and payment information is safe and secure* so that I can add my personal information securely.
#75 - As a Shopper, I want to be able to * view order confirmation after checkout* so that I can verify my order before purchase.
#36 - As a Shopper, I want to be able to have an option to apply promotional codes during checkout so that I can avail discounts.
#37 - As a Shopper, I want to be able to * see an estimated delivery date before completing the purchase* so that I know when to expect my order.
#43 - As a Shopper, I want to be able to * access customer support or live chat* so that I can quickly resolve any issues with my purchase or account.
#44 - As a Shopper, I want to be able to * receive push notifications for order status updates* so that I can stay informed about my delivery.
#45 - As a Shopper, I want to be able to * receive emails for special offers, new product arrivals, and upcoming sales* so that I can stay updated on promotions.
#46 - As a Shopper, I want to be able to * receive an email notification if there is an issue with my order* so that I can be informed immediately.
#47 - As a Shopper, I want to be able to * see seasonal promotions on the homepage* so that I can take advantage of timely discounts.
#48 - As a Shopper, I want to be able to * apply discount codes during checkout* so that I can receive discounts on my purchases.
#49 - As a Shopper, I want to be able to * notified of limited-time discounts* so that I don’t miss out on sales.
#51 - As a Shopper, I want to be able to * see the discounted price clearly on each product listing* so that I can know the exact savings.
#53 - As a Shopper, I want to be able to * mark items as "Favorites" on the product listing page* so that I can easily save them for later.
#54 - As a Shopper, I want to be able to * add items to my favorites from the product detail page* so that I can save specific products after viewing them in detail.
#55 - As a Shopper, I want to be able to * access a Favorites page so that shows all of my saved items* so that I can view them in one place.
#56 - As a Shopper, I want to be able to * remove items from my favorites* so that I can manage the list and only keep items I’m interested in.
#57 - As a Shopper, I want my favorites list to be saved to my user account so that I can access it across multiple devices.
#79 - As a Shopper, I want to be able to * see a user-friendly 404 error page when a page is not found*, so that I understand the page doesn’t exist and can easily navigate back to the main site.
#80 - As a Shopper, I want to be able to * see a custom 403 error page if I attempt to access a restricted area* so that I understand why I cannot access the page and can be redirected to relevant areas.
#81 - As a Shopper, I want to be able to see a custom 500 error page when there is a server error so that I know the issue is on the site and not on my end, with steps on what to do next.

Back to Top 🔝

Site User Stories

#24 - As a Site User, I want to be able to easily register for an account so that I can have a personal account and view my profile.
#25 - As a Site User, I want to be able to easily log in or out so that I can access my personal account information.
#26 - As a Site User, I want to be able to easily recover my password if I forget it so that I can regain access to my account.
#27 - As a Site User, I want to be able to receive an email confirmation after registering so that I can verify my account registration.
#28 - As a Site User, I want to be able to a personalized profile where I can view my order history, confirmations, and save payment information.
#29 - As a Site User, I want to be able to update my account details like address, email, and phone number, so that I can keep my account information accurate.
#60 - As a Site User, I want to be able to subscribe to a newsletter so that I can **receive updates, promotions, and valuable content directly to my inbox **.
#62 - As a Site User, I want the accessibility features to be improved so that all users, including those with disabilities, have equal access and usability on the site.
#63 - As a Site User, I want to be able to see the visual elements across the platform to be uniform so that I can enjoy a cohesive and pleasant user interface experience.
#64 - As a Site User, I want to be able to navigate the platform smoothly so that I can intuitively locate relevant sections and features.

Back to Top 🔝

Store Owner Stories

#38 - As a Store Owner, I want to be able to add new products to the store so that I can keep my inventory updated.
#39 - As a Store Owner, I want to be able to edit/update products so that I can change prices, descriptions, or images.
#40 - As a Store Owner, I want to be able to delete products so that i can remove items no longer for sale.
#41 - As a Store Owner, I want to be able to view basic analytics (e.g., sales trends, popular products) so that I can make informed decisions.
#42 - As a Store Owner, I want to be able to manage user reviews and moderate inappropriate content so that I can maintain a professional and user-friendly store.
#50 - As a Store Owner, I want to be able to create and manage promotional codes so that I can offer discounts to attract customers.
#52 - As a Store Owner, I want to be able to manage the duration of each discount so that promotions are only active for specified times.

Back to Top 🔝

Website Goals and Objectives

Enhance User Experience:
- Design a user-friendly interface that is intuitive, visually appealing, and easy to navigate.
- Ensure the platform is fully responsive and accessible on all devices, including desktops, tablets, and smartphones.
Facilitate Developer Showcase:
- Enable registered users to create, edit, and manage posts and comments easily.
- Introduce features that promote user engagement, such as the ability to like, favorite, and share content.
Optimize Performance and Accessibility:
- Fine-tune the platform for fast loading times and quick responses to user actions.
- Adhere to accessibility standards to ensure an inclusive experience for all users.
Support Continuous Improvement and Scalability:
- Employ Agile development methodologies to deliver high-quality features and updates continuously.
- Architect the database and infrastructure to efficiently handle increased traffic and user growth.
Ensure Security and Reliability:
- Implement strong authentication and authorization protocols to protect user data.
- Conduct regular code validation and security testing to maintain a stable, secure application.
Streamline Payment and Checkout:
- Develop a smooth and secure payment process to enhance the checkout experience.
- Provide multiple payment options and ensure compliance with payment security standards.
Encourage Community Engagement and Feedback:
- Create channels for users to provide feedback, report issues, and suggest enhancements.
- Actively respond to user feedback and integrate improvements to continually refine the platform.

Back to Top 🔝

Target Audience

Our online healthy food grocery market is designed for individuals and families who prioritize wellness, sustainability, and the convenience of wholesome eating. Our target audience includes:

Health-Conscious Shoppers - People who seek nutrient-dense, organic, and minimally processed foods that support a balanced lifestyle, including those with dietary needs or preferences, such as gluten-free, vegan, or keto options.

Busy Professionals and Families - Those who value the convenience of having fresh, high-quality groceries delivered to their doorsteps, saving time on meal prep and grocery shopping without compromising on health.

Environmentally Minded Consumers - Shoppers committed to sustainable living who prefer locally sourced, eco-friendly packaged foods and are mindful of their environmental impact.

Fitness and Wellness Enthusiasts - Athletes, fitness enthusiasts, and individuals focused on nutrition who seek products that support an active lifestyle and contribute to peak physical performance.

Parents and Caregivers - Families looking for organic and clean foods to provide healthy meal options for children and loved ones, emphasizing nutrition, taste, and ingredient transparency.

Foodies Seeking Quality Ingredients - Home cooks and culinary enthusiasts who value premium ingredients and enjoy exploring fresh, unique, and high-quality foods to enhance their cooking experience.

Back to Top 🔝

Wireframes

The platform's wireframes offer a visual blueprint of the application's layout and structure, detailing the positioning of essential elements like navigation menus, user profiles, content sections, and interactive features. They serve as a foundation for creating a cohesive and user-friendly interface, guiding both the design and development stages. Following thorough testing, some adjustments were made, resulting in minor deviations from the initial wireframes in the live version of the platform to enhance usability and functionality.

Desktop warframes

Mobile warframes

Back to Top 🔝

Database Schema

The database schema outlines the structure and relationships between key tables for the platform.

This schema was generated using lucid.app.

Start database diagram

Finish database diagram

Back to Top 🔝

Design Choices

Typography

Overview Lato is a sans-serif typeface family designed by Warsaw-based designer Łukasz Dziedzic in 2010. The name "Lato" means " Summer" in Polish. Lato has become one of the most popular web fonts due to its excellent balance of professionalism and approachability, making it suitable for a wide range of design projects.

Back to Top 🔝

Colour Scheme

A site for inspiration

Back to Top 🔝

Images

Our visual content comes from two primary sources: Leonardo AI

All images generated through Leonardo AI are provided under permissive free licenses
These images can be legally used in commercial projects
No attribution requirements
Full compliance with copyright regulations Amazon
Product images sourced from Amazon's platform
Used for reference and demonstration purposes only
Non-commercial usage
No revenue generation from these images This combination of sources ensures legal compliance while maintaining high-quality visual content throughout our platform.

Back to Top 🔝

Responsiveness

My website is designed to be responsive, adapting smoothly to different screen sizes and device types. This is achieved through the use of CSS media queries with Bootstrap's breakpoints, ensuring an optimal user experience on all devices.

Breakpoint	Class	Dimensions
X-Small	None	< 576px
Small	sm	≥ 576px
Medium	md	≥ 768px
Large	lg	≥ 992px
Extra Large	xl	≥ 1200px
Extra extra Large	xxl	≥ 1400px

Back to Top 🔝

Security Measures and Protective Design

User Authentication

User authentication is a critical component of web applications, ensuring that users can securely access their accounts and data. It involves verifying the identity of a user through various means, such as passwords, tokens, or third-party services. Allauth is a popular Django package that simplifies the implementation of user authentication. It provides a comprehensive suite of features, including:

Social Authentication: Allows users to log in using their social media accounts, such as Facebook, Google, or Twitter.
Email Verification: Ensures that users verify their email addresses before gaining full access to the application.
Account Management: Offers tools for password reset, account confirmation, and user profile management. Allauth is highly customizable, making it easy to integrate with existing Django projects and tailor the authentication process to specific needs.

Back to Top 🔝

Password Management

Django Allauth is a versatile authentication library that not only handles user authentication but also provides comprehensive password management features. These features are designed to enhance security and improve user experience:

Password Reset: Allauth includes a built-in password reset mechanism. Users can request a password reset link, which is sent to their registered email address. This link allows them to securely set a new password.
Password Change: Authenticated users can change their passwords directly from their account settings. This feature ensures that users can update their credentials regularly to maintain security.
Password Strength Validation: Allauth can be configured to enforce password strength policies. This includes setting minimum length requirements and ensuring the use of a mix of characters to create strong passwords.
Email Verification: Before allowing password changes or resets, Allauth can require users to verify their email addresses. This adds an extra layer of security by ensuring that only legitimate users can modify their credentials.
Customizable Templates: Allauth provides customizable email templates for password reset and change notifications. This allows developers to tailor the communication to fit the branding and tone of their application. By leveraging these features, Django Allauth simplifies the implementation of secure and user-friendly password management in Django applications.

Back to Top 🔝

Form Validation

If incorrect or empty data is added to a form, the form won't submit, and a warning will appear to the user informing them which field raised the error.

Back to Top 🔝

Database Security

To enhance security and prevent unauthorized access, sensitive information such as the database URL and secret key is stored in an .env file. This approach ensures that these critical credentials are not exposed in the codebase, especially before pushing to GitHub. Additionally, Cross-Site Request Forgery (CSRF) tokens are implemented on all forms across the site. CSRF tokens are a crucial security measure that helps protect against malicious attempts to perform actions on behalf of authenticated users without their consent. By incorporating these practices, the application maintains a robust security posture, safeguarding both the database and user interactions

Back to Top 🔝

E-Commerce Business Model

Freshly Rooted Online Market operates as an e-commerce platform specializing in the sale of dairy, organic foods, meals, and all-natural products. The business model is crafted to deliver a seamless and personalized shopping experience, catering to health-conscious consumers and food enthusiasts.

Key components of the Freshly Rooted Online Market business model include:

Direct-to-Consumer Sales

Freshly Rooted offers a wide array of natural and organic products directly to customers, eliminating the need for intermediaries. This approach allows for competitive pricing, improved profit margins, and a tailored shopping experience.

Diverse Product Range

The market stocks an extensive selection of products, including fresh dairy, organic fruits and vegetables, ready-to-eat meals, and a variety of all-natural pantry staples. Additionally, it offers eco-friendly household items and wellness products to complement a healthy lifestyle.

Digital Marketing and SEO

Freshly Rooted employs a range of digital marketing strategies, such as search engine optimization (SEO), content marketing, social media engagement, and targeted email campaigns, to attract and retain customers while enhancing online visibility.

Logistics and Fulfillment

The business prioritizes efficient inventory management, order processing, and delivery logistics to ensure timely and reliable shipping. Strategic partnerships with local and national delivery services help maintain a smooth fulfilment process.

Customer Engagement and Retention

Freshly Rooted fosters a community of health-conscious consumers by offering personalized product recommendations, exclusive recipes, nutritional tips, and a loyalty program. These efforts aim to build long-term customer relationships and encourage repeat purchases.

This business model enables Freshly Rooted Online Market to reach a wide audience, minimize overhead costs, and provide a convenient, enjoyable shopping experience for customers seeking high-quality, natural products.

Back to Top 🔝

Marketing Strategies

Search Engine Optimisation

To enhance Freshly Rooted Online Market's visibility and ranking on Google, a comprehensive SEO strategy was developed using QuestionDB to identify relevant keywords for meta tags, alt texts, and content elements.

Based on this research, a mix of short and long-tail keywords were selected to target both specific and broad search queries:

organic food online
buy natural products
best organic market
fresh dairy delivery
all-natural meals
organic fruits and vegetables
eco-friendly household items
wellness products online
healthy meal kits
natural product store

These keywords are strategically integrated into the website's content to enhance search engine visibility and attract a diverse audience of health-conscious consumers and food enthusiasts.

Back to Top 🔝

SEO Strategies

To optimize Freshly Rooted Online Market's website for search engines, several strategies are employed to enhance visibility and improve ranking on Google:

Effective Use of Headings:

Utilize for the market title in the header/navigation, and strategically place <h1> tags with relevant keywords to enhance keyword prominence.
Incorporate <h2> tags for promotional keywords to improve search relevance.

Keyword Emphasis:

Use the <strong> HTML element to highlight important short and long-tail keywords throughout the content. This not only provides visual emphasis but also signals their semantic importance to search engines.

Image Optimization:

Apply keyword-rich and descriptive alt texts and filenames to all images, ensuring they are relevant to the content and improve searchability.

Optimize External Links:

Add the rel="noopener nofollow" attribute to social media and external links, which prevents search engines from considering these links when evaluating the site's ranking.

Sitemap Inclusion:

Generate and include a sitemap.xml file to guide search engine crawlers in indexing the site effectively.

Control Search Engine Crawling:

Use a robots.txt file to manage and control the behavior of search engine bots while they crawl the site.

Template Blocks for Meta Descriptions:

Using {% block metadesc %} in Django templates is a good practice for maintaining a clean, organized, and SEO-friendly codebase. It balances flexibility and maintainability while providing a good structure for dynamic content.

These strategies will be continuously refined and improved over time, aiming to increase the market's ranking on Google and attract more organic traffic to the website.

Back to Top 🔝

Social Media

Freshly Rooted Online Market will leverage Facebook as a primary platform for engaging with its audience and promoting its range of organic and natural products. The strategy includes the following key components:

Content Sharing:

Post a variety of content, including product highlights, new arrivals, promotions, health tips, and behind-the-scenes looks at Freshly Rooted. This keeps the audience informed and engaged.

Community Engagement:

Foster a sense of community by encouraging interactions through comments, likes, and shares. Respond promptly to customer inquiries and feedback to build relationships and trust.

Promotional Campaigns:

Run targeted ad campaigns to reach potential customers based on their interests, demographics, and browsing behavior. Highlight special offers, product bundles, and exclusive events to drive traffic to the website.

Events and Announcements:

Use Facebook Events to promote special promotions, product launches, and other events. Keep followers updated on important announcements and market news.

User-Generated Content:

Encourage customers to share their experiences, reviews, and photos with Freshly Rooted products. Feature user-generated content to build credibility and create a more personal connection with the audience.

Analytics and Insights:

Monitor Facebook Insights to track the performance of posts, ads, and overall engagement. Use this data to refine the strategy, optimize content, and improve outreach efforts.

Newsletter Marketing

Freshly Rooted Online Market will use Mailchimp to manage and send newsletters to keep subscribers updated and engaged. Here’s how it will work:

**Build Subscriber List

Collect email addresses through sign-up forms on the website and social media. Organize subscribers into groups for targeted messaging.

**Create Content

Design newsletters with product highlights, special offers, and market updates using Mailchimp’s easy-to-use templates.

**Schedule Newsletters

Plan regular newsletters (e.g., weekly or monthly) to keep customers informed and interested.

**Automate Emails

Set up automated emails to welcome new subscribers, thank customers after purchases, and send personalized product recommendations.

**Track Results

Monitor how newsletters perform with Mailchimp’s reports on open rates, clicks, and other key metrics. Use this information to improve future emails.

**Test and Personalize

Test different email elements to see what works best and personalize content based on subscriber preferences. Using Mailchimp helps Freshly Rooted Online Market stay connected with customers, promote new products and events, and drive traffic to the online store.

Back to Top 🔝

Features

Back to Top 🔝

Header

The header of the Freshly Rooted Online Market site is designed to be both functional and aesthetically pleasing. It showcases a vibrant logo and an intuitive navigation menu, with direct links to the shopping cart, wishlist, and account settings for seamless access, whether you're logged in or just exploring as a guest. Logged-in users benefit from a dropdown menu offering additional options such as order management, profile settings, and purchase history. The sleek design incorporates a green accent for interactive elements, ensuring excellent contrast and accessibility. Built with Bootstrap, the header adapts effortlessly to various screen sizes, providing a user-friendly experience on both mobile and desktop devices. Consistent use of icons and fonts throughout the site ensures a unified and polished appearance.

Back to Top 🔝

Footer

The footer of the Freshly Rooted Online Market website is thoughtfully divided into three sections to enhance user experience. The first section offers a warm welcome message, accompanied by icons for accepted payment methods and links to social media platforms, encouraging community engagement. The second section provides easy access to shop categories and policy information, allowing users to explore dairy, organic foods, meals, and all-natural products, as well as review important legal details. The final section invites users to subscribe to the newsletter, ensuring they receive the latest updates and special offers. The footer is designed to be both practical and inviting, concluding with a heartfelt message that emphasizes the brand's commitment to natural living and community connection.

Back to Top 🔝

Customer Information

The footer of the Freshly Rooted Online Market website includes essential links to "Shipping & Returns," "Privacy Policy," and "Terms of Service," providing users with crucial information about the site's policies. The Shipping & Returns page details the delivery process, including shipping fees and return policies for dairy, organic foods, meals, and all-natural products, ensuring customers understand how to manage their orders. The Privacy Policy explains how user data is collected, stored, and utilized, offering transparency and assurance regarding data protection practices. The Terms of Service page outlines the legal agreement between users and the site, establishing the rules and guidelines for using the website. Together, these pages offer a comprehensive understanding of the site's operations and user rights, fostering trust and clarity.

Back to Top 🔝

Contact

Back to Top 🔝

User Account Pages

The user account pages at Freshly Rooted Online Market are designed to provide a seamless and secure experience for managing user access, enhancing the overall user journey on the site.

Back to Top 🔝

Register Page

The Register page offers a straightforward and user-friendly form where users can create an account by entering their email, first name, last name, and password. The form is designed with responsiveness in mind, ensuring it is accessible and easy to use on any device. By focusing on a user-centric design, the Register page facilitates quick and hassle-free registration, encouraging new users to join the community and explore a world of dairy, organic foods, meals, and all-natural products.

After registration, users receive a message indicating that their email address needs to be verified, and a verification email is sent to them to complete the process.

Back to Top 🔝

Log In Page

The Log In page at Freshly Rooted Online Market provides a simple and secure method for existing users to access their accounts. It features clearly labeled fields for entering a username and password, along with a prominent login button to facilitate easy access. The design of the page aligns with the site's overall aesthetic, ensuring a cohesive and seamless user experience. Additionally, options for password recovery and account assistance are readily available, enhancing user convenience and support.

Back to Top 🔝

Logout Page

The Logout page at Freshly Rooted Online Market confirms a successful logout from the user's account. It features a concise message indicating that the user has been logged out, ensuring clarity and reassurance. The design is minimalistic, reinforcing the action taken and offering clear options to either continue exploring the site or log in again. This straightforward approach helps maintain a seamless user experience, even after logging out.

Back to Top 🔝

Profile Page

The user profile page at Freshly Rooted Online Market offers a personalized experience for logged-in users, featuring a sidebar with quick links to manage account information, view order history, access the wishlist, change the password, or delete the account. The main content area displays personal details and shipping information, with convenient options to edit both via modals. Users can update their first name and last name under personal details, as well as their phone number, address, and country under shipping information. The layout is clean and intuitive, making it easy for users to manage their profiles efficiently and effectively.

Back to Top 🔝

User Favorites

Back to Top 🔝

All Products

The All Products page at Freshly Rooted Online Market includes an advanced filtering system for searching products by categories such as dairy, organic foods, meals, and all-natural products. Users can refine their search using filters for product type, brand, and price range. Additionally, results can be sorted by name or price to help users find exactly what they need. Each product is displayed in a grid format, featuring images, titles, and pricing details. Users also have the option to add items to their wishlist or directly to the shopping cart, enhancing the shopping experience with convenience and efficiency.

Back to Top 🔝

Product Details

The Product Details page at Freshly Rooted Online Market provides comprehensive information about each item, ensuring users can make informed purchasing decisions. Users can easily adjust the quantity they wish to purchase and add the product to their shopping cart or favorites.

Back to Top 🔝

Shopping Cart

Back to Top 🔝

Checkout

The Checkout page at Freshly Rooted Online Market provides a comprehensive and secure platform for customers to finalize their purchases. It allows users to review their order in detail, including product specifics, pricing, delivery fees, and the total payment amount. Customers can input their delivery information and securely enter their payment details through Stripe, a trusted payment processing service.

The page offers a clear breakdown of costs, with the option to apply discount codes for additional savings. Users can also choose to save their delivery information for future purchases, streamlining the checkout process for subsequent orders. The page integrates with various tools to ensure a smooth and efficient checkout experience, and it is designed using Bootstrap to maintain a responsive layout and consistent styling across all devices. This thoughtful design ensures that customers can complete their transactions with ease and confidence.

Back to Top 🔝

Order Confirmation

The Order Confirmation page at Freshly Rooted Online Market is designed to thank the customer and provide a detailed summary of their order. It includes the following elements:

Thank You Message: A warm message expressing gratitude for the customer's purchase.
Order Number and Date: Clearly displayed for easy reference.
Itemized Order Details: A breakdown of the products purchased, including quantities and individual prices.
Delivery and Billing Addresses: Both addresses are shown to confirm the correct delivery and billing information.
Payment Information: Includes the order total, any discounts applied, delivery costs, and the grand total.
Continue Shopping Button: Encourages customers to explore more products and check out the latest offers, ensuring a smooth post-purchase experience. The page is designed to be user-friendly and informative, providing all necessary details in a clear and concise manner.

Back to Top 🔝

Custom Error Pages

400 Bad Request - The platform is unable to process this request.
403 Page Forbidden - It seems user trying to access restricted content. Please log out and sign in to the appropriate account.
404 Page Not Found - The page user is looking for doesn't exist.
500 Server Error - The platform is currently experiencing technical difficulties and cannot process this request.

Back to Top 🔝

Django Admin Portal

Django Admin Portal allows superuser to manage content and users of the website. The admin view is customized to reflect the scope of this project.

Back to Top 🔝

Future Features

Personalized Product Recommendations: Utilize customer browsing and purchase history to suggest products based on individual preferences. A recommendation engine can analyze user behavior to offer personalized suggestions for various categories like dairy, organic foods, and all-natural products.
Supplier Spotlight & Interviews: Feature weekly or monthly spotlights on suppliers, including interviews or Q&A sessions. This can be paired with product promotions or sales to drive engagement and educate customers about the origins of their food.
Gift Cards & Wishlist Sharing: Enable users to purchase digital gift cards and share their wishlists with friends and family. This feature would be especially popular during holiday seasons or special occasions.
Loyalty Program: Introduce a loyalty program where users earn points for purchases, writing reviews, or referring friends. Points can be redeemed for discounts or free products.
Subscription Boxes: Offer subscription boxes that deliver curated selections of products based on user preferences. These could be monthly or quarterly, including exclusive items or seasonal specialties.
Product Previews & Sample Tastes: Allow users to preview product details or receive sample tastes before purchasing, engaging potential buyers and encouraging them to complete the purchase.
Referral Program: Implement a referral program that rewards users for referring new customers. Offer discounts or points for successful referrals that lead to purchases.

Back to Top 🔝

Deployment

Back to Top 🔝

AWS Cloud Service

To integrate AWS, follow steps:

Create and Configure an S3 Bucket

Access AWS:
- Go to aws.amazon.com and log in to your AWS Management Console.
Create an S3 Bucket:
- Search for "S3" in the AWS Management Console and create a new bucket.
- Name the bucket to match your Heroku app name and select the region closest to your target audience.
Set Public Access and Ownership:
- Uncheck the "Block all public access" option and acknowledge that the bucket will be public (required for compatibility with Heroku).
- Under "Object Ownership," ensure "ACLs enabled" and "Bucket owner preferred" are selected.
Enable Static Website Hosting:
- In the "Properties" tab, enable static website hosting.
- Set index.html as the index document and error.html as the error document, then click "Save."

Configure CORS (Cross-Origin Resource Sharing):

In the "Permissions" tab, add the following CORS configuration:

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

Copy your bucket's ARN (Amazon Resource Name).

Add a Bucket Policy:
- Go to the "Bucket Policy" tab and click on the "Policy Generator" link.
- Configure the policy:
  - Policy Type: S3 Bucket Policy
  - Effect: Allow
  - Principal: *
  - Actions: s3:GetObject
  - ARN: Paste your bucket's ARN
- Click "Add Statement" and "Generate Policy."
- Copy the generated policy and paste it into the "Bucket Policy Editor":
```
{
  "Version": "2012-10-17",
  "Statement": [
       {
         "Effect": "Allow",
         "Principal": "*",
         "Action": "s3:GetObject",
         "Resource": "arn:aws:s3:::your-bucket-name/*"
     }
   ]
}
```

Ensure the Resource field ends with /* and click "Save."

Adjust Access Control List (ACL):
- In the "Access Control List" (ACL) section, click "Edit" and enable "List" for Everyone (public access). Accept the warning prompt.
- If the edit option is disabled, ensure the "Object Ownership" settings have ACLs enabled.

Back to Top 🔝

Configure IAM (Identity and Access Management)

Create a User Group:
- Navigate to the IAM service and select "User Groups."
- Click "Create New Group," and name it appropriately (e.g., ``).
Attach Policies to the Group:
- Select the newly created group and go to the "Permissions" tab.
- Click "Add Permissions" > "Attach Policies."
- In the "JSON" tab, click "Import Managed Policy" and search for AmazonS3FullAccess.
- Import the policy and modify it to limit access to your specific bucket:
```
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "s3:*",
      "Resource": [
        "arn:aws:s3:::your-bucket-name",
        "arn:aws:s3:::your-bucket-name/*"
      ]
    }
  ]
}
```

Click "Review Policy" and name it (e.g., your-policy), then click "Create Policy."

Add Users and Assign Permissions:
- Go back to "User Groups," select your group, and click "Attach Policy."
- Select your custom policy (e.g., your-policy) and attach it.
- Click "Add User" and name it appropriately (e.g., your-user-name).
- Select "Programmatic Access" and add the user to your group.
- Download the CSV file containing the AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY.

Back to Top 🔝

Final AWS Setup and Heroku Integration

Update Heroku Configurations:
- Remove DISABLE_COLLECTSTATIC from Heroku Config Vars to enable AWS management of static files.
Create Media Directory:
- Within your S3 bucket, create a new folder named media.
- Upload your media files into this folder and set "Public read access."
Security Reminder:
- Ensure all sensitive information (like AWS credentials) is securely stored and not hard-coded into your source code.

Back to Top 🔝

Stripe

Back to Top 🔝

Steps for Stripe Integration

Create a Stripe Account:
- Go to stripe.com and create an account. Log in to your Stripe dashboard.
Obtain API Keys:
- From your Stripe dashboard, locate the "API Keys" section under "Developers."
- Retrieve the following keys:
  - STRIPE_PUBLIC_KEY: Your Publishable Key (starts with pk)
  - STRIPE_SECRET_KEY: Your Secret Key (starts with sk)
- These keys will be used to authenticate your application with Stripe.
Configure Webhooks for Payment Events:
- To handle scenarios where a user may close the payment page prematurely, set up Stripe Webhooks to receive real-time payment updates.
- In your Stripe dashboard:
  - Navigate to "Developers" and select "Webhooks."
  - Click "Add Endpoint."
  - Enter your endpoint URL (e.g., ``).
  - Select "Receive all events" to capture all relevant payment events.
  - Click "Add Endpoint" to complete the process.
  - This will generate a new key:
  - STRIPE_WH_SECRET: Your Webhook Signing Secret (starts with wh).

Back to Top 🔝

Testing Stripe Payments

Test Mode:
- Stripe provides a test mode to simulate payment transactions.
- Use the following test card details for interactive testing:
  - Card Number: 4242 4242 4242 4242
  - Expiry Date: Any valid future date (e.g., 12/34)
  - CVC: Any three-digit number (or four digits for American Express)
  - Other Fields: Use any value for other fields.
Security Reminder:
- Ensure all Stripe API keys and Webhook Signing Secrets are stored securely, and never hard-code them in your source code.

Back to Top 🔝

GMAIL

Back to Top 🔝

Steps for Gmail Integration

Create and Access Gmail Account:
- Ensure you have an active Gmail (Google) account. Log in to your account.
Enable Two-Factor Authentication (2FA):
- Go to your Google Account by clicking on your profile icon in the top-right corner and selecting "Manage Your Google Account."
- Navigate to the Security tab on the left sidebar.
- Under the "Signing in to Google" section, enable 2-Step Verification. Follow the prompts to verify your password and activate 2FA.
Generate an App Password:
- After enabling 2FA, stay on the Security page and select App passwords.
- Re-enter your password if prompted.
- Choose Mail as the app type and select Other (Custom name) for the device type. Enter a relevant name ( e.g., "Your Django App").
- Click Generate to create a 16-character app password (API key). Note: This password will only be displayed once, so save it securely.
Configure Email Settings in Your Application:
- Update your application's email settings with the following credentials:
  - EMAIL_HOST_USER: Your Gmail address (e.g., your-email@gmail.com)
  - EMAIL_HOST_PASSWORD: The 16-character app password generated from Gmail.

Back to Top 🔝

Security and Compliance

Ensure that your Gmail credentials, especially the app password, are stored securely and not hard-coded in your source code. Consider using environment variables or a secure secrets manager for this purpose.

Back to Top 🔝

Deployment Process with Heroku

Navigate to the Heroku website and either log in to your existing account or sign up for a new account.
From the dashboard, click the "New" button in the upper right corner and select "Create new App" from the drop-down menu.
Provide a unique name for your application in the "App name" field.
- Heroku will indicate the name's availability with a green checkmark.
Select the appropriate region ("United States" or "Europe") from the "Choose a region" dropdown, based on your target user base.
Click the "Create app" button to proceed.
On the next screen, navigate to the "Settings" tab located at the top center of the page.
In the "Config Vars" section, click on the "Reveal config Vars" button to display the environment variable configuration interface.
Input the necessary environment variables typically stored in your local .env file. For this deployment, you will need to configure the following variables:

DEBUG = False
DEVELOPMENT = False
USE_STORAGE = True
USE_DATABASE = True
LANGUAGE_CODE = 'en-us'
SITE_ID = 1
DJANGO_SECRET_KEY = 'your-secret-key'
DATABASE_NAME = 'mydatabase'
DATABASE_USER = 'dbuser'
DATABASE_PASSWORD = 'password'
DATABASE_HOST = 'localhost'
DATABASE_PORT = '5432'
ALLOWED_HOSTS = ['example.com', 'localhost']
CSRF_TRUSTED_ORIGINS = ['https://example.com']
STRIPE_PUBLIC_KEY = 'your-stripe-public-key'
STRIPE_SECRET_KEY = 'your-stripe-secret-key'
STRIPE_WH_SECRET = 'your-stripe-webhook-secret'
AWS_STORAGE_BUCKET_NAME = 'your-bucket-name'
AWS_S3_REGION_NAME = 'us-west-2'
AWS_ACCESS_KEY_ID = 'your-access-key-id'
AWS_SECRET_ACCESS_KEY = 'your-secret-access-key'
EMAIL_HOST = 'smtp.example.com'
EMAIL_PORT = 587
EMAIL_HOST_USER = 'user@example.com'
EMAIL_HOST_PASSWORD = 'email-password'
DEFAULT_FROM_EMAIL = 'webmaster@localhost'

Enter each variable name in the "KEY" field and its corresponding value in the "VALUE" field.
Return to the top of the page and select the "Deploy" tab.
In the "Deployment method" section, choose "GitHub."
Under "Connect to GitHub," click the "Search" button, locate your project repository, and click "Connect."
Scroll down and click the "Deploy Branch" button to initiate the deployment.
Consider enabling the automatic deployment option to allow Heroku to deploy your app automatically with each push to the GitHub repository.
A build log will appear at the bottom of the screen. Upon successful deployment, a link to your application will be provided.

Important!: Ensure that your Heroku app URL is added to the ALLOWED_HOSTS setting in the settings.py file. Additionally, verify that the DEBUG setting is set to False, and the requirements.txt and Procfile are up to date and committed to GitHub.

Back to Top 🔝

To fork the project

Forking the GitHub repository allows you to create a duplicate of a local repository. This is done so that modifications to the copy can be performed without compromising the original repository.

Log in to GitHub.
Locate the repository.
Click to open it.
The fork button is located on the right side of the repository menu.
To copy the repository to your GitHub account, click the button.

Back to Top 🔝

To clone the project

Log in to GitHub.
Navigate to the main page of the repository and click Code.
Copy the URL for the repository.
Open your local IDE.
Change the current working directory to the location where you want the cloned directory.
Type git clone, and then paste the URL you copied earlier.
Press Enter to create your local clone.

Any changes required to the website, they can be made, committed and pushed to GitHub.

Back to Top 🔝

Testing

TESTING.md file.

Back to Top 🔝

Technology

Languages

Back to Top 🔝

Frameworks

Django: Django is the main Python framework used in the development of this project. It provides a robust and scalable architecture for building web applications.

Back to Top 🔝

Python Libraries

Django-allauth: Authentication library used to create user accounts, providing features such as registration, login, and social authentication.
Crispy Forms: Used to manage Django forms, making form rendering in templates simpler and more elegant.
Django Countries: Library used to provide country choices for use with forms and a country field for models.
Pillow: Used to add image processing capabilities.
Humanize: Used for turning a number into a fuzzy human-readable duration ("3 minutes ago")

dj-database-url - A package used to utilize DATABASE_URL environment variable.
django-countries - Django application used to provide country choices for use with forms, and a country field for models.
gunicorn - A Python WSGI HTTP Server for UNIX.
psycopg2 - A PostgreSQL database adapter.
boto3 - An Amazon Web Services (AWS) software development kit (SDK) used to connect to the S3 bucket
Black - A Python code formatter.
django storages - Collection of custom storage backends for Django.
stripe - A Python library for Stripe’s API.

Back to Top 🔝

Programs

Balsamiq - Wireframing tool used to generate wireframe images, allowing for quick and easy visualization of the application's layout and design.
Bootstrap - CSS framework used for developing responsiveness and styling, offering a wide range of pre-designed components and utilities.
Google Chrome Used for overall development and tweaking, including testing responsiveness, debugging, and performance profiling.
VSCode - Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.

Back to Top 🔝

Payment Service

Stripe was used to process all online payments transactions.

Cloud Storage

Amazon Web Service S3 was used to store all static and media files in production.

Back to Top 🔝

Credits

ABACUS.AI
Leonardo.AI
Amazon
CodePen
Automated Testing Tutorial
Django Documentation
Dev Community
Boostrap Docs
Dennis Ivy - Python Django 7 Hour Course
StackOverflow
Project Portfolio-4 channel on Slack
Django Forum
ChatGPT
CodeInstitute Boutique Ado project as boilerplate and good django manual.

Back to Top 🔝

Acknowledgements

I would also like to express my thanks to the Code Institute tutors who are always on hand to offer help and support.
I want to thank my tutor Marko Tot for his daily care and help. For the desire to create a favorable atmosphere for learning and creativity.
I would also like to thank the entire Code Institute and Kerry College for giving me the opportunity to study and participate in this project.
Finally, thanks to my fellow students on Slack as this is a valuable community for help and guidance.

Disclaimer

FreshlyRooted Market is dedicated to providing free, reliable information and resources to its community. This project is not driven by monetary profit, but rather by a commitment to share knowledge and support well-being. Every effort has been made to properly credit and reference all images, data, and materials used. Any photographs or other media have been obtained through free and accessible sources in accordance with usage agreements, ensuring that all content is responsibly sourced.

Back to Top 🔝

Name		Name	Last commit message	Last commit date
Latest commit History 343 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
about		about
app		app
blog		blog
cart		cart
checkout		checkout
docs		docs
favorites		favorites
home		home
media		media
products		products
profiles		profiles
static		static
templates		templates
templatetags		templatetags
.gitignore		.gitignore
.gitpod.dockerfile		.gitpod.dockerfile
Procfile		Procfile
README.md		README.md
TESTING.md		TESTING.md
custom_storages.py		custom_storages.py
env.example		env.example
manage.py		manage.py
requirements.txt		requirements.txt
robots.txt		robots.txt
sitemap.xml		sitemap.xml

barkode/FreshlyRooted-grocery-market-ci

Folders and files

Latest commit

History

Repository files navigation

FreshlyRooted Market

Deployed Link

Contents

Agile Methodology

Overview

MoSCoW Prioritization

GitHub Projects

EPICS

User Stories

Developer Stories

Shopper Stories

Site User Stories

Store Owner Stories

Website Goals and Objectives

Target Audience

Wireframes

Database Schema

Design Choices

Typography

Colour Scheme

Images

Responsiveness

Security Measures and Protective Design

User Authentication

Password Management

Form Validation

Database Security

E-Commerce Business Model

Marketing Strategies

Search Engine Optimisation

SEO Strategies

Social Media

Newsletter Marketing

Features

Header

Footer

Customer Information

Contact

User Account Pages

Register Page

Log In Page

Logout Page

Profile Page

User Favorites

All Products

Product Details

Shopping Cart

Checkout

Order Confirmation

Custom Error Pages

Django Admin Portal

Future Features

Deployment

AWS Cloud Service

Create and Configure an S3 Bucket

Configure IAM (Identity and Access Management)

Final AWS Setup and Heroku Integration

Stripe

Steps for Stripe Integration

Testing Stripe Payments

GMAIL

Steps for Gmail Integration

Security and Compliance

Deployment Process with Heroku

To fork the project

To clone the project

Testing

Technology

Languages

Frameworks

Python Libraries

Programs

Payment Service

Cloud Storage

Credits