Smart Recipe Finder – Discover & Filter Recipes by Ingredients
- coding z2m
- Mar 31
- 2 min read
Updated: Apr 1
Smart Recipe Finder is a user-friendly React application designed to help users discover recipes based on available ingredients. It features a search bar for quick recipe lookup and an ingredient selection system that dynamically filters recipes. The app utilizes custom React hooks to manage search functionality (useFilteredRecipes) and ingredient availability (useIngredients). A visually appealing UI, powered by Tailwind CSS and React components, enhances the user experience. Features include a responsive banner, interactive recipe cards, and a detailed recipe view with images and ingredient lists. Perfect for home cooks looking for meal inspiration with what they already have in their kitchen!
Technologies Used:
Frontend: Vite + React 18, React Router, TailwindCSS.
Hosting: Vercel Hosting.
Resources:
Install Plugins: Tailwind CSS IntelliSense, es7+ (ES7+ React/Redux/React-Native snippets)
Browser: Use the latest version of Google Chrome/Microsoft Edge.
Version Control: GitHub
https://color.adobe.com/explore Vercel: Build and deploy the best web experiences with the Frontend Cloud
Setting Up the Vite + React Project
Create a React Project: Create a project folder "React" and open it in VS Code
Let’s start by setting up Vite with React. Check the following URL's: Scaffolding Your First Vite Project Installing Tailwind CSS as a Vite plugin to integrate it with React Installing the necessary dependencies: > npm install react-icons react-router-dom
Delete "App.CSS" & Remove everything from index.css files.
> Run your build process with "npm run dev" -> http://localhost:5173/
NOTE: Encapsulate the 'App' component with 'BrowserRouter' in the 'main.jsx'
createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>,
)Creating your own components...
Deploying code (GitHub Commands):
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/codingZ2M/dummy.git
git push -u origin main
Vercel Deployment:
Note: Vercel serves static files but doesn’t automatically handle client-side routing in Vite + React Router apps. Solution: You need to tell Vercel to redirect all requests to index.html, allowing React Router to handle routing.
Create a vercel.json file in your project root (if it doesn’t exist already).
Add the following configuration: {
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
Kommentare