This is a pre-work project idea for Chingu Voyage 12. This is a functional quasi-clone of Google Fonts.
The project is deployed here.
Tier 1: Implement the basic design layout with information hardcoded. The custom text and reset button should work. All information is hardcoded. HTML/CSS/JS ONLY. Project should be stored and deployed on github. Extra Features: implement the dark/light mode, implement the grid/list view mode, make page responsive, implement the back to top button.
Tier 2: Tier 1 + Responsiveness and the Back to Top Button (you'll need it!). Develop the font cards via the Google Fonts API using the 8 highest trending fonts at that moment. Implement the search feature. Frameworks can be used. Project should be stored on github and deployed as a functional app. Extra Features: implement the dark/light mode, implement the grid/list view mode, implement lazy-loading.
Tier 3: Tier 2 + Add a user login that offers a dashboard with the user's favorite fonts. Fonts can be added or removed with the plus/minus button on each font-card. This feature should be enacted with back-end persistance (vs. localStorage, Cache API, etc). Frameworks can be used. Project should be stored on github and deployed as a functional app. *Extra Features: implement the dark/light mode, implement the grid/list view mode, implement lazy-loading, give font use information with some data visualization
This project uses the free Google Fonts API. Make sure you read the API docs and understand how your information will be requested and delivered. Tier 1 will simply hardcode the font-cards as shown in the example. Tier 2 can store their API Key in the JS file; Tier 3 should follow standard protocol and make sure the API Key is hidden.