Project Overview
Storied Treats is a cozy concept website that brings together two beloved pastimes: reading and cooking. This full-stack web application combines book clubs and cooking workshops into one comfortable digital space where literature lovers and food enthusiasts can discover their perfect pairing.
The Concept
The heart of Storied Treats lies in its personalized approach. Users take an interactive quiz that sorts them into their preferred reading-and-eating style, creating a tailored experience that resonates with their unique tastes. Based on their results, “Treaters” can:
- Subscribe to curated meal subscription boxes
- Browse blog content matched to their interests
- Discover recipes aligned with their literary preferences
- Join a community of like-minded book and food lovers
Design Process
This project was completely conceptualized, designed, and executed from the ground up:
Research & Planning
- Market research into food subscription services and book club communities
- User personas and journey mapping
- Competitive analysis of similar platforms
Design Phase
- Wireframing: Created low-fidelity wireframes to map user flows
- Visual Design: Developed the cozy, inviting aesthetic in Figma
- Illustrations: Custom base vector illustrations created in Adobe Illustrator & Photoshop for the painted look
Development Phase
- Built responsive front-end with semantic HTML and CSS
- Interactive quiz functionality with JavaScript
- Backend logic and data handling with PHP
- Content management for blogs and recipes
Technical Details
- Frontend: HTML5, CSS3, JavaScript
- Backend: PHP
- Design Tools: Figma, Adobe Illustrator, Adobe Photoshop
- Timeline: Summer 2024 (First-year project)
- Role: Solo designer and developer
Key Features
- Personality Quiz - Interactive sorting system that determines user preferences
- Subscription Service - Meal box options tailored to quiz results
- Content Library - Blogs and recipes organized by reading-eating style
- Custom Illustrations - Hand-crafted visuals that enhance the cozy atmosphere
The Challenge
The biggest challenge was creating an entire website concept from scratch within my first year of studying. This meant:
- Learning full-stack development while designing simultaneously
- Managing both creative and technical aspects independently
- Ensuring cohesive branding across all touchpoints
- Implementing a quiz system with dynamic content delivery
Working with guidance from lecturers, I navigated these challenges by breaking the project into manageable phases. And keep on keeping on, eventually you get there. Although, we had just shy over one month to do it all, so there is a bit of a time limit.
What I Learned
This project was a pivotal moment in my development journey. I learned that it is completely possible to make an entire website with a novel concept from scratch within one year of studying Devine.
Key takeaways:
- Full-stack development workflow from concept to deployment
- Balancing design aesthetics with functional code
- Time management and project planning skills
- The importance of user-centered design thinking
- PHP backend fundamentals and database integration
Reflections
Storied Treats represents not just a technical achievement, but a creative one. The project taught me that the best digital experiences come from understanding your users deeply and crafting every detail with intention and care.
And surprisingly (or not), I further learned that this course gives us support not just in terms of design and development, but also mentally. There are times when the going was so tough, but with the encouragement of lecturers and their unending support, I pulled through. We did it!
If I were to revisit this project, I would explore:
- User accounts and personalization features
- Community features like user reviews and recipe sharing
- Mobile app version for on-the-go access
- Integration with book recommendation APIs
- Just overall polish.
It was a blast!
Experience it yourself: Visit Storied Treats →