dashboard_720.mov
Her Feet upon the Dashboard is her feeling of Freedom
― Magie
This is a project focused on learning API calls that I did as part of the Scrimba Front-End Developer Career Path. It takes the format of a chrome extension which upon opening a new tab makes an organizational dashboard. It includes API calls to unsplash for the background, navigator to get latitude and longitude, the OpenWeatherMap API for the current weather conditions, and it also gets the current time and has a hidden pomodorro timer for those who look 😉😉😉.
Click on the "View Project" button above ⬆️
-
API calls
-
Fetch method
-
Promise chaining with .then()
-
'async/await'
-
Response parsing
The course was beneficial for understanding the theory of HTTP requests, URLs, endpoints, parameters, promises, callbacks and much more. However, when creating my project, I encountered several challenges that were not covered in the course material. This afforded me the opportunity to research through various forms of documentation including MDN, stackoverflow, and the API documentation. I eventually resolved such issues:
-
Securing API keys: Placing the API key in a .env file at the root directory.
-
Version Control Issues: Using .gitignore to exclude sensitive files and commands like git filter-branch for cleaning the commit history.
-
Backend Service Setup: Setting up a backend using Node, Express.js, Axios, and dotenv.
-
Rate Limiting: Implementing 'express-rate-limit' for API calls.
-
Server & API Calls: Understanding the distinction between front-end and back-end servers, and the correct way to formulate and test API calls.
-
Developed a backend server to protect API keys
-
Utilized .env file, API key, .gitignore file
-
Introduced parameterized insertion
-
Designed a lookup table using new Map() for UI enhancements
-
Implemented a rate limiter for API security
-
Split out client-side from server side code.
-
Addressed CORS issues
-
Setup server in production environment
This project was completed as part of the Scrimba The Frontend Career Path, which is composed of:
- over 1000 lessons
- over 65 hours of instruction
- over 30 instructor-lead, hands-on projects
- over 15 Solo Projects (completed completely alone, with only Figma files and user stories provided.)
CERTIFICATE OF COMPLETION - The Frontend Developer Career Path.pdf
-
Icons from Orion Icon Library.
-
This project was inspired by the Personal Dashboard project from the Scrimba Front-End Developer Career Path. The majority of the work is consistent with what was presented in the original project, with additiions and variations noted in the personal contributions section.