[Issue 2146] Replace Missing Content in the Optimizing Your React Node Project

[daaimah123]

📝 Description

The previous code reference (a Gist) was no longer available. This PR provides a new, self-contained, and minimal Node.js + React (Vite) project that fulfills all the learning objectives of the lesson, focusing on caching strategies and React rendering optimizations.

🔂 Changes Made

• Updated the lesson's topic outline to reflect the new file paths, build commands (npm run build outputs to dist), and server commands (npm run server).
• Adjusted instructions for serving built assets to point to the dist directory.
• Clarified React optimization techniques to emphasize React.memo for functional components.
• Updated the lesson's topic outline to reflect the new file paths, build commands (npm run build outputs to dist), and server commands (npm run server).
• Adjusted instructions for serving built assets to point to the dist directory.
• Clarified React optimization techniques to emphasize React.memo for functional components.

⚙️ Related Issue

Issue Number: #2146

🍏 Type of Change

• New feature (providing new, functional lesson code)
• Refactoring (restructuring the project, removing unnecessary dependencies)
• Documentation update (updates to the topic outline)

🎁 Acceptance Criteria

• The React application successfully builds using npm run build without errors.
• The React application runs correctly in development mode using npm run dev (on http://localhost:3000).
• The Node.js API server starts successfully using npm run server (on http://localhost:3001).
• The React application can successfully fetch event data from the Node.js API server.
• The client-side caching functionality (toggle and clear cache) in EventfulSearch works as expected.
• The server-side caching functionality in eventful-api-server.js is observable (initial delay, then faster responses).
• The EventCard component logs its re-renders to the console.
• When EventCard is replaced with OptimizedEventCard in EventfulSearch.tsx, the console logs demonstrate reduced re-renders for unchanged components.
• The updated topic outline accurately reflects the new project structure, commands, and file paths.

🧪 How to test or what to evaluate

1. Clone the project: Ensure you have the latest code from this PR.
2. Install dependencies: Navigate to the project root and run npm install.
3. Start the API Server: In your terminal, run npm run server.
   • Verify that the server starts successfully and logs "Event API server running on port 3001".
4. Start the React App: In a separate terminal, run npm run dev.
   • Verify that the Vite development server starts successfully and the React app is accessible at http://localhost:3000.
   • Confirm that the "Event Search" component is displayed.
5. Test Search and Caching:
   • Open your browser's developer tools (Console and Network tabs).
   • Perform a search (e.g., keywords: "music", location: "new"). Observe the initial network request delay (1-2 seconds) and the source: "api" in the search info.
   • Perform the same search again. Observe if the response is faster and source: "server-cache" is indicated.
   • Toggle the "Enable client-side caching" checkbox. Perform a search, then repeat it. Observe if the response is instant and source: "client-cache" is indicated.
   • Click "Clear Cache" and re-test client-side caching.
6. Evaluate React Optimization:
   • In your browser's developer tools, go to the Console tab.
   • Perform a search. Observe the console.log messages from EventCard indicating each card's render.
   • Modify src/components/EventfulSearch.tsx:
     • Import OptimizedEventCard at the top: import OptimizedEventCard from "./OptimizedEventCard";
     • Replace the line <EventCard key={event.id} event={event} /> with <OptimizedEventCard key={event.id} event={event} />.
   • Save the file (Vite will hot-reload).
   • Perform a search again. Observe the console.log messages. You should see fewer re-renders for OptimizedEventCard compared to EventCard when the props haven't changed (e.g., if you search for the same thing multiple times, only the first render should log for each card).
7. Test Build Process:
   • In your terminal, run npm run build.
   • Verify that the build completes successfully without errors and creates a dist/ directory in the project root.
   • You can optionally run npm run preview to serve the production build and verify it functions correctly.
8. Review Topic Outline:
   • Carefully read through the updated topic outline provided in the lesson content. Ensure that all commands, file paths (dist instead of build, server/eventful-api-server.js), and explanations align with the new code.