Understand the Folder Structure

FRONTEND MINI PROJECTS

└── Recipe-Finder

├── node_modules

├── public

├── src

│ ├── assets       → Stores images, icons, and static files

│ │ ├── cloceC1.png

│ │ ├── closeC.png

│ │ ├── react.svg

│ │ └── rice.jpg

│ ├── components                          → Reusable UI components

│ │ ├── RecipeFinder.jsx              → Handles recipe search & display

│ │ └── RecipeModal.jsx    → Shows recipe details in a pop-up

│ ├── App.css                           → Main styling for the App component

│ ├── App.jsx                          → Root component that controls the UI

│ ├── index.css                        → Global styles (applied to whole app)

│ └── main.jsx                           → Entry point (renders App into DOM)

├── .gitignore

├── eslint.config.js

├── index.html      → Main HTML file where app loads

├── package-lock.json

├── package.json

├── README.md

└── vite.config.js