Recipebox

A full-stack recipe management app with a Vue 3 frontend, auth workflows, dashboard summaries, and recipe CRUD flows integrated to backend APIs.

Timeline

Feb 12, 2026 - Mar 27, 2026

Role

Fullstack Development

Focus

Auth, dashboard overview, and recipe CRUD flows

Primary Stack

Vue.js

TypeScript

Tailwind CSS

Pinia

TanStack Query

Zod

Golang

PostgreSQL

Redis

Swagger

Jwt

Fullstack DevelopmentFeb 12, 2026 - Mar 27, 2026

Case overview

What this project is about

Built the product from both the frontend and backend perspective, covering authentication, dashboard data flow, and recipe management inside a structured app workspace.

Implemented a feature-first frontend architecture with Vue 3, Pinia, TanStack Query, and Zod so API integration, session handling, and form validation stay consistent and maintainable.

Brief

Recipebox is a recipe management product that combines a public landing page with an authenticated app workspace for organizing recipes, checking dashboard summaries, and managing account access.

I handled the work as a full-stack build, so the frontend experience and the backend-connected flows were shaped together instead of being treated as separate handoffs.

System Design

The frontend is organized with a feature-first structure on top of Vue 3, Vue Router, and Pinia, while TanStack Query handles async server state for auth, dashboard, and recipe endpoints.

Zod is used to validate payloads and API responses so integration errors are caught early, and the app can still run in a safe mock mode when the API base URL is not configured during development.

Auth flows cover login, register, email verification, forgot password, reset password, refresh, logout, and current-user recovery.Workspace flows include dashboard overview plus create, read, update, and delete operations for recipes.

Outcome

Recipebox now has a solid application foundation with clear routing, protected areas, reusable service layers, and frontend-backend contracts that are easier to extend.

The current structure is ready to grow into deeper meal planning, shopping list, and profile management features without having to rework the core architecture.