Inspiration
Productivity can become a chore, particularly when there’s a lot to accomplish and so many distractions. The challenge was to find something that could make productivity something enjoyable, relaxing, and rewarding, almost like tending to a garden. This gave us the idea for FocusField, an application that allows your growth to actually flourish right before your eyes.
How it works
FocusField is a productivity application that has a gamer-like interface and helps people remain focused by undertaking tasks to nurture virtual plants.
The completion of each task brings growth to your plants, while your streaks demonstrate your daily progress.
Additionally, it has an AI integration that helps to analyze your work patterns, offering personalized suggestions for your focus, including how to balance your tasks optimally, along with motivational insights that can help you remain regular without burnout.
How we built it
Frontend: Built using Next.js (React + TypeScript) for optimized performance.
Designing: Built using Tailwind CSS for its clean, calming, and smooth animation design.
Backend: Supabase handles auth, db, and storage.
AI: The custom AI component evaluates task information and streaks to provide personalized tips for maximizing focus.
Design: It was a soft pastel-colored theme, smooth animations, and a natural-looking UI.
Challenges we ran into
Establishing Supabase Row Level Security correctly for secure user data access.
Syncing real-time updates for the tasks and plant growth system.
Creating a UI that is both playful and minimalistic.
Incorporating logic from AI that feels truly useful and not repetitive.
Accomplishments that we are proud of
Creating a fully functioning productivity application, including support for authentication, streaks, and growth charts.
Connecting Supabase to Live Task and Garden Information.
Building a peaceful experience that aims to encourage users instead of pushing them.
Incorporating AI suggestions that adjust according to each user’s habits.
???? What we learned
How to integrate the principles of gamification and mindfulness to make productivity enjoyable.
The importance of clean database design for scalable apps.
Ways through which AI can allow productivity to be personalized.
Collaboration and Full Stack Development using Next.js and Supabase.
???? The future for Focus Field
Include a clever AI gardening helper that adjusts difficulty levels, providing encouragement along the way.
Establish a ‘community garden’ that allows teams to plant and harvest for collective motivation.
Add functionality for mood tracking and time-of-day productivity analysis to the AI coach. Release a mobile version with offline mode and push notifications for streak reminders.
Built With
- framer-motion
- next.js
- openai
- react
- supabase
- tailwindcss
- typescript
Log in or sign up for Devpost to join the conversation.