Visit the Live App (If the link is not working, follow the instructions below to run it locally.)
The Recipe Management Application is a full-stack MERN project that allows users to:
- View, add, and edit recipes.
- Sort recipes into categories.
- Drag and drop recipes for better organization.
- Toggle between light mode & dark mode.
- Get a random recipe suggestion using the "Surprise Me" button.
├── client/ # Frontend (React + Vite)
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # React pages (Home, Recipe Details)
│ │ ├── styles/ # CSS Module styles
│ │ ├── api.js # API calls to backend
│ │ ├── App.jsx # Main React component
│ │ ├── main.jsx # React entry point
│ ├── public/ # Static assets
│ ├── index.html # Main HTML file
│ ├── vite.config.js # Vite configuration
├── server/ # Backend (Node.js + Express + MongoDB)
│ ├── models/ # Mongoose models
│ ├── routes/ # Express API routes
│ ├── middleware/ # Custom middleware
│ ├── server.js # Express server setup
│ ├── .env # Environment variables
│ ├── package.json # Backend dependencies
├── .gitignore # Git ignore file
├── README.md # Documentation
git clone https://github.com/your-username/recipe-management.git
cd recipe-managementcd server
npm install # Install backend dependencies
cp .env.example .env # Create and configure environment variables
npm run dev # Start backend on http://localhost:5000cd ../client
npm install # Install frontend dependencies
npm run dev # Start frontend on http://localhost:5173If the live demo is not working, the deployment may be down. Try running the project locally (instructions above).
npm run build
netlify deploy --prodnpm run build
vercel --prod- Fork the repository.
- Create a new branch (
git checkout -b feature-branch). - Commit your changes (
git commit -m "Added new feature"). - Push to the branch (
git push origin feature-branch). - Create a pull request.