Challenge: Dynamic Emoji Page

Challenge: Dynamic Emoji Page

Create a Next.js application that generates a dynamic page for each emoji, where the URL structure is based on the emoji's shortcode. For example, the page for the "😄" emoji would be accessible at

/emoji/joy.

Requirements:

• Create a JSON file containing a list of emojis, each with a shortcode and emoji property. (You can find a list of emojis and their shortcodes online.)
• Build a homepage that lists all the available emojis with their shortcodes and displays the emoji itself.
• Clicking on an emoji on the homepage should navigate to its dynamic page.

• Create a dynamic page for each emoji using Next.js routing. The page should display the emoji, its shortcode, and a fun fact about it.
  Bonus Challenges:

• Implement a search functionality on the homepage that allows users to filter emojis by name or shortcode.

• Add a random emoji button on the homepage that navigates to a random emoji's dynamic page.

• Use CSS animations or transitions to make the emoji interactions more engaging.
  Deploy the application to a hosting platform like Vercel or Netlify.
  Hints:

• Use Next.js's dynamic routing feature to create dynamic pages based on the emoji shortcode.

• Utilize query parameters or route parameters to pass data to the dynamic pages.

• Use CSS-in-JS libraries like styled-components or CSS modules to style your components.

This challenge will test the developer's knowledge of dynamic routing, working with JSON data, creating reusable components, and using CSS for styling. It's a creative and engaging way to explore Next.js capabilities while having fun with emojis!