NextJS Google Fonts App

A project built on top of NextJS, shipped with React, TypeScript, SWR and TailwindCSS.

Problem statement

We want to list many Google fonts and let users select fonts to embed to their website.

Create a React app that has the following features:

List Google fonts based on a grid layout
Create UX functionalities
- Search for font name
- Type to preview text
- Adjust font size
Create filter options that support these criteria:
- Categories
- Language
- Show only variable fonts
Preview font details
- Type to preview text
- Adjust font size
- Select font style
- Display selected family sidebar
  - Add/remove style
  - Display embed links

git clone git@github.com:nguyend-nam/google-fonts-clone.git my-project-name
cd my-project-name
yarn install

Then, you can run locally in development mode with live reload:

yarn dev

Open http://localhost:3000 with your favorite browser to see your project.

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
.vscode		.vscode
components		components
constants		constants
context		context
docs		docs
hooks		hooks
pages		pages
public		public
styles		styles
types		types
utils		utils
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierrc.json		.prettierrc.json
README.md		README.md
next-env.d.ts		next-env.d.ts
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock