The project is a clone of the Google Fonts web application, repoducing most of the functionality. It was completed as a Tier 2 Solo Project for Chingu, a platform designed to help boost your tech career with team projects. As a Tier 2 Project, this is a fully developed front-end application.
The finished project can be found here.
Replace "YOUR_API_KEY" with your API key obtained from Google.
axios.get("https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR_API_KEY&sort=popularity")In the project directory, you can run:
Install all dependencies necessary for the project.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
- Axios
- Google Fonts API
- Materialize CSS
- React
- React-Dom
- React-Helmet
- React-Lazyload
- React-Redux
- React-Router-Dom
- Redux
- Header with minor navigation (Logo and Catalog/Featured/Articles/About link list)
- Nav with Major navigation / page-manipulation (search, custom text, font-size, dark/light mode, grid/list mode, and reset)
- Main section for the font cards
- Font cards which display the Font Name, the sample text, and an add button (the font creator is not available via the api, so it is not required in tiers 2 or 3)
- Back-to-top button that allows users to click and scroll back up to the top (there could be up to 959 fonts displayed, so you need this!)
- Footer section with your developer information
- Sample text in each card should be displayed in the corresponding font
- Buttons/links should be evident (make sure the cursor changes, etc.)
- Implement a way to handle overflow from sample text in the font cards, as the font size is adjustable
- Text typed into the custom text (type something) box should immediately change the sample text in each font card
- The sample text should return to the default sample if the input box (type something) no longer has any input
- Font size chooser should have at least four sizes and should immediately change the sample text font size in each font card
- Implement the clickable 'reset' icon on the far right of the major navigation; it should reset the page as if the page were reloaded (do not actually reset the page)
- On load, the page should display fonts sorted by current popularity, as returned by the Google Fonts Developer API (see below)
- The search feature should be fully functional and should display matching fonts (it's up to you if you want to do this via a 'submit' or through onchange)
- When the search input is cleared (via reset button or manually), the fonts should automaticaly display sorted by poplarity again
- Your repo needs to have a robust README.md
- Make sure that there are no errors in the developer console before submitting
- Make your design fully responsive (small/large/portrait/landscape, etc.)
- Implement the light/dark mode toggle buttons
- Implement the change display icon so you can flip between a grid layout and a list layout for the font cards