Work In Progress Cooking

A recipe-sharing and meal-logging web app. Users sign in with Google, browse and search recipes, save their own custom recipes, and share food posts with photos in a public feed.

Features

• Google Sign-In — authentication via Google OAuth; no passwords to manage.
• Recipe search — search by name; results are served from MongoDB first, and any unseen dish is pulled from TheMealDB and cached into the database for future searches.
• Custom recipes — logged-in users can create their own recipes (name, photo, ingredient/measurement list, instructions) and mark them public or private. Owners can edit their own recipes later.
• Food post feed — a public feed where users post a photo, title, and description of something they made; posts show up for everyone in real time on the Feed page.
• Profiles — each user has a profile page listing the food posts and custom recipes they've shared. Private recipes are only visible to their owner.
• Homepage recommendations — the homepage surfaces a few random public recipes alongside the search bar.
• Image uploads — recipe and food-post photos are uploaded to Cloudinary.

Tech stack

Frontend: React 18, React Router, Vite, Mantine UI components, @react-oauth/google

Backend: Node.js, Express, MongoDB via Mongoose, express-session for login state, Socket.IO, Cloudinary SDK, Axios (for the TheMealDB integration)

Project structure

client/                React frontend (Vite)
  src/components/pages    Route-level pages (Skeleton/home, Feed, Search, Recipe, Profile)
  src/components/modules  Reusable UI pieces (FoodBlock, CustomRecipe, RecipeDisplay, NavBar, etc.)
server/                Express backend
  api.js                 REST endpoints (/api/...)
  auth.js                Google OAuth verification + session helpers
  server-socket.js        Socket.IO setup
  models/                 Mongoose schemas (User, FoodPost, Recipe)

Running locally

Requirements: Node 20.x, a MongoDB Atlas cluster, a Google OAuth Client ID, and a Cloudinary account (for image uploads).

1. Install dependencies:

   npm install
   

2. Create a .env file in the project root with:

   MONGO_SRV=<your MongoDB Atlas connection string>
   CLOUDINARY_CLOUD_NAME=<your Cloudinary cloud name>
   CLOUDINARY_API_KEY=<your Cloudinary API key>
   CLOUDINARY_API_SECRET=<your Cloudinary API secret>
   

   The database name is set separately in server/server.js (databaseName).

3. The Google OAuth Client ID is currently hardcoded in server/auth.js and client/src/components/modules/NavBar.jsx — update both if you're using your own Google Cloud project.

4. Start the app in two terminals:

   npm run dev      # Vite frontend, http://localhost:5173
   npm start        # Express backend (nodemon), http://localhost:3000
   

Vite proxies API requests to the Express server, so visiting http://localhost:5173 gives you the full app.

Other scripts

• npm run build — builds the frontend into client/dist for production.
• npm run preview — serves the production build locally.

License

MIT — see LICENSE. Built from the MIT WebLab class skeleton.