✅
Responsive UI with modern design (Next.js + Tailwind)
Overview
Title:
MindfulPath
Project Type:
SaaS-style web app with a marketing site and logged-in dashboard.
Personal or Client:
Personal
Role:
Design & Development
Year:
2025
Duration:
12 weeks
Last Updated:
24 August 2025
Status:
On Hold
Github:
Demo:
Context
Description:
MindfulPath is a mental wellness and meditation platform aimed at busy professionals who want to improve focus, reduce stress, and build healthier habits. It provides guided meditations, breathing exercises, daily journaling, and expert articles on mindfulness.
Problem:
Many people want to practise meditation but struggle. Feeling like they don't have enough minutes in a day, starting but not maintaining a habit, or existing apps feel overwhelming, cluttered, or hidden behind complex paywalls. MindfulPath solves this by offering quick sessions, easy onboarding, clear pricing, and an approachable design.
Solution:
The project exists to help individuals - especially busy professionals - build a consitent mindfulness practise. By combing sleek design with practical tools like reminders, progress dashboards, and a resource rich blog, MindfulPath lowers the barrier to entry for meditation and mental wellness.
Audience:
👤
Busy professionals and students looking for a quick, effective way to reduce stress and improve focus
👤
Anyone new to mindfulness who needs an approachable, well-designed entry point without friction
Scope
Features
✅
Authentication flow (Sign up, Log in, Reset password — Supabase ready)
✅
Pricing page with tiered plans + FAQs
✅
Blog system with static posts + pagination
✅
About page (mission, story grid, values)
✅
Accessibility (labels, focus states, keyboard nav)
⚪
Supabase integration for live authentication
⚪
User dashboard (progress tracking, streaks, recommended sessions)
⚪
Blog CMS integration (dynamic posts, categories, search)
⚪
Contact/Support page with form + FAQ search
⚪
Dark mode + user preferences
⚪
Premium features (coaching, offline mode)
Pages
✅
Home (hero, features, CTAs)
✅
Pricing (plans, toggle, FAQs, support CTA)
✅
About (hero, story grid, values, team)
✅
Blog index (12 posts, pagination, filters ready)
✅
Blog post (slug) (layout ready to extend)
✅
Login / Signup (forms, animations, accessibility)
✅
Reset password (request + new password flow)
⚪
Dashboard (personalised data after login)
⚪
Profile/Settings (account management, preferences)
⚪
Contact/Support (form + knowledge base)
Tech Stack
HTML5
CSS3
JavaScript (ES6+)
TypeScript
React
Next.js
React Icons
Tailwind CSS
Framer Motion
Git & GitHub
RESTful APIs (static data simulated)
Vercel (deployment)
Accessibility (WCAG basics, alt text, semantic HTML)
Basic SEO (metadata, OpenGraph tags)
Responsive Design (mobile-first)
Component Architecture
Image Optimization (Next/Image)
Static Site Generation (SSG)
Mock Data & Dynamic Routing
Image Gallery
Login screen
Sign up screen
Reset password screen