| 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 |
Fakee-Shop is the leading website offering the best fake shopping experience online.
Fakee-Commerce is the leading website offering the best fake shopping experience online.
Fakee-Shop is the leading website offering the best fake shopping experience online.
the best fake shopping experience online
- Logo standard (jpeg)
- Logo white transparent (png)
- Logo black transparent (png)
- Logo transparent (png)
Fakee-Shop SiteStripe and header navigation
Homepage on large screens
Homepage on small screens
- 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
- Must use at least two server-side APIs.
- Must use a CSS framework other than Bootstrap.
- Must use client-side storage to store persistent data.
- Must have a polished UI.
- Must meet good quality coding standards (indentation, scoping, naming, etc.).
- Must NOT use alerts, confirms, or prompts (look into modals).
- Must be deployed to GitHub Pages.
- Must be interactive (i.e: accept and respond to user input).
- Create UX/UI with Figma.
- Create a project Kanban dashboard with agile user stories.
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.
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
- 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
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;
}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
-
Software/Web Standards
-
Agile/Scrum
-
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
- 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
- Code Snippet Styling
- Styling Code In and Out of Blocks - Good document explaining how to create code snippet block beatyfully.
-
Vanilla JavaScript
-
Web image formats
-
Git/Github
-
Markdown
-
IDE/Dev tools
Group 7
- Elias, Jozef
- GitHub - https://github.com/ElanekJ
- Tyler, Warren
- GitHub - https://github.com/WarrenTyler
- Rodriguez, Daniel
- GitHub - https://github.com/technoveltyco
The teacher and TAs that help us with resources and support to my questions during the development of this project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent