Recipie

Recipie is a full-stack web application that allows users to create, view, and manage cooking recipes. The project is built as a desktop-first MVP with a production-ready backend and secure authentication.

⸻

Features • User authentication (signup, login, logout) • Create, edit, and delete recipes • Image upload support using Cloudinary • Optional YouTube video embedding for recipes • View all recipes • View recipes created by the logged-in user • Authorization to ensure only owners can modify their recipes • Responsive UI (desktop-first MVP)

⸻

Tech Stack

Frontend • React (Vite) • React Router • Fetch API • CSS • Deployed on Vercel

Backend • Node.js • Express • MongoDB with Mongoose • JWT authentication using httpOnly cookies • Cloudinary for image uploads • Deployed on Render

⸻

Authentication

Authentication is implemented using JWT stored in secure, httpOnly cookies. Authorization is enforced on protected routes to ensure users can only modify their own data.

⸻

Mobile Authentication Limitation

This MVP uses cross-domain cookie-based authentication: • Frontend is hosted on Vercel • Backend is hosted on Render

Modern mobile browsers block third-party cookies by default. As a result: • Desktop browsers authenticate correctly • Mobile browsers do not persist authentication

This is expected browser behaviour and not a bug.

Planned post-MVP solution: • Proxy backend requests through the frontend (same-site) • Or deploy frontend and backend under the same domain

⸻

Live Deployment

Frontend:https://recipie-app-lake.vercel.app Backend:https://recipieapp.onrender.com

⸻

Local Development Setup

Clone the repository git clone https://github.com/your-username/recipie.git cd recipie

Backend Setup cd Backend npm install

Create a .env file: MONGO_URL=your_mongodb_connection_string JWT_SECRET=your_jwt_secret CLOUDINARY_CLOUD_NAME=your_cloud_name CLOUDINARY_API_KEY=your_api_key CLOUDINARY_API_SECRET=your_api_secret

Start the backend server: node index.js

⸻

Frontend Setup

cd Frontend npm install

Create a .env file: VITE_API_URL=http://localhost:5001 Start the frontend: npm run dev The frontend runs on http://localhost:5173.

Future Improvements • Same-site authentication for mobile support • User profile page • Recipe search and filtering • Pagination • Improved SEO and performance • UI enhancements

⸻

Author

Puneeth J Computer Science Engineering student Built as a full-stack learning and portfolio project

---

License

This project is intended for educational and learning purposes.