Local API Fetch

A responsive dashboard – Using semantics HTML, BEM and fetch API using vanilla Javascript

Summary

This project is focused on building a simple, clean scalable and maintainable website using HTML semantics, BEM for CSS organization, Sass for CSS preprocessor, vanilla javascript for local API fetch and navbar responsiveness and Gulp for automated front-end build task such as minifying SCSS, JS and images.

Web Development Process

UI Design
The revised design is an enhanced rendition of the task I worked on during my previous front-end interview. The challenge presented was to create the design without relying on any frameworks. I implemented slight modifications, such as the removal of unnecessary icons and overall simplification, resulting in an improved version.

Coding

I created an npm package called generator-website-starter that includes Gulp, Sass and Browsersync.

Download npm package

npm i generator-website-starter

Run this in local server

gulp

Features and Functions

HTML

1. Semantic markup for accessibility

CSS

1. Set up Sass partials for organization
2. BEM for clean, understandable and maintanable code
3. High-fidelity design translated into web page
4. Set up media queries for responsiveness and device compatability

Javascript

1. API Call to local json file by using the following functions.
   • Used fetch for getting data and catch for error handling responses
   • Conversion of property values to currency and date
   • Iterate multiple arrays to each table
   • Getting the sum of total values for Deal Value in each table
   • Merged two arrays to create a new array for Board Summary Table
2. Clickable mobile navbar, expected to toggle and show menu.

Deployment

npm package doesn’t have the gulp build so I added this line of code in the gulpfile.js

exports.build = series(parallel(scssTask, jsTask, optimizeImg));