Fourth Milestone Project

Bonjour and welcome! ✌️

This is a website created as my fourth and final Milestone Project for the Full Stack Developer Course of Code Institute, after completing the 4 modules : User Centric Front End Development, Interactive Frontend Development, Backend Development & Full Stack Frameworks With Django.

You can find the deployed site here.

NOTE: The links included in this README will not automatically open in a new tab. Press CTRL or Cmd + click on the link to open the target in a new tab.

Table of Content

UX

Seeing all these "box" concepts and subscription plans popping out everywhere like champagne out of a shaken bottle 🍾 (gotta be Frenchie 🇫🇷!), yes I'm talking about streaming pay-and-view-it-all plans and other box you receive at home containing ingredients and recipes for the week or beauty product for the month... I had the idea to surf on the wave but add it one of my hobby: pastry & baking 🍰

The basic concept is then pretty simple and not so original: for a monthly or annual fee 💰, you'd receive at your chosen address one box every month 📦 containing a detailed pastry recipe, the tools and potentially some ingredients to make the recipe. Depending on the month, the recipe and box could be themed, e.g. Valentine's day ❤️, Pink October 🎀, Christmas 🎄... You get the idea.

Added to this base concept would be a regular online store dedicated to pastry, bakery and chocolate work where you can find and buy most of the things you may need: plenty moulds, kitchen utensils, pastry rings, baking mats, maybe also a few dry ingredients 🍫 and why not even appliances, like stand-mixers?

