Google Fonts Widget

Features

• project set up using Create React App and using React Hooks API (useState, useEffect, useContext)
• fonts fetched from API Google Fonts with API key and automatically loaded with react-google-font-loader
• modular components styled with Bootstrap 5

Project Structure

src
├── App.js
├── components
│   ├── Header.js
│   ├── Footer.js
│   ├── fonts
│   │   ├── Font.js
│   │   ├── PopularFonts.js
│   │   ├── RecentFonts.js
│   │   └── TrendingFonts.js
│   └── selection
│       ├── FontSize.js
│       └── Text.js
├── context
│   └── Context.js
├── index.js
├── serviceWorker.js
└── setupTests.js

Install

Install dependencies:

% yarn install

Add environment variables:

Add .env.local file with environment variable REACT_APP_OPENWEATHER_API_KEY with the value of API key for OpenWeather API

Run the app in the development mode

% yarn start