Next.js - TailwindCSS - TypeScript - Dynamic rendering of recipes!

What are you most proud of, and what would you do differently next time?

Hey! Thanks for taking a look at my submission!

In this project I have attempted to build a recipe app in Next.js and TailwindCSS.

I set out to dynamically render the recipes by building a JSON file containing the recipes.

This JSON data is then used to populate the components with information depending on how many recipes there are, ( at the moment there is just one recipe! But more could be added!)

I have used Next.js App router to build a home page, recipes page, blog page and contact page.

The recipes are listed on the recipes page, when one recipe is selected, next.js creates a path recipes/[id], the id is grabbed from the JSON file and renders the relevant information for that particular recipe!

Check it out and let me know what you thing :)

What challenges did you encounter, and how did you overcome them?

I was scrapping around for a while learning a bit about the new global.css file and how to implement custom fonts instead of using a tailwind.config file

What specific areas of your project would you like help with?

I have forgotten how to implement a fully responsive design based off of the font-size declaration on body or html and then using ems or rems. I will take another look at this in the near future.