SkillUp & Smile

Inspiration

Our inspiration came from a simple but powerful observation: for young people today, success is a blend of hard skills and mental resilience. Too often, resources for learning practical skills (like coding) are separate from tools for mental well-being. We were inspired to bridge this gap and create a single, accessible platform where a user could learn to build a website and also learn to manage stress-empowering them to not just succeed, but to thrive.

What it does

SkillUp & Smile is a holistic web platform designed to empower youth. It functions on two core pillars:

SkillUp: A dynamic library of free, bite-sized courses on essential, real-world skills like programming and financial literacy. The content is fetched live from our backend, making it easily expandable.
Smile: A private, secure space for mental wellness. It features a mood tracker and our unique "Smart Suggestions" engine. This feature analyzes a user's logged mood patterns and proactively displays personalized, supportive messages on their dashboard, creating a caring and responsive experience without relying on external AI APIs.

The platform includes a full user authentication system, allowing users to track their progress and maintain their private wellness journal.

How we built it

We adopted a modern, rapid-development tech stack to build a robust MVP within the hackathon's timeframe.

Frontend: We chose Next.js (React) for its performance, server-side rendering capabilities, and the intuitive App Router. Styling was handled rapidly with Tailwind CSS, allowing us to build a beautiful, responsive UI without writing custom CSS.
Backend & Database: Supabase was the heart of our project. As a Backend-as-a-Service, it provided us with a PostgreSQL database, a full authentication system, and instant APIs out-of-the-box. This saved us days of backend development.
Deployment: We used Vercel for its seamless, zero-configuration integration with Next.js and GitHub. Every git push automatically triggered a new deployment, allowing for continuous integration and testing.
AI-Assisted Prototyping: We leveraged AI tools like ChatGPT to bootstrap initial UI components, which we then refined and integrated, significantly speeding up our frontend development process.

Challenges we ran into

Deployment Configuration: Our biggest initial challenge was a deployment failure on Vercel due to a supabaseKey is required error. This taught us a crucial lesson about managing environment variables and the difference between a local .env.local file and the production environment settings on the deployment platform.
Database Security: When we first connected our frontend to the database, no data appeared. We quickly diagnosed this as a security feature, not a bug. We had to dive into Supabase's Row Level Security (RLS) and write specific policies to grant read-access for public data and secure insert/select access for authenticated users' private data.
Email Confirmation Workflow: The default email confirmation feature was delaying our testing. We made a pragmatic decision to temporarily disable it during heavy development and then re-enabled it for the final product, learning how to manage development friction while still delivering a secure final product.

Accomplishments that we're proud of

Building a Full-Stack App: We successfully built and deployed a complete, full-stack application from scratch in a very short amount of time.
Implementing Secure Auth & RLS: We are incredibly proud of implementing a secure authentication system and correctly configuring Row Level Security policies. This ensures user data is truly private and protected.
The "Smart Suggestions" Feature: Creating a feature that adds a layer of intelligence and empathy without external AI APIs was a major win. It shows that thoughtful logic can create a powerful, personalized user experience.
Zero to Live: Taking an idea from a concept to a live, globally accessible web application on Vercel is our biggest accomplishment.

What we learned

This project was a tremendous learning experience. We learned the immense power of modern BaaS platforms like Supabase to accelerate development. We gained hands-on experience with crucial, real-world concepts like environment variable management and database security policies. Most importantly, we learned how to work as a cohesive team, diagnosing and solving problems under pressure to deliver a functional, polished product.

What's next for SkillUp & Smile

This is just the beginning. We envision a bright future for SkillUp & Smile, with plans to:

Expand the Content Library: Add more courses and wellness exercises.
Enhance Gamification: Introduce badges, streaks, and a more robust points system to boost user engagement.
Build Community Features: Allow users to form study groups or participate in moderated wellness discussions.
Go Open-Source: We plan to open-source the project to allow the community to contribute and help us grow our mission.