Title	Description	Authors	Release date	Output
Fakee-Shop	Boot camp project 1	[ElanekJ](https://github.com/ElanekJ), [technoveltyco](https://github.com/technoveltyco), [WarrenTyler](https://github.com/WarrenTyler)	14th March 2023

↑

Project 1: Fakee-Shop

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

Table of contents

• Project 1: Fakee-Shop
  • Table of contents
  • Overview
    • Mininal Viable Product concept (MVP)
    • Slogan
    • Logos
    • Screenshots
    • Links
  • Specifications
    • Project requirements
    • RESTful APIs
    • UX/UI Design
    • Built with
    • What I learned
    • Continued development
  • Useful resources
  • Authors
  • Acknowledgments

Overview

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

Mininal Viable Product concept (MVP)

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

Slogan

the best fake shopping experience online

Logos

1. Logo standard (jpeg)

2. Logo white transparent (png)

3. Logo black transparent (png)

4. Logo transparent (png)

Screenshots

Fakee-Shop SiteStripe and header navigation

Homepage on large screens

Homepage on small screens

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

Project requirements

1. Must use at least two server-side APIs.
2. Must use a CSS framework other than Bootstrap.
3. Must use client-side storage to store persistent data.
4. Must have a polished UI.
5. Must meet good quality coding standards (indentation, scoping, naming, etc.).
6. Must NOT use alerts, confirms, or prompts (look into modals).
7. Must be deployed to GitHub Pages.
8. Must be interactive (i.e: accept and respond to user input).
9. Create UX/UI with Figma.
10. Create a project Kanban dashboard with agile user stories.

RESTful 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
• Mobile-first workflow
• Figma
• Adobe Express
• Tailwind CSS
• Tailwind Elements
• MDBootstrap
• Font Awesome 6
• Google Fonts
• Vanilla JavaScript
• Web APIs
• Node.js
• Prettier

What I learned

The use of the template tag to reuse HTML and add dynamic content using JavaScript.

<template id="template-promo-category-card">
  <div class="item-card category-card group relative" data-item-id="5" data-item-action="category">
    <div class="relative h-80 w-full overflow-hidden rounded-lg bg-white group-hover:opacity-75 sm:aspect-w-2 sm:aspect-h-1 sm:h-64 lg:aspect-w-1 lg:aspect-h-1">
      <img src="./assets/img/category-saint-valentines.jpg" alt="Saint Valentines category image" class="h-full w-full object-cover object-center">
    </div>
    <h3 class="mt-6 text-sm text-gray-500">
      <a href="#valentines-promo" data-cta-action="5">
        <span class="absolute inset-0"></span>
        <span class="title text-red-600"><i class="fa-solid fa-gift"></i> Saint Valentine</span>
      </a>
    </h3>
    <p class="text-base font-semibold text-gray-900">Treat your favourite person to delicious food, fancy drinks, a thoughtful gift, or an unforgettable experience.</p>
  </div>      
</template>

and in JavaScript you will use it as follows:

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {

    const template = document.querySelector('#template-promo-category-card');

    // Clone the template to create a new DOM element.
    const clone = template.content.cloneNode(true);
    clone.querySelector(".item-card").dataset.itemId = data.id;
    clone.querySelector(".title").textContent = data.title;
    clone.querySelector(".description").textContent = data.description;

    // ...

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

On the other hand, export and import keywords were used to create modules and separate the private and public APIs of the JavaScript code.

modules/products.js

// Private API is here ...

// -------------------- PUBLIC API --------------------------

/**
 * Initialise the configuration settings.
 *
 * @param {debug: boolean, show_nav_promo: boolean, promo: Object} settings
 */
function init({ debug, show_nav_promo, promo }) {
  // ...
}

/**
 * Gets the website settings.
 *
 * @returns {Object}
 *    The website settings.
 */
function getSettings() {
  // ...
}

/**
 * Executes the main.
 */
function run() {
  // ...
}

export { DEBUG, init, getSettings, run };

and in the JavaScript this public API is used in the following way:

script.js

import * as App from "./modules/products.js";

(function (global, FakeeShop) {

  const VERSION = "0.1.0";

  let settings = {
    debug: true,
    show_nav_promo: true,
    promo: {
      label: "Valentine's Day",
      href: "#valentines-promo",
    },
  };

  FakeeShop.init(settings);
  FakeeShop.run();

  // Make FakeeShop's public API available in the global scope.
  global.FakeeShop = {
    VERSION,
    DEBUG: FakeeShop.DEBUG,
    init: FakeeShop.init,
    settings: FakeeShop.getSettings,
    run: FakeeShop.run
  };

})(window, App);

Finally, we learn CSS animation, implementing a heart beat for the Valentine's Day 💘 marketing campaign made on the website.

/* Valentine's heart beat */
@keyframes heartbeat {
  0% {
    transform: scale( 1 );    
  }
  20% {
    transform: scale( 1.25 ) 
      translateX(5%) 
      translateY(5%);
  } 
  40% {
    transform: scale( 1.5 ) 
      translateX(9%) 
      translateY(10%);
  }
}

.heart {
  background-color: var(--valetine-color);
  display: inline-block;
  height: 10px;
  margin: 0 -30px;
  position: relative;
  top: -15px;
  transform: rotate(-45deg);
  width: 10px;
  animation: heartbeat 1s infinite;
}

.heart:before,
.heart:after {
  content: "";
  background-color: var(--valetine-color);
  border-radius: 50%;
  height: 10px;
  position: absolute;
  width: 10px;
}

.heart:before {
  top: -5px;
  left: 0;
}

.heart:after {
  left: 5px;
  top: 0;
}

Continued development

The following features were included in the backlog for possible future improvements:

• Search suggestions
• Listing filters and sorts
• Shopping cart
• CI/CD
• Automated tests
• Search history
• Favorites
• Signup/Login
• Admnistration
• User profile
• Newsletter

Useful resources

• Software/Web Standards

  • UML 2
  • Drawing UML with PlantUML
  • PlantUML - Live editor

• Agile/Scrum

  • User stories with examples and a template
  • How to Write Acceptance Criteria: Examples and Best Practices
  • What is the Definition of Done (DOD) in Agile?

• Public HTTP APIs

  • Public API Lists - GitHub - Useful resource to choose free public APIs that can be used for Proof of Concept projects.

• UX/UI Web Design

  • Figma - High-converting e-commerce UI kit - The free design from Figma Community which Fakee-Shop project is based on.
  • Adobe Express - Logo Maker
  • 20 Elements of Modern Web Design That You Need to Know
  • Parts Of A Website: A Cheat Sheet For Non-Techies
  • CMS Web Design: A Guide to Dynamic Content Applications

• Fonts/Images

  • Font Awesome 6 Icons - Only the free icons were used in this project.
  • Wikimedia Commons - Free open source catalog of images.

• Tailwind

  • Tailwind CSS Docs - The main reference for Tailwind CSS Framework.
  • Tailwind UI Docs - A good resource to speed the development using pre-designed Talwind components and template, but unfortunately it is not free :( .
  • Tailwind Elements - Bootstrap components recreated with Tailwind CSS, but with better design and more functionalities.
  • TUIk - Tailwind UI Kit - Components
  • Tailwind recommended class order
  • MD Bootstrap - Top quality open-source UI Kits - A good quality of Bootstrap UI open source components and with tons of good examples.

• HTML

  • The Content Template element - it is a good solution when you want to reuse HTML and you do not have a rendering template library.
  • HTML Template Tag Explained

• CSS

  • How to create a beating heart with pure CSS for your valentine
  • Flexbox
    • Breaking to a new row with flexbox
  • 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 Styling
    • Styling Code In and Out of Blocks - Good document explaining how to create code snippet block beatyfully.

• Vanilla JavaScript

  • Setting Default Values with JavaScript’s Destructuring
  • JavaScript modules
  • Getting the Width and Height of an Element

• Web image formats

  • Image file type and format guide
  • The Best Image Format for the Web: JPEG, WEBP, HEIC, or AVIF?
  • How to Use SVG Images in CSS and HTML – A Tutorial for Beginners

• Git/Github

  • 5.2 Distributed Git - Contributing to a Project
  • How to Write Better Git Commit Messages – A Step-By-Step Guide
  • Github - Introducing draft pull requests
  • GitHub Flavored Markdown Spec

• Markdown

  • The Markdown Guide
  • Mermaid - Diagramming and charting tool
  • Include diagrams in your Markdown files with Mermaid
  • Mermaid - Live Editor

• IDE/Dev tools

  • Prettier - Code formatter
  • Prettier VSCode plugin
  • Tailwind Prettier plugin
  • Markdown Preview Github Styling

Authors

Group 7

• Elias, Jozef
  • GitHub - https://github.com/ElanekJ
• Tyler, Warren
  • GitHub - https://github.com/WarrenTyler
• Rodriguez, Daniel
  • GitHub - https://github.com/technoveltyco

Acknowledgments

The teacher and TAs that help us with resources and support to my questions during the development of this project.