Inspiration

Struggling to get the support we needed for our schoolwork was tough – homework, assignments, presentations, you name it. The stress and frustration were real when we couldn't get the help we needed. That's when we had a lightbulb moment and came up with Skilify – a platform made by students, for students, with a special focus on tackling a big issue: unequal access to tutoring resources, especially for those from low-income backgrounds. Skilify isn't just about finding answers; it's about making sure every student has an equal chance to succeed. We're changing the game by providing a space where everyone can help each other out – sharing ideas, giving solutions, and offering guidance – the kind of stuff that can level the playing field. It's about empowerment and boosting confidence. Skilify isn't just a solution; it's a supportive community that's all about making sure every student, regardless of their background, has the opportunity to thrive academically.

What it does

Skilify is a platform for students to network, exchange skills, and tutor. A student whose strong suit is math could need help peer reviewing their essay, and in exchange for their math skills, someone else who needs math tutoring could help them out in writing. Skilify makes it easy for students to find others to exchange skills with and tutor, efficiently and at no cost.

How we built it

• Next.js - Framework, Frontend & Backend
• shadcn-ui - Modern UI Component Library
• next-auth - User Authentication
• Firebase Firestore - User Database (Authentication, User Data, Questions)
• Tailwind CSS - CSS Framework
• TypeScript - Typed JavaScript (Programming Language)
• Visual Studio Code - Primary IDE
• Github - Version Control & Collaboration
• Vercel - Deployment

Challenges

• Storing user data alongside next-auth - no documentation (should data be stored separately? In the same database?)
• Paginating data - useSWRInfinite wasn't documented well, and had some issues in implementation
• Securing authentication from bad actors
• Learning completely new framework and database systems
• Merging conflicted files, due to a change in formatting between different developers (different formatting led to numerous conflicts)
• Getting the authenticated user's id - next-auth likely doesn't endorse this use-case, and we had to write our own component & API route to retrieve the user's id See below "What we learned".
• Properly attaining user data
• Protecting routes from bad actors and spam - we found out it was possible to spam create buttons, and overload the database and API (we had to upgrade to the Firebase Blaze plan.)

Accomplishments

• Working project that looks clean and modern
• Easy to use for end users (Majority of Hackathon time)
• Proper and secure authentication

What we learned

• Using NextJS' app router and src folder
• Creating APIs using NextJS
• Storing documents in Firebase Firestore
• Implementing secure authentication and user data with next-auth
• React states, context and components
• next-auth has ways to modify the user object it returns - no need to guess the userid based on the email and name! Big oversight, knowing this could have saved a lot of time and staying within Firebase's free tier.

What's next

• Continue refining UX
• Authenticate and confidently identify accounts to protect users
• In House Networking System (Chat, Calling, etc...)
• Moderation System to keep platform friendly
• View questions and answers from users
• Better reputation system