Flavoriz is a static food blog application built with Vue 3, TailwindCSS, and Vuetify. It showcases recipes and culinary articles using a modern user interface, dynamic routing, and scroll-based animations. The app fetches all its data from locally simulated dummy JSON APIs, making it ideal for frontend prototyping.
This project was created to simulate a recipe-based food blog using Vue 3 and TailwindCSS. It demonstrates how to build a fully static frontend application with structured content, UI components, and dynamic routing—all without relying on a backend or CMS.
- Present recipes and articles using clean, scroll-friendly UI
- Practice building SPA navigation with slug-based detail pages
- Use TailwindCSS utility-first classes to develop responsive layouts
- Demonstrate layout and routing structures that reflect real-world frontend architecture
- Designing reusable card components for articles and recipes
- Mapping static JSON data into dynamic routes using slugs
- Creating a consistent layout using Vuetify + Tailwind without conflict
- Ensuring responsiveness across multiple screen sizes
The project was structured around Vue 3 with Vue Router to implement single-page navigation. Recipes and blog articles are stored in static JSON files and rendered using dynamic routes. Vuetify components were combined with Tailwind utility classes to provide both style consistency and layout flexibility. AOS was integrated for scroll animations, while Font Awesome icons enhance UI accessibility.
- ✨ Modern Landing Page – Highlights featured recipes and culinary topics.
- 📚 Blog & Recipe Listings – Includes listing and detail views for blog articles and recipes.
- 🔁 SPA Navigation – Seamless routing using
vue-router. - 🎞️ Scroll Animations – Powered by AOS for smooth entrance effects.
- 🔐 Login & Register Forms (UI Only) – Demo forms with basic validation.
- 🔗 Slug-Based Dynamic Routing – Clean URLs for blog and recipe detail pages.
- 📱 Responsive Design – Tailored for all devices with Tailwind & Vuetify Grid.
- 🧩 Font Awesome Integration – Rich iconography for UI enhancement.
- Vue 3
- TailwindCSS
- Vuetify 3
- Vue Router
- AOS (Animate on Scroll)
- Font Awesome Icons
- Vue Toastification
| Page | Path | Description |
|---|---|---|
| Home | / |
Main landing page with featured content |
| Recipes | /recipe |
Lists all recipes |
| Recipe Detail | /recipe/:slug |
Detailed view for each recipe |
| Blog | /blog |
Lists all blog articles |
| Blog Detail | /blog/:slug |
Detailed view for each article |
| Sign In | /signin |
Demo login page |
| Sign Up | /signup |
Demo registration page |
| Not Found | * |
404 fallback page |
- Clone this repository
git clone https://github.com/yourusername/flavoriz-foodblog.git
cd flavoriz-foodblog- Install dependencies
npm install- Run the development server
npm run dev- Build for production
npm run build- Preview the build output
npm run preview- Blog and recipe data is loaded from local static JSON.
- Login and Register forms are for UI demonstration only.
- AOS provides scroll animations.
- Routing uses clean slugs for content pages.
- Medium: @foemry
- Instagram: @oemryfiqri
- Website: https://ahmadfiqrioemry.com
- LinkedIn: linkedin.com/in/ahmadfiqrioemry
This project is licensed under the MIT License – feel free to use and modify.
