Nescafe Dolce Gusto Webstore

E-commerce website to order your coffee pods & machines

Summary

Description

Reinventing the e-commerce coffee experience.
This website offers tons of cofee varieties as well as coffee machines.
It presents also the Nescafe-style coffee grinding.

Tags

E-commerceUIAPI

Technologies

DjangoSQLiteReactMaterial UI

Presentation

A coffee like no other

Branding

Official Nescafé Dolce Gusto Logo
Simplified Logo Super-simplified logo

Key Functionalities

The user can browse trough products:
  • He can browse through categories, see product details
  • He can add products to his cart
  • He can checkout fulfilling a form and receiving a checkout email

Administrators can manage and add product, as well as categories.
They can also view and edit orders.

Wireframing

Logo Animation

Thanks to CSS properties that can be applied to SVG paths, the splash screen animation has a "dash-array" animation : the logo build itself at each load of the splashscreen page.

Colors

Brown: Comfort, Natural, Create Warmth#663700
Orange: Stimulate, Creativity, Fun#D2401E
Gray: Neutral, Formal#E0E0E0

Fonts

Website FontRoboto - Google Fonts
Website icons built using WebpackCustom Font - 11 icons
Website iconsMaterialUI Icons

Final Logo

Screenshots

Technologies

ReactJS library to built user interfaces
DjangoHigh-level Python framework for web
SQLiteFile-based relational database
Material UIPopular React UI Framework
SassPowerful and stable CSS

Endpoints

/getAllCategoriesGet all categories as a list
/getCategoryDetailsGet one category, with its products
/getProductDetailsGet details of a product
/getProductTypesGet all details for a list of types
/orderOrder the cart

Services

Cart - Observer PatternManage all cart-related functions
Message - Observer PatternLaunch message toasts
NetworkProxy to Back-End endpoint

Database

This relational database contains 5 tables. Here is the list, with each table attributes (in addition of the id attribute) :
  • Category : product categories
    • label - category's label
    • isDrinkCategory - is the category for drinks, or for other products
  • Product : products table
    • name - product's name
    • shortDescription - product's short description, printed in categories
    • description - product's description, printed in product page
    • type - the type of beverage, if applicable
    • color - main color of the product
    • isLightColor - prints the text in dark mode if color is too light
    • typeColor - type of the beverage, if applicable
    • indicator - water indicator of the pod, if applicable
    • category - product's category id
  • ProductType - product's type, like color or packaging
    • number - number of pods, if applicable
    • product - product of the type
    • price - price of this type
    • color - color of the product, if applicable
    • name - name of the type, if applicable
  • Order - order details
    • fullname - Customer's name
    • address - Customer's full address
    • email - Customer's email address
    • sum - Sum of the order when the customer passes the order
      useful when products change price after the order was passed
  • OrderLine - order line
    • order - order's id
    • productType - type of the product of the line
    • quantity - quantity of type ordered

Custom Icons

Item Examples

Pod Design

Coffee pods are not images, but a component on its own! This component can simulates a coffee pod directly from product's attributes.