ANTicipated

ANTicipated - a curated learning for your career growth. Expand your skills through free online resources compiled to help maximize your chances of obtaining your dream job.

Comment

Inspiration

As a recent graduate, when viewing numerous job postings and repeatedly seeing valued skills that I did not have, my feeling of competence began to slide into doubt. ANTicipated aims to strengthen job seekers' confidence by rewarding them as they actively learn valuable skills relevant to their field of interest.

What it does

ANTicipated compiles free learning resources on valuable skills in a specific field to prepare job seekers for their dream job with help from an AI AssistANT that generates a Learning Recap.

How we built it

ANTicipated began as a design in Figma. Once, the main features of the application were decided upon the UI was developed using React with Vite. Then, the site was connected to Firebase for storage and the user sign-in and setup was developed. The site was deployed to Vercel through Github and I learned how to store API keys securely. Next, the logic for creating the user's daily learning journey was created by compiling web resources and YouTube videos. Finally, the learning recap was generated using Google's Built-In AI Summarizer.

Challenges we ran into

The main challenge I encountered was time. Other than this, obtaining the text from the site's stored in learning journey via web scraper was a bit frustrating. This was my first time building a web scraper and I quickly learned that while SPAs (Single Page Applications) are good for various reasons they are not very effective for web scraping. I also wanted a fun design for the user's learning journey, since this is the highlight of the application, and did so by drawing SVGs and in doing so realized how little I understand React's rendering logic.

Accomplishments that we're proud of

I am very happy with the learning journey! By creating the learning journey, I learned how to programmatically draw SVG paths with little ants ‘walking’ along the path. I programmatically perform search queries using Google and YouTube’s APIs. The results were generation of a personalized learning journey that encourages users to watch videos or visit web pages containing information relevant to their dream job.

What we learned

Managing state effectively is very important. While I had read about lifting state for React applications this was my first React project to require the need to lift state. Lifting state enables the child to call a parent’s function and pass information to the parent. By lifting state this maintains the unidirectional data flow.

What's next for ANTicipated

I hope to complete the few unfinished elements: progress circle (top of page), skills (ability to add/update/delete), and handling user sign-up and data management better. I also want to build a Chrome extension for this application that tracks time on the same pages in the learning journey, send summaries of the page's contents to the application for the learning recap, and enable users to take notes that would be included in the learning recap summarization.

Share this project:

Updates

posted an update —

Continued Progress

I completed the user's learning journey generation logic! I also fixed some styling issues in hero section and journey section. Now, the app displays the user's: video and web page of the day, learning journey, and all their skills.

Next, I will need to create the chrome extension and implement the user's daily learning recap, which is where the Built-in AI summarizer tool will be used.

Thoughts

There is much I can think of already that could be improved regarding the learning journey creation. For example, optimizing the search queries and perhaps adding more AI to determine if the search result is relevant for learning purposes. Also, styling things so they look nice as they are loading is something I would also like to improve in the future because right now there is a bit of a jump in the sizing of elements that doesn't make for a very clean UX.

Time to get some sleep before the final day before submission!

Log in or sign up for Devpost to join the conversation.

posted an update —

Continued Progress

I successfully completed the user setup part. Now, users can enter their dream jobs and current skills to create their account. Then, it displays all their skills at the bottom of the page. While doing this I learned more about how No-SQL functions using collections and documents.

I also began working on the code to generate the user's learning journey. This will retrieve the web pages and YouTube videos by using the Custom Search API and YouTube API. I learned how to add a server side to my Vercel app with Node.js. I began creating the API for the learning journey retrieval/creation.

Thoughts

I am learning not all API keys are made to be public. They have varying levels of security from public -> private. It is important to carefully be aware of where the keys will be injected: "Are they injected in client-side code or server-side?". Tomorrow, I have much I hope to accomplish: complete learning journey creation & begin the chrome extension.

Log in or sign up for Devpost to join the conversation.

posted an update —

Yesterday (Oct. 26)

I finished the frontend code and deployed it to Vercel. It was my first time using Vercel and I am very pleased at home simple it is to use. Then, I began adding a Google Sign-In.

Today

I finished adding the Sign-In along with the environment variables. This was my first time creating an environment variables document and setup. Now I know how to keep secrets, lol. I also added a setup page to my application and connected it to a Firestore database. This is my first time building a No-SQL database outside of school. It was so much fun to add the user's name to the application to welcome them.

Thoughts

I still have much to do and I hope to create and finish the skill objects and the code to generate the daily learning journey!

Log in or sign up for Devpost to join the conversation.

posted an update —

Design -> Implementation

I continued by implementing my design in code. I spent most of my time figuring out how to programmatically add some fancy lines for the course "journey". I also connected the code I developed today to a GitHub repository and learned how to add a license for my first time!

Thoughts

This was my first time programmatically creating SVG paths. I discovered the smooth curves that are easy to achieve in vector art applications (e.g. Inkscape), require much more effort and carefully calculated placements to produce programmatically. I almost completed the implementation of the UI and only have a bit left. Once I finish the UI, then I will begin working on the back-end!

Log in or sign up for Devpost to join the conversation.

posted an update —

Project Idea

ANTicipated compiles free learning resources on valuable skills in a specific field to prepare job seekers for their dream job with help from an AI AssistANT. As a recent graduate, when viewing numerous job postings and repeatedly seeing valued skills that I did not have, my feeling of competence began to slide into doubt. ANTicipated will strengthen job seekers confidence by rewarding them as they actively learn valuable skills relevant to their field of interest.

Design

I began working on designing and fleshing out the idea for ANTicipated more today while working in Figma. I find that working visually helps me refine abstract ideas into concrete concepts. While doing this I also began noticing some things I originally imagined including will have to be a future addition, to keep the amount of work reasonable. Designing this is fun and now I'm more excited to implement the code to turn it into a living application!

Thoughts

Although I joined Google's hackathon a bit late, I am excited to see how much I can learn in a week! This will be my first time building a Chrome extension and I am excited to share this with my friends.

Log in or sign up for Devpost to join the conversation.