SkillForge - Our Journey
Inspiration
SkillForge was born out of our struggle to stay focused and motivated while planning our careers. We often created career roadmaps using Gemini, but we'd forget about them the next day and never really made progress. We wanted a tool that would help us track our roadmaps and tasks, keeping us on track and motivating us as we completed milestones. The goal was to create a space where we could build, view, and track our career paths while keeping engaged with real-time progress updates.
What it does
SkillForge is a platform designed to help users create, track, and complete career roadmaps. After signing in with Google authentication, users are taken to a dashboard where they can fill out a form to generate a personalized roadmap. The roadmap is displayed in a card format with details such as title, duration, the number of sections, and task completion progress.
Users can click on any roadmap card to view a detailed version of their roadmap, which includes a timeline of tasks. As they complete tasks, they can mark them as "completed," and the progress bar will update automatically.
On the profile page, users can manage their information, such as name, email, bio, username, goals, and level (beginner, intermediate, advanced). They can also delete roadmaps and log out when done.
How we built it
- Frontend & Backend: We used Next.js for both the frontend and backend, enabling a seamless development experience with server-side rendering and API routes for efficient data handling.
- Database: MongoDB was used for storing user information and roadmaps, ensuring smooth data management and retrieval.
- Authentication: We integrated Google Auth for secure login, allowing users to sign in easily.
- AI Integration: The Gemini API was used to generate personalized career roadmaps for users, adding an AI-powered touch to the platform.
- Progress Tracking: A custom progress tracking system was built to show users how many tasks they’ve completed within each roadmap, offering them a clear view of their journey.
- REST APIs: We developed the backend using REST APIs, allowing the frontend and backend to communicate efficiently and provide seamless user interactions.
Challenges we ran into
Parsing Data from Gemini: One of the biggest challenges we faced was parsing raw data from the Gemini API into a structured roadmap format that could be easily understood and interacted with by the users.
Creative UI for Roadmaps: Once the data was parsed, the next challenge was designing a user interface that displayed roadmaps and progress in a visually engaging and intuitive manner.
Google Auth Integration: While Google authentication worked smoothly for the most part, we had to ensure it was correctly integrated across different environments (development, production) and that user sessions were handled seamlessly.
Data Management: Handling multiple user roadmaps and ensuring the app could handle large data sets quickly and efficiently was another technical hurdle.
Accomplishments that we're proud of
- AI Integration: We successfully integrated the Gemini API to generate personalized roadmaps based on user input, adding a powerful AI-driven feature to the platform.
- Intuitive User Experience: We designed an intuitive and clean UI that makes it easy for users to track their progress and manage roadmaps.
- Data Modeling: We carefully designed our MongoDB database to ensure a smooth flow of the app. By structuring the database to efficiently handle user information, roadmaps, and progress tracking, we ensured that the data could be accessed and updated seamlessly. This design enables fast retrieval of roadmaps, smooth updates to progress, and a reliable storage system for all user interactions.
What we learned
Building SkillForge taught us several valuable lessons:
- AI and Data Parsing: We gained experience working with AI APIs, specifically the Gemini API, and learned how to parse complex data structures into user-friendly formats.
- Full-stack Development: We enhanced our skills in full-stack development, specifically in using Next.js for the front-end and MongoDB for the back-end.
- Authentication: Implementing Google Auth helped us understand how to manage secure user logins in real-time web apps.
- Progress Tracking: We learned how to design systems to track and update progress dynamically based on user interaction.
What's next for SkillForge
In the future, we plan to:
- Improve AI Suggestions: We aim to further refine the AI-based roadmap suggestions and make them even more personalized.
- Add Collaboration Features: We’re considering adding features that allow users to collaborate on roadmaps, share progress, and provide feedback.
- Mobile Optimization: SkillForge will be optimized for mobile devices to make it accessible to users on the go.
- Advanced Analytics: We plan to integrate advanced analytics to help users track their career development more effectively.
SkillForge is just the beginning, and we are excited to continue building and improving the platform to help users stay motivated and on track with their career goals.
Built With
- gemini
- github
- google-auth
- mongodb
- nextjs
- typescript
- vercel
Log in or sign up for Devpost to join the conversation.