Foodie is an elegant, highly polished React recipe application mimicking a production-ready mobile app. It satisfies all final project objectives, specifically designed to display beautifully on Snack Expo, Expo Go, and standard web preview containers.
- Written By: Brian McCarthy
- Project Name: Foodie App
- Status: Complete & Peer-Review Ready
- TypeScript (TSX): Full strong typing of state interfaces, callbacks, categories, and ingredients.
- HTML5: Modular base container (
index.html). - CSS3: Responsive utility-first layouts powered by Tailwind CSS.
- React 19: State hooks (
useState,useEffect), components, modular architecture. - Vite: High-performance local development build system.
- Tailwind CSS v4: Fluent design styles, responsive grids (
grid-cols-2), layout spacing, flexbox, and transitions. - motion/react (from Framer Motion v12): Spring physics splash transitions, expanding rings, and stagger animations.
- Lucide React: Modern standard iconography for metric measurements, hearts, arrows, and cooking tools.
- HTML5 Web Storage (localStorage): Local data persistence for custom user recipes and chosen favorites.
├── index.html # Primary application base wrapper with modern clean styling
├── metadata.json # Standard application configuration (Foodie details)
├── package.json # Package management for dependencies
├── tsconfig.json # TypeScript compiler configurations
├── vite.config.ts # Vite configuration (path aliases & server binds)
├── README.md # This comprehensive lab guide
└── src/
├── App.tsx # Global state engine, handler callbacks, and screen coordinate routing
├── data.ts # Preset recipes database supporting 10 distinct horizontal categories
├── index.css # Import fonts (Inter, Space Grotesk, JetBrains Mono) & Tailwind theme layout
├── main.tsx # Virtual DOM initiation hook
├── types.ts # Strongly typed TypeScript interfaces (Recipe, Category, Ingredient)
└── components/
├── PhoneFrame.tsx # High-fidelity iOS/Android container simulator with live UTC clock and status bars
├── WelcomeScreen.tsx # Concentric ring animated splash screen transitioning to Home
├── HomeScreen.tsx # Category grids, searching bar, and CTA button panels
├── RecipeDetailScreen.tsx # Interactive cook details display with ingredient cross-offs
├── FavoriteScreen.tsx # Persistent user favorites layout with back navigators
└── RecipesFormScreen.tsx # Edit/Add form layout with smart preset picture buttons- Category Filter Engine (
activeCategory): Renders at least 10 horizontal food categories. Selecting any category filters the active cards dynamically based on matching identifiers. - Favoriting Toggle System (
handleToggleFavorite): Maintains a persistent string array of favorited keys. A filled or outlined heart icon shifts state instantly and persists into the browser's safelocalStorage. - Recipe Creator Form (
handleSaveRecipe): Dynamic multi-input form supporting user inputs for name, preset/custom photos, servings, cal limits, and sub-ingredient lists. It performs validation and pushes custom creations tolocalStorage. - Interactive Cook Utility: In the recipe details page, users can click ingredients to cross them off in real-time as they go, simplifying practical cooking lists.
- Splash Screen: Start at the animated Orange logo. It automatically pulses and forwards you to the Home Screen after 2.5 seconds.
- Horizontal Browse: Swipe or slide the horizontal row at the top. You can choose from 10 distinct categories (Chicken, Beef, Dessert, Pasta, Seafood, Vegetarian, Pork, Salad, Breakfast, Soup) or tap "My Food".
- Select Category: Click any category button; the recipe cards below update instantly.
- Check Recipe Details: Select a recipe card to view the recipe hero image, list of ingredients, step-by-step instructions, preparation coordinates, serving sizes, calories, and difficulty level.
- Favorite a Recipe: Tap the Heart icon in the upper-right corner of any recipe detailed view. It toggles into a crimson color and saves the recipe into the "My Favorites" list.
- Manage Favorites: From the top-right header corner of the main dashboard, tap the Heart icon list shortcut to view all saved items. Clicking any item opens its full cooking guide or lets you remove it.
- Write Your Own Recipes: Tap on the "My Food" horizontal browse category card, then tap "+ Add New Recipe". Write your dish details, select one of our premium imagery card presets or paste a custom photographic link, and tap Save Recipe. It instantly updates your private custom dish cards.
- Edit / Delete Custom Dishes: In the "My Food" section, custom recipes include functional pencil (Edit) and trash can (Delete) icons to let you modify or delete dishes.
- Simulator Frame Controls: The simulator lets you toggle between Mobile Canvas (beautiful smartphone outline) and Full Layout (standard widescreen desktop layout) at the top of the browser!
- Q1. Imported to Snack Expo successfully? Yes. This repository contains correct static folder configurations and source paths conforming neatly to imported git packages or rendering directly on Snack Expo containers.
- Q2. At least 10 recipe categories displayed horizontally? Yes! The horizontal scrollbar renders 10 initial preset directories (Chicken, Beef, Dessert, Pasta, Seafood, Vegetarian, Pork, Salad, Breakfast, Soup) and the user's "My Food" panel.
- Q3. Detailed recipe selects display 6 elements? Yes! Every detailed viewport shows: (1) Ingredients, (2) Instructions, (3) Prep Time, (4) Number of Servings, (5) Calories, and (6) Difficulty Level.
- Q4. Loads specific recipes per category clicked? Yes, selecting active tabs triggers react state callbacks updating card rendering instantly.
- Q5. Functional Heart favorite toggling? Yes. The button acts in a dual toggle state with instant user interface feedback.
- Q6. Displaying items correctly inside Favorites section? Yes, items correctly load and show in a custom list, persistent across page refreshes.
- Q7. Category listing houses "My Food" + "Add New Recipe" options? Yes, selecting the "My Food" category triggers a beautiful "+ Add New Recipe" action button card.
- Q8. New Recipe Inputs supported? Yes, the form covers Name, Image Selection (including neat custom photo presets), dynamic ingredient quantities, instructions, and an active "Save Recipe" buttons.
- Q9. Created recipes show under "My Recipes"? Yes, additions saved instantly render inside the custom cards grid.
- Q10. Clicking user custom recipes displays full detail? Yes, custom items click seamlessly into full detailed views highlighting name, pictures, measurements, and cooking instructions.
- Q11. Edit and Delete buttons on user recipes work? Yes, fully functional. Users can rewrite names, swap ingredients list, update instructions, or delete items.
- Q12. Functional Back buttons present? Yes, back buttons are prominently fixed to headers in detail, favorites, or form views to ensure simple navigation.
Created and written by Brian McCarthy.