Finally, a blog where some amazing recipes would be uploaded for everyone to enjoy the pleasure of making great cakes and other fine treats, without having to spend half your saving account in some fancy pastry stores 💸 (although some really deserve it, it's just so freaking good! 🤤)

Structure & Design

The website is structured as a multi-pages site.

The e-commerce part allows the user to subscribe to the box but also to purchase individual items, while the blog simply lists the sent newsletter, which are primarly recipes.

The primary color is a beautiful and deep yellow (#FFD75E) 💛 which I chose because I wanted a bright color, related to pastry but still natural. If you think pastry, of course you can find cakes and icing of any possible colors thanks to food colorants but... Unless you are 6yo, food-wise you tend to be more attracted to natural colors like red, yellow or green for example. There is a reason why you don't see much blue or purple on food packaging. Green does not really scream pastry tho, more vegetables! Red is everywhere and a bit overused if you ask me, while on the other hand yellow... Yellow is a joyful color, evoking sunshine and energy, optimism and intellect. These speak to me and I link them to the emotions I feel when I bake and then share the product of my efforts with loved ones. Yellow catches the eye and bring attention, it also goes well with darker colors such as brown(ies!) or black (hello 🐝). I decided to use it with parcimony tho, making the whole website as bright as the sun would probably discourage more than one... So it is used where I need to get the user's attention: the logo, buttons, links and titles. The background of the website is a very pale version of this #FFD75E, dare I say it remembered me of an old recipes book's pages... 📖

Typography-wise, I chose Style Script to emphasize my titles and the rest of the content is written with Merriweather.

On all pages you can find the sticky navbar and the footer. The navbar contains the brand logo, leading back to the home page as it is customary, a search bar allowing users to quickly get where and what they want (searching through the products), a login/register link and the shopping cart. This one indicates the total amount or simply states "Cart" if it is empty. On a second line the actual navigation links: Home, Subscribe, Products, Recipes & Contact Us.

The footer is divided in three parts: the left part explains who's behind The Pastry Box (TPB) and the values of the company; the 2nd part lists some useful links while the 3rd and last part is itself divided in 3 sections: a newsletter subscription field, the links to TPB's socials accounts and finally a mention of credit cards accepted and payment security 💳🔐

The initial wireframes can be found here.

User stories

As a user, I want to...

be able to register an account
log in and out easily
be able to modify my data
be able to change my password if I can't remember it
subscribe to the newsletter
access recipes
be able to follow the brand on social medias
be able to contact the brand

As a shopper, I want to...

see all products available
view an item in details
quickly purchase one item, without having to click 25 times
see the amount in my shopping cart easily
find details about the box subscription offer
be reassured about the security when paying
access my order history
be able to select the quantity and potential size of the items I want to buy
search and find products easily
get a full final look on my shopping cart before to checkout
be able to modify my shopping cart easily
get a confirmation of my order after checkout
manage my subscription easily

As a store owner, I want to...

manage products
send newsletter

View the tested user stories here.

Features

Existing Features

Create a user profile:
- Register for an account with your email address and a password.
- To avoid any typo, the email and the password are asked twice, and the email is verified through a link sent to the registered email address. You cannot access the Profile page until you have verified your email.
- The Profile page stores the user's details and order history.
Products catalogue
- Allows to visualize all the products available, search through them, sorting them in different orders.
- Adds a product to your cart using the "Add to Cart" button and keep shopping or use the "Buy Now!" button to go straight to the Checkout page.
- A Back to the top button is available on the product catalogue, since the page could get long with plenty products displayed.
Shopping Cart
- Stores your product(s) before payment
- Allows you to adjust the quantity or delete a product before purchasing
- Displays the subtotal, the delivery fee and the grand total.
Checkout
- Allows the user to buy the content of its shopping cart.
- Redirects the user to the checkout and inform them is something went wrong.
- If the payment is successful, the user is redirected to the confirmation page, where their order is summarized. A toast notification doubles the confirmation. They also receive an email with the order recap. Finally, this order is added to the user's profile, if they have one.
Toast notifications
- Inform the user whenever an action has been successful or not.
- Display the content of the shopping cart everytime an item is added.
Subscription
- Stripe Checkout allows recurring payment, via two different plans: monthly for 35.99€ or annually for 395.00€ (you get one month for free). You need a profile to subscribe, since it grants you management of your subscription afterwards. If you try to Subscribe without being logged in, you will land on the Sign in page.
- You can then manage your subscription from your Profile page, through Stripe Customer Portal.
Newsletter
- The store owner can write and send newsletter to all the mailing list. From the Admin panel, the newsletter can be formatted nicely with HTML with the help of a WYSIWYG editor, from CKEditor. This function is not available from the front end website, as the editor is quite large and was messing up the page when viewed from a tablet or a mobile.
- Each post is sent via email, using SMTP and Gmail (thepastrybox.ms4@gmail.com) to the whole mailing list. It is also stored and displayed in the Recipe app.
- The subscription to the mailing list is available to anyone, on any page, from the footer of the website.
Recipes
- Since the weekly newsletters are mostly recipes, each post is stored and displayed under the Recipe app.
Contact
- A contact page allows anyone to send a message to TPB's team, it will be sent to thepastrybox.ms4@gmail.com. The social links in the footer also allows user and visitors to subscribe to TPB's socials and stay in touch.

Features Left to Implement

Pagination on the Product catalogue if it gets too long.
Login via socials.
A reward system, like 4 different levels based on the amount spent throught the year, with a gift at each level.
A review system for at least the Subscription plan, to incitate more engagement. Potentially for each product?
A video section, accessible from the Profile page if you have subscribed to a plan. Video of recipe step-by-step.
Special instructions when ordering.
Possibility to gift the subscription to someone and have it activated later on.

Technologies Used

Web technologies

Developer tools

Github
Heroku
AWS
Git
Visual Studio Code
Bootstrap 5.1
Typora
- Typora was used to write this README file & its annexes.
Adobe XD
- Adobe XD was used to create the wireframes.
TinyPNG
- TinyPNG was used to compress all pictures, in order to reduce the loading time and improve UX.
Favicon.io
- FavIcon was used to create and implement the favicon.
Caniuse.com

Testing

HTML Validator (W3C)

The W3C HTML validator being unavailable at the moment, I'm using this one instead.

When testing my products page, some of the errors were as below. I honestly have no idea what that means and Google did not provide me much more info. Given the fact that the validator did not provide me any code extract, I chose to leave these errors as they are.
When testing product detail page & shopping cart, these errors appear. This snippet has been taken from this JSFiddle and the JS file working with depends on these field attributes.
On the checkout page, the spinner inside the submit button is a code snippet taken from Stripe.
Still the checkout page, there are two duplicate IDs, from email fields: one from the customer detail form, one from the newsletter subscription form in the footer. These IDs are set by crispy form.

CSS Validator (W3C)

The W3C CSS validator being unavailable at the moment, I'm using this one instead.

!important was used to override Bootstrap CSS.
Use of CSS variables with :root
From Bootstrap CSS.
I don't understand this error. :root is not empty...
From Bootstrap CSS.
This is part of the :root variable, the } comes later.
Isn't it possible to add several selectors to a :not pseudo-classe? It seems to be working.

Link testing:

The logo links to the homepage.
The search bar links to the Product page, with the user's query.
The My account dropdown links lead to Sign In and Sign Up pages as guest user, to the Profile and Log Out pages as logged in user + Product Management & Newsletter writting pages if logged in as staff.
The Cart button links to the Shopping Cart page.
All links from the sub-part of the navbar work, linking respectively to the Homepage, the Subscription page, the Products dropdown exposes all different products categories, the Recipes page which lists the newsletter posts sent and finally the Contact page, allowing the user to send a message to the TPB's team.
In the footer, the Terms & Conditions and Privacy Policy links are blank, and the Sign In leads to the login page. The three social links leads to their respective socials.
On the Subscription page, the Subscribe button leads to a Stripe Checkout page and from this page, the return button leads back to the Subscription page.
On the Products page, each card product links to the Product detail page of its specific product. The product category links to all products from the same category. If logged in as staff, the Edit link opens the Edit product page, while the Delete link removes the product from the database directly.
On the Product detail page, the Back link leads you to the previous page. The Full size picture links opens up the picture in a new tab (visible only from desktop view). The Add to Cart button adds the specified product's quantity to the Cart while the Buy Now! button does the same but leads the user straight to the Checkout page.
On the Recipes page, each post card links to the Recipe detail page, displaying the whole related post.
On the Profile page, the order pagination links are disabled if you haven't passed any order yet. They activate after 5 orders minimum. If you have passed an order minimum, it is displayed here. The trucated order number takes you to the order details, while each product line is a link to this specific product. If you don't have subscribed to the Box, you see a button leading to the Subscription page. If you do have a subscription, then a link to manage it shows, leading to a Stripe Customer Portal, as well as a Contact link.

Spotted bugs & errors:

Tested user stories: