Home

Project 1: Fakee-Commerce

Fakee-Commerce is the leading website offering the best fake shopping experience online.

Table of contents

• Project 1: Fakee-Commerce
  • Table of contents
  • Overview
    • Links
  • Specifications
    • APIs
    • Built with
    • Useful resources

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

Fakee-Commerce is the leading website offering the best fake shopping experience online.

Links

• Solution URL: https://github.com/technoveltyco/bootcamp-project1
• Live Site URL: https://technoveltyco.github.io/bootcamp-project1/
• KANBAN Dashboard: https://github.com/users/technoveltyco/projects/4

Specifications

Here we will explain the details of the design and implementation of the project.

APIs

The website will use Mock-Up APIs for the back-end:

• Platzi Fake Store API : for creating the products, filtering and user accounts.
• Faker API : For general fake data like companies, credit cards, addresses, etc.
• ExchangeRate API : for currency exchange.

UX/UI Design

The UX/UI design will follow the specifications of the High-converting e-commerce UI kit which defines a retail e-commerce website. The full theme is freely available in the Figma Community.

Here there are the links to the Figma resources that are being considered in the implementation of the Fakee-Shop:

• Full theme Figma copy: The High-converting e-commerce UI kit
  • Homepage & category page
  • Product list page
  • Product details page
  • Product card
  • Search
  • Navigation
  • DESIGN SYSTEM

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Tailwind CSS
• Tailwind UI
• Mobile-first workflow
• Vanilla JavaScript

Useful resources

• Figma
  • High-converting e-commerce UI kit
• Tailwind
  • Tailwind CSS Docs
  • Tailwind UI Docs
• Public APIs
  • Public API Lists - GitHub - Useful resource to choose free public APIs that can be used for Proof of Concept projects.
• CSS Reset
  • The New CSS Reset - Talking about the reset CSS approaches.
  • The New CSS Reset - GitHub - The most recent resets for the latest CSS implementations in modern browsers.
• Dark Mode
  • Create A Dark/Light Mode Switch with CSS Variables
  • How to get dark mode working with CSS
  • MDN - prefers-color-scheme
  • How “invert brightness” can improve accessibility and help us use our devices
  • OS: High Contrast versus Inverted Colors
• Code Snippet Style
  • Styling Code In and Out of Blocks