UI/UX Designer · 2024
Cook It Yourself (CIY)
A social media-inspired platform to discover and share food recipes
Overview
What Cook It Yourself (CIY) does.
Cook It Yourself (CIY) is a web application that allows users to explore, share, and interact with food recipes, combining social media features with culinary inspiration.
- Role
- UI/UX Designer
- Team
- School project with friends
- Duration
- 2024
- Responsive
- Yes
The challenge
Many recipe websites are cluttered and lack social engagement. Users wanted a platform where discovering and sharing recipes is fun, interactive, and community-driven.
Project goals
- Design a visually appealing and intuitive UI for recipe browsing and sharing
- Enable social interactions like liking, commenting, and sharing recipes
- Make navigation and search seamless
- Highlight community-driven content and trending recipes
Process
How Cook It Yourself (CIY) came together.
User Research
Conducted surveys among classmates and food enthusiasts to understand their preferences and pain points in recipe websites.
Wireframing & Prototyping
Created wireframes and interactive prototypes in Figma to visualize user flows and UI components.
Frontend Development
Developed responsive and interactive UI using React, Next.js, Tailwind CSS, and Shadcn UI components.
Integration & Testing
Worked with the backend team to integrate APIs and tested the platform for usability, responsiveness, and cross-browser compatibility.
Key features
- User-friendly recipe browsing and search
- Social interactions: likes, comments, shares
- Trending and community-driven content
- Responsive design for mobile and desktop
- Intuitive recipe categorization and filtering
Impact
- Increased engagement among classmates during the school project
- Provided a platform to share personal recipes in a fun way
- Helped improve team collaboration and project management skills
Lessons learned
- Balancing aesthetic design with usability
- Effective UI/UX practices for social and content-driven apps
- Collaborating with a small team to achieve project goals
Tools & technologies
What it was built with.
- React
- Next.js
- Express
- Tailwind CSS
- Shadcn UI
More work
Related case studies.
01Full Stack DeveloperColor design tool · 2024
Tonalist Studio
A next-generation color design tool for the modern web
- Next.js
- Tailwind CSS
- Shadcn UI
- Framer Motion
04Full Stack DeveloperDocument builder · 2025
BuildErDocs
Drag-and-drop form builder that generates Markdown, PDF, Word, HTML, and JSON documents
- React
- Vite
- TypeScript
- Tailwind CSS