profile-pic
RashidVisda

Recipe App

Tech Stack:
TailwindCSS
React
Framer Motion
Node.js
Vite
Git
Npm
Source CodeLive Demo
recipe-app-img

Spoonful — Recipe App

version vite license

Lightweight recipe & blog demo built with React, Vite and Tailwind CSS. The app demonstrates a responsive UI, client-side routing, animated components, and a static blog powered by JSON content in public/data.json.

Demo

Live demo: https://recipe-app-azure-gamma.vercel.app/

Table of Contents

What it does

Spoonful is a front-end demo application for browsing recipes and reading short blog-style articles. Key behaviors:

  • Client-side routing for pages and single-item views (react-router-dom).
  • Responsive layout and UI components built with Tailwind CSS.
  • Animation effects via framer-motion for smoother interactions.
  • Static blog data served from public/data.json for easy local editing.

Why its useful

  • Fast, minimal starter for food/recipe-related UI prototypes.
  • Demonstrates modern React patterns (Vite, hooks, context providers).
  • Good example for learning Tailwind + component composition.

Tech stack

  • React 19
  • Vite (dev server + build)
  • Tailwind CSS
  • Framer Motion (animations)
  • React Router DOM (routing)
  • Lucide React (icons)

Getting started

Prerequisites:

  • Node.js (recommended 18+)
  • npm (or yarn)

Quick start (from repository root):

# install
npm install

# start dev server
npm run dev

# open the app in the browser (Vite prints the URL, usually http://localhost:5173)

Build for production:

npm run build
npm run preview

Linting:

npm run lint

Project structure (high level)

  • src/ — React source code (components, pages, contexts, routes)
  • public/ — static assets served directly (images, data.json)
  • index.html — app shell (mount point #root)
  • package.json — scripts and dependencies

Notable files:

  • public/data.json — static blog posts and thumbnails used by the blog pages.
  • src/main.jsx — app entry; mounts React tree.
  • src/App.jsx — top-level routing and layout.

Data & content

The sample blog content lives in public/data.json. Edit that file to add or modify blog posts without touching React code. Thumbnails live in public/images/ and are referenced from JSON by relative paths (e.g. /images/blog-carbonara.jpeg).

Development scripts

  • npm run dev — start Vite dev server
  • npm run build — create production build
  • npm run preview — locally preview production build
  • npm run lint — run ESLint across source

Where to get help

  • Open an issue in this repository for bugs, feature requests, or questions.
  • If you need help with a development environment, include Node version and OS in your issue.

Maintainers & contributing

  • Maintainer: zidvsd (repository owner)

Contributing is welcome. If this repo contains a CONTRIBUTING.md, please follow it; otherwise:

  1. Fork the repository.
  2. Create a feature branch: git checkout -b feature/your-change.
  3. Make changes and add tests where appropriate.
  4. Run linting and verify the app builds.
  5. Open a pull request with a clear description of your changes.

Small tips for contributors:

  • Edit sample content in public/data.json to see blog list updates instantly.
  • Use the src/context providers when adding global state.

If you want, I can also:

  • add a CONTRIBUTING.md template,
  • add a GitHub Actions workflow for lint/build badges, or
  • update badges with CI/provider specifics.

Happy hacking! 🍽️