search

technoveltyco / bootcamp-project1

Fakee-Shop is an implementation of an online retail store, starting from a given UX/UI concept, and creating an MVP in a sprint of 2 weeks, using rapid prototyping frameworks.
https://technoveltyco.github.io/bootcamp-project1/
MIT License
1 stars 0 forks source link
api async-await css css3 javascript rapid-development rapid-prototyping restful-api tailwindcss tailwindui ux-design ux-ui vanilla-javascript web-components

readme

Title: "Fakee-Shop" Description: "Boot camp project 1" Authors: "ElanekJ, technoveltyco, WarrenTyler" Release date: "14th March 2023" Output:

↑

Project 1: Fakee-Shop

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

Fakee Shop logo

Table of contents

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)

Fakee Shop standard logo

  1. Logo white transparent (png)

Fakee Shop white logo with transparent background

  1. Logo black transparent (png)

Fakee Shop black logo with transparent background

  1. Logo transparent (png)

Fakee Shop standard logo with transparent background

Screenshots

Fakee-Shop SiteStripe and header navigation

Fakee-Shop SiteStripe and header navigation

Homepage on large screens

An example of how the Fakee-Shop homepage looks on large screens

Homepage on small screens

An example of how the Fakee-Shop homepage looks on small screens

Links

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:

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:

UX/UI Design example

Built with

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="https://github.com/technoveltyco/bootcamp-project1/raw/main/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:

Useful resources

Authors

Group 7

Acknowledgments

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