Nescafe Dolce Gusto Webstore

E-commerce website to order your coffee pods & machines



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.




DjangoSQLiteReactMaterial UI


A coffee like no other


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.


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.


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


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

Final Logo



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


/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


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


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.