This is my solution to the Password generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
I took this challenge to practice using the ReactJs Framework NextJs. I used the NextJs docs by mainly following the following tutorial Create your nextjs app
Users should be able to:
- Generate a password based on the selected inclusion options
- Copy the generated password to the computer's clipboard
- See a strength rating for their generated password
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
The screenshots where created using Mobile simulator extension
Mobile 
- Live Site URL: Password generator app
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- TailwindCSS
- Matrial-ui
I started this project to practice using Next.js by following the Next.js documentation tutorials. Some of the main advantages of using Next.js is its inbuilt features that optimises images and fonts. Font optimisation is done through next/font which will automatically optimize fonts (including custom fonts) and remove external network requests for improved privacy and performance. The following video gives an introduction on Using Fonts in Next.js (Google Fonts, Local Fonts, Tailwind CSS)
The process includes the following steps:
- install next/font by running
npm install @next/fonton the terminal - import the font you want to use in the layout.js file, here I used
import { JetBrains_Mono } from "next/font/google"; - define a new instance of the imported font
const jetBrainsMono = JetBrains_Mono({
subsets: ["latin"],
preload: true,
variable: "--font-jet-brains-mono",
display: "swap",
});- then wrap the parent component as shown below. The font will be applied to all the children of the wrapped element
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={jetBrainsMono.className}>{children}</body>
</html>
);
}Now, in this project , I am using material-ui components for some of the elements. The issue was that the Next font was being automatically overwitten with the default material-ui font settings. The solution that I found after some research involves the following steps:
- creating a folder in the components folder that is called
ThemeRegistry. - In the
ThemeRegistryfolder , create two files calledtheme.jsandThemeRegistry.js. - the
theme.jswill contain the font imports from thelayout.jsas shown below:
import { JetBrains_Mono } from "next/font/google";
import { createTheme } from "@mui/material";
const jetBrainsMono = JetBrains_Mono({
subsets: ["latin"],
preload: true,
variable: "--font-jet-brains-mono",
display: "swap",
});
const theme = createTheme({
palette: {},
typography: {
fontFamily: jetBrainsMono.style.fontFamily,
},
});
theme.typography.button = {
fontFamily: jetBrainsMono.style.fontFamily,
textTransform: "uppercase",
fontWeight: 700,
};
export default theme;- import the
themein theThemeRegistryand use it as shown below:
'use client';
import * as React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from './theme';
export default function ThemeRegistry({ children }) {
return (
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
{children}
</ThemeProvider>
);
}- import the
ThemeRegistryin thelayout.jsfile and use it as shown below
import "./globals.css";
import ThemeRegistry from "@/components/ThemeRegistry/ThemeRegistry";
export const metadata = {
title: "Password random generator",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ThemeRegistry>{children}</ThemeRegistry>
</body>
</html>
);
}add themeColor to the head element
Overriding Material-ui font settings
create-custom-range-input-consistent-browsers
- Website - Chamu Mutezva
- Frontend Mentor - @ChamuMutezva
- Twitter - @ChamuMutezva