The BlissBowl Website represents a comprehensive full-stack application skillfully developed with a blend of HTML, CSS, JavaScript, Python, Django, Stripe, and Bootstrap technologies. This dynamic platform is designed to function as a delivery service, showcasing an extensive array of food bowls categorized to cater to diverse culinary preferences. Users can explore a wide range of delectable options, each thoughtfully curated and presented through an intuitive and user-friendly interface.
View the live project here
- UX
- UI
- ERD (Entity-Relationship Diagram)
- Features
- Technologies Used
- Ecommerce Business Model
- Search Engine Optimization (SEO) & Social Media Marketing
- Deployment
- Credits
- Acknowledgements
- Busy professionals who want easy and tasty meals.
- Students looking for quick and diverse dining options.
- Families seeking hassle-free and nutritious meal choices.
- Health-conscious individuals interested in balanced and customizable food bowls.
-
User-Friendly Interface:
- Develop an intuitive and visually appealing interface for seamless navigation.
-
Diverse Food Bowl Menu:
- Curate an extensive menu with varied options, including vegetarian and protein-rich choices.
-
Secure Online Transactions:
- Implement a secure payment processing system using the Stripe platform for reliable and safe online transactions.
-
Responsive Design:
- Ensure a responsive design that adapts to various devices for enhanced accessibility.
-
Feedback and Reviews:
- Implement a feedback and review system to gather user opinions and improve overall service.
"As a visitor, I can sign up for an account so that I can access personalized features"
"As a visitor I can navigate easily through the website using a header and footer so that I can have a seamless browsing experience"
"As a user I can see a home page with featured products, categories, comments and newsletter so that I can discover new and exciting items"
"As a registered user, I can log in to my account so that I can access my profile"
"As a logged-in user I can log out of my account so that I can end my session."
"As a user I can reset my password in case I forget it so that I can regain access to my account"
"As a registered user I can have a profile page with sections for personal information, order history, and a favorites list so that I can manage my account effectively"
"As a registered user I can update my personal information on my profile so that my account details are always accurate"
"As a registered user I can maintain a list of favorite products so that I can easily access and track items I'm interested in"
"As a registered user I can view my order history so that I can track and review my past purchases"
"As a user I can fill out the contact form and send a message so that I can communicate with the site administrators"
"As a user I can subscribe to the newsletter so that I can receive updates and promotions"
"As a user I can leave comments under a certain product so that I can share my thoughts about a particular products"
"As a user I can access and review the privacy policy of the website so that I can understand how my personal information is handled"
"As a shopper I can search for a product by name or description easily so that I can find specific items quickly"
"As a shopper I can view a list of products and product details so that I can make a purchase"
"As a shopper I can view product categories so that I can explore items based on my preferences"
"As a shopper I can easily select the quantity of a product when purchasing it so that I can control my order details"
"As a shopper, I can add items to cart, view items in my cart and adjust the quantity before checkout so that I can review and modify my order"
"As a shopper I can see the total price for the items and enter payment information securely during checkout so that I can make a purchase"
"As a shopper I can view an order confirmation after completing the checkout process so that I can have a summary of my purchase"
"As a shopper I can receive an email confirmation after checking out so that I have a record of my purchase"
"As a site admin I can add products to the catalog so that I can expand and update the product offerings"
"As a site admin I can edit/update existing products on the webiste so that I can keep product information accurate"
"As a site admin I can delete products from the catalog so that I can manage the product offerings effectively"
"As a site admin I can make the website SEO-optimized so that it ranks higher in search engine results"
"As a site admin I can implement Facebook marketing strategies so that the website gains visibility and attracts more users"
For this project I used Agile methodology. Agile methodology is a project management approach that prioritizes cross-functional collaboration and continuous improvement. It divides projects into smaller phases and guides teams through cycles of planning, execution, and evaluation.
Kanban Board
This a visual representation of my Kanban Board during the project. In addition to three essential columns, I created a column "Product Backlog" for the user stories that I wasn't able to implement. My process was divided into 8 Design (Milestones). Once the iteration is done, all of the user stories from that iteration were going to "Done" column. If any of the user stories from a particular iteration weren't implemented, they were going back to the Product Backlog.
Iterations
I had 8 Iterations overall, each iteration had 3-5 issues.
EPIC 1 - General Functionality
EPIC 2 - Products and Categories
EPIC 3 - Shopping Cart and Checkout
EPIC 4 - Authentication
EPIC 5 - User Profile
EPIC 6 - Admin Functionality
EPIC 7 - SEO & Marketing
The Password Reset feature remains pending as the only unimplemented user story. It has been added to Product Backlog for future development.
Sign Up
Sign In
Log Out
Home
Products
Product Detail
Cart
Checkout
Checkout Success
Profile
Profile (empty)
Product Management 1
Product Management 2
Contact Us
Sign Up
Sign In
Log Out
Home
Products
Product Detail
Cart
Checkout
Checkout Success
Profile (Info)
Profile (Order History)
Profile (Favourites)
Product Management (Add Product)
Product Management (Edit Product)
Contact Us
I picked these colors for the food bowl website to make it look appealing and match the vibe of the delicious meals featured. The chosen colors aim to create a fresh and vibrant feel that suits the type of food on the site. I thought about what users would like and tried to make the website visually attractive, so it feels inviting and enjoyable as they explore the different offerings
Playball:
Playball is a font that looks like elegant handwriting. It gives a friendly and personal feel, which is great for making your food bowl website feel welcoming and like it's filled with handmade goodness.
Plus Jakarta Sans:
Plus Jakarta Sans is a clean and modern font without fancy decorations. It helps people easily read and understand your website. It comes in different thickness levels (400, 500, 600), so you can use it for different parts of your site to make things stand out or look more important.
- Order and OrderLineItem:
One Order can have multiple OrderLineItems. One OrderLineItem is associated with one Order.
- Product and OrderLineItem:
One Product can be associated with multiple OrderLineItems. One OrderLineItem is associated with one Product.
- User and UserProfile:
One User has one UserProfile. (On ERD it is shown as a OnetoMany relationship which is a mistake ) UserProfile is linked to the User.
- User and FavouriteBowls:
One User has one FavouriteBowls. FavouriteBowls is linked to the User.
- FavouriteBowls and Product:
One FavouriteBowls can have multiple Products. One Product can be associated with multiple FavouriteBowls.
Header
Provides easy navigation, allowing users to quickly access different sections of the website, enhancing the overall user experience.
Footer
Serves as a comprehensive information hub, including links to home page, products, contact details, and privacy policy, enhancing website usability.
Search
Enables users to find specific food items or categories quickly, saving time and offering a more personalized browsing experience.
About Us section
Builds trust and connection with users by providing background information about the website.
Testimonials section
Builds credibility and trust as users can read about positive experiences from other customers, influencing their decision-making process positively.
Categories
Organizes products into logical groups, making it easier for users to browse and find items of interest without feeling overwhelmed.
Products
Showcases the variety of food bowls available, allowing users to explore and choose meals that suit their preferences and dietary needs.
Product Detail
Provides in-depth information about each food bowl, including image, name, weight, calories, preparation time, description, quantity input, and pricing, helping users make informed decisions.
Add Product (Admin)
Admins can input detailed information such as product name, description, images, pricing, and nutritional details. The addition of products ensures that the website's catalog remains dynamic and up-to-date, offering users a diverse and fresh selection.
Edit Product (Admin)
This feature allows administrators to modify existing product information, including updating images, adjusting pricing, refining descriptions, or editing nutritional details. The ability to edit ensures that product listings accurately reflect any changes in pricing, or specifications.
Edit | Delete (Admin)
Admins can remove products from the website's catalog when they are no longer available or relevant.
Profile (Delivery Info)
Allows users to save delivery preferences, streamlining the checkout process and providing a more personalized and convenient experience.
Profile (Order History)
Enables users to track their previous orders, facilitating reordering of favorite items and providing a historical overview of their purchasing behavior.
Profile (Favourites)
Allows users to mark and save their favorite food bowls, creating a personalized list for quicker decision-making during future visits.
Toast (Error)
Toast (Success)
Toast (Warning)
Toast (Info)
Provides real-time feedback on user actions, enhancing the overall user experience and keeping users informed about the status of their interactions.
Sign Up
This feature allows new users to create an account on the food bowl delivery website.
Sign In
The log-in functionality enables registered users to access their accounts by entering their email address or username and a corresponding password.
Log Out
The log-out feature allows users to securely end their current session on the website.
Email Verification
Verifying user email addresses adds an extra layer of security to the platform, ensuring that only legitimate users with valid email accounts can access and utilize the website's features.
Email Verification (Message)
Sending an email verification message serves to validate users, confirming the authenticity of their provided email addresses.
Comments
Fosters user engagement and community by allowing customers to leave feedback, share experiences, and provide valuable insights.
Contact
Offers a direct communication channel, allowing users to reach out with inquiries, feedback, or issues, promoting customer satisfaction and trust.
Shopping Cart
Allows users to gather their chosen items in one place, making it easy to review and finalize their selections before completing the purchase.
Checkout
Streamlines the purchasing process, guiding users through the necessary steps to secure their order efficiently. This involves providing delivery information, selecting payment options, and confirming their purchase.
Order Confirmation
Provides users with immediate assurance that their order was successfully placed and is being processed.
Order Confirmation Email
Ensures users receive a confirmation of their order, providing reassurance and serving as a reference for order details.
- Remove products from Favourites option:
- Create better UX for the user
- Password Reset (to seamlessly rest forgotten password)
- FAQ Section:
- Include a frequently asked questions section to address common customer queries.
- Filter Options:
- Allow users to filter products based on dietary restrictions.
- Order Tracking:
- Implement order tracking so users can monitor the status of their deliveries.
- Promotions and Discounts:
- Introduce promotional campaigns, discounts, or loyalty programs to attract and retain customers.
- Figma was used to create the final design of a website.
- Font Awesome was used for social media icons in the footer.
- Iconify was used for menu icon in the header.
- Favicon was used for favicon.
- LucidChart was used for creating ERD.
- Google Fonts was used to add specific font family to the stylesheet.
- Adobe Color was used to create a colour palette.
- VSCode was used to code the website.
- Bootstrap was used for styling certain elements on the page.
- W3C validation was used to check the markup validity of html file.
- Jigsaw was used to check the validity of css file.
- JSHint was used to check the validity of js files.
- CI Python Linter was used to check the validity of python files.
- Am I Responsive was used to get a screenshot of a final look of the website on various devices.
- Github was used to store the code of the website.
- Django used as the Python framework for the site.
- PostgreSQL used as the relational database management.
- ElephantSQL used as the Postgres database.
- Heroku used for hosting the deployed site.
- Stripe used for online secure payments.
- Cloudinary used for online static file storage.
- Pillow used for image processing
- Gunicorn used for WSGI server
- psycopg2 used as a PostgreSQL database adapter
- Privacy Policy Generator was used to generate a privacy policy.
- Chrome DevTools was used to check the responsiveness of the website as well as to debug it.
- Chrome's Developer Tool Lighthouse was used to check the performance of the website.
Our food bowl website operates on a Business-to-Customer (B2C) model, focusing on individual transactions without the need for subscriptions. In its early development stages, the site already features a newsletter and links for social media marketing.
Through social media, we aim to cultivate a community of users, leveraging larger platforms like Facebook to boost site visitor numbers. The newsletter serves as a direct communication channel, allowing us to share updates on special offers, new stock, changes to business hours, and notifications of upcoming events. As our website evolves, these features contribute to a user-friendly and engaging experience for our customers.
I picked out some words that match my website, so when people look online, they can easily find my page through a search engine. I chose both short and long phrases. I also tried out Word Tracker to see how often people use the main words on my site, but only during the free trial.
I've used XML-Sitemaps to generate a sitemap.xml file with the link to my deployed website https://blissbowl-375a7f20caf7.herokuapp.com/
I've generated the robots.txt file located at the root directory, incorporating the default configurations within.
User-agent: *
Disallow:
Sitemap: https://retro-reboot.herokuapp.com/sitemap.xml
Further links for future implementation:
- Google search console
- Creating and submitting a sitemap
- Managing your sitemaps and using sitemaps reports
- Testing the robots.txt file
Establishing a robust social media presence, characterized by active engagement, and seamlessly connecting it to your business website can significantly boost sales. Opting for widely used platforms with an extensive user community, like Facebook, often results in maximizing website visibility.
I integrated a newsletter feature on the website, allowing users to sign up using their email addresses. To prevent duplicate sign-ups, I ensured the email addresses are unique, and if a user attempts to sign up again, a message informs them that they're already subscribed.
def newsletter(request):
""" Signup to newsletter """
if request.method == 'POST':
form = NewsletterForm(request.POST)
if form.is_valid():
email = form.cleaned_data['email']
# Check if the email is not already subscribed
if not Newsletter.objects.filter(email=email).exists():
# Save the email to the database
newsletter = Newsletter(email=email)
newsletter.save()
# Send confirmation email
send_confirmation_email(email)
messages.success(request, 'You have successfully subscribed to our newsletter!')
else:
messages.error(request, 'This email is already subscribed to our newsletter.')
return redirect(request.META.get('HTTP_REFERER', '/'))
else:
form = NewsletterForm()
return render(request, 'homepage/index.html', {'form': form})
def send_confirmation_email(email):
"""Send newsletter signup confirmation email"""
subject = render_to_string(
'newsletter/welcome_newsletter_subject.txt')
message = render_to_string('newsletter/welcome_newsletter_body.txt', {'email': email})
send_mail(subject, message, settings.DEFAULT_FROM_EMAIL, [email])Upon successful subscription, users receive a welcome email triggered by the send_mail() functionality in the views.py file. This email serves as a confirmation of their successful newsletter registration.
All the information on testing is in TESTING.md
- Navitate to ElephantSQL website, log in to your account
- Click “Create New Instance”.
- Enter database name, leave plan field as it is. You can leave the Tags field blank.
- Select region, click on "Review".
- Check that your details are correct. Then click “Create instance”
- Return to the ElephantSQL dashboard and click on the database instance name for this project.
- Copy your ElephantSQL database URL using the Copy.
- Paste this URL into env.py file as DATABASE_URL value and save the file.
os.environ["DATABASE_URL"] = "postgres://yourdatabaseURL"
You need to include you Django secret key that you can generate using any of the Django secret keys generators online. In order to protect django app secret key it was set as an enviroment variable and stored in env.py.
os.environ["SECRET_KEY"] = "yourSecretKey"
- Navigate to https://cloudinary.com/ and log in to your account.
- Navigate to dashboard/console https://console.cloudinary.com/console/ copy API Enviroment variable starting with "cloudinary://".
- Paste copied url into env.py file as CLOUDINARY_URL value and save the file.
os.environ["CLOUDINARY_URL"] = "cloudinary://yourAPIEnviromentvariable"
- Add it to your CONFIG VARS on Heroku as well.
This project integrates with Stripe for handling ecommerce payments.
Once your Stripe account is set up and you're logged in, follow these steps to connect your project:
- In your Stripe dashboard, expand the "Get your test API keys" section.
- You'll find two keys:
STRIPE_PUBLIC_KEY= Publishable Key (starts with pk)STRIPE_SECRET_KEY= Secret Key (starts with sk)
As a precaution for users who might close the purchase-order page prematurely during payment, we can implement Stripe Webhooks.
- In your Stripe dashboard, navigate to Developers, and choose Webhooks.
- Click Add Endpoint.
- Endpoint URL:
https://blissbowl-375a7f20caf7.herokuapp.com/checkout/wh/
- Endpoint URL:
- Select receive all events.
- Click Add Endpoint to complete the setup.
- You'll receive a new key:
STRIPE_WH_SECRET= Signing Secret (Webhook) Key (starts with wh)
Once you've set up your Gmail (Google) account and logged in, follow these steps to connect your project:
- Click on the Account Settings (cog icon) located in the top-right corner of your Gmail.
- Navigate to the Accounts and Import tab.
- In the "Change account settings" section, click on the link for Other Google Account settings.
- On the new page, choose Security from the left menu.
- Enable 2-Step Verification (verify your password and account).
- Once verified, click Turn On for 2FA.
- Return to the Security page, where you'll find a new option called App passwords.
- Confirm your password and account if prompted.
- Select Mail as the app type.
- Choose Other (Custom name) for the device type, and provide any custom name like "Django" or "retro-reboot."
- You'll be given a 16-character password (API key).
- Save this locally, as you won't be able to retrieve it later!
- Set
EMAIL_HOST_PASSas the user's 16-character API key. - Set
EMAIL_HOST_USERas the user's personal Gmail email address.
- Log in to Heroku or create an account.
- Navigate to your Heroku dashboard, click "New" and select "Create new app".
- Enter a name for your app (can be a name of your project) and choose the region that suits best to your location.
- Select "Settings" from the tabs.
- Click "Reveal Config Vars".
- These are:
CLOUDINARY_API_KEY - Get from Cloudinary.
DATABASE_URL - Get from your SQL provider.
DISABLE_COLLECTSTATIC - Set to '1' (without '')
SECRET_KEY - This is your Django project secret key, generated by your Django project. You can generate a new key that is different from your localhost version. You can also add any other Config Vars you need.
- Heroku needs two additional files in order to deploy properly.
- requirements.txt
- Procfile
- Select "Deploy" from the tabs.
- Select "GitHub - Connect to GitHub" from deployment methods.
- Click "Connect to GitHub" in the created section.
- Search for the GitHub repository by name.
- Click to 'Connect' to the relevant repo.
- Either click ‘Enable Automatic Deploys’ for automatic deploys or ‘Deploy Branch’ to deploy manually. Manually deployed branches will need re-deploying each time the repo is updated.
- Click 'View' to view the deployed site.
- If you want to fork the repository log in to Github or create an account.
- Locate to the repository for the project.
- In the top right corner click on 'Fork' button.
- Now you have a copy of the original repository in your Github account.
- If you want to clone the repository log in to Github or create an account.
- Go to the main page of the repository.
- Click on '<> Code' and copy the URL from HTTPS.
- Open Git Bash.
- Change your current working directory to the location where you want your clone to be made.
- Type 'git clone' into your terminal window, paste the URL you copied earlier and press Enter to create your local clone.
All text content on the website was created by me.
- The core functionality was taken from Code Institute's Boutique Ado Project
- Contact form was taken from here
- About Us section was taken from here
- Most of the styling was done with Boootstrap 5.
As we approach the conclusion of this course, I wish to extend my heartfelt gratitude to my mentor, Dick Vlaanderen, for his unwavering assistance and insightful feedback, not only during this project but throughout the entire course journey. I'm deeply appreciative of our facilitator, Marko Tot, whose guidance on the material and consistent practical advice has been invaluable at every turn. A special and warm thank you goes to my fellow groupmate, Gbemi Akadiri, for his generous help and unwavering support.
I am sincerely grateful for the remarkable role played by Code Institute, opening the door for me to embark on my journey as a developer.