nextjs-1.md

Next.js Developer Assessment - Recipe App

Create a simple recipe browsing application using Next.js that demonstrates your understanding of core Next.js concepts. The app should have the following features:

Requirements

1. Home Page (/app/page.js)

   • Display a grid of recipe cards
   • Each card should show:
     • Recipe name
     • Cooking time
     • Difficulty level
     • A "View Details" button

2. Recipe Detail Page (/app/recipes/[id]/page.js)

   • Show detailed information about the selected recipe
   • Include:
     • Recipe name
     • Cooking time
     • Difficulty level
     • Ingredients list
     • Cooking instructions
     • "Back to Home" button

3. Search Component (/app/components/Search.js)

   • Create a search bar that filters recipes by name
   • Should update results in real-time as the user types

4. Filter Component (/app/components/Filter.js)

   • Add difficulty level filters (Easy, Medium, Hard)
   • Allow multiple selections

Sample Data

// /app/data/recipes.js
export const recipes = [
  {
    id: 1,
    name: "Classic Margherita Pizza",
    cookingTime: "30 minutes",
    difficulty: "Easy",
    ingredients: [
      "Pizza dough",
      "Tomato sauce",
      "Fresh mozzarella",
      "Fresh basil",
      "Olive oil"
    ],
    instructions: [
      "Preheat oven to 450°F",
      "Roll out the pizza dough",
      "Spread tomato sauce",
      "Add mozzarella",
      "Bake for 15-20 minutes",
      "Top with fresh basil"
    ]
  },
  {
    id: 2,
    name: "Beef Stir Fry",
    cookingTime: "25 minutes",
    difficulty: "Medium",
    ingredients: [
      "Beef strips",
      "Mixed vegetables",
      "Soy sauce",
      "Garlic",
      "Ginger"
    ],
    instructions: [
      "Marinate beef in soy sauce",
      "Heat wok until very hot",
      "Stir-fry beef until browned",
      "Add vegetables",
      "Cook until tender"
    ]
  }
]

Technical Requirements

1. Use Next.js 14 with App Router
2. Implement client-side search and filtering using React hooks
3. Create reusable components
4. Use proper TypeScript types (optional but preferred)
5. Implement proper error handling for non-existent recipes
6. Add loading states
7. Make the UI responsive using Tailwind CSS

Evaluation Criteria

1. Code Organization

   • Proper file structure
   • Component reusability
   • Clean code practices

2. Next.js Understanding

   • Correct usage of App Router
   • Proper implementation of dynamic routes
   • Effective use of client and server components

3. React Knowledge

   • Proper state management
   • Effective use of hooks
   • Component composition

4. UI/UX

   • Responsive design
   • Loading states
   • Error handling
   • User-friendly interface

5. Performance

   • Efficient filtering and search implementation
   • Proper use of client vs server components
   • No unnecessary re-renders