Front-end Challenges

This application showcases solutions to Front-end Challenges from FrontendMentor.io and frontloops.io.

My process

To have a proer guidance on how to do things the best way while using Next.js, I based my project on this example. From which I learned:

The basic structure of a Next.js project
They way Next.js allows to customize meta tags in the page head
How to define a global stylesheet for Next.js projects
How to customize MUI themes
How to define custom styles for MUI components with the sx property
How to handle different screen sizes with Material UI's useMediaQuery hook
MUI uses createContext, which only works in Next.js Client Components
Improve my understanding of React's useState and useEffect, the rendering lifecycle and its interaction when using timers
Usage of react-spring (and how amazing it is!)
Input elements with patterns do not avoid faulty inputs, they just signal them
How to deploy a static Next.js app
How to set up favicons in Next.js

Areas that I want to continue be focusing on in future projects:
- Theme customization to ease heavy changes in larger codebases.
- Timers interaction with the useEffect hook.

Name		Name	Last commit message	Last commit date
Latest commit History 77 Commits
app		app
components		components
lib		lib
out		out
public		public
ui		ui
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
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