SquirrelMentor

Hero Section
Problem Statement
Dynamic map with Google Places API
Card elements

Inspiration

Do you remember the times when you were first introduced to specific skills that are now staples in our adult lives? Think makeup, fashion, and sex education–whether it be through having “the talk” with your parents or going shopping for makeup for the first time. This made us realize how complicated it is to explore this aspect of development without a mentor figure, which is often common for teens, especially those without a nurturing mother figure. We wanted to address this issue head on by helping to navigate female and nonbinary teens who were exploring themselves. We felt that this was especially important given our personal experiences as well as the logistics of 37% of kids in Tennessee living in single-parent households. Fun fact: we chose a squirrel as our mascot to represent our school, Vanderbilt.

What it does

Oftentimes when people don’t have figures in their lives to help them navigate through skills in development, they will go online to develop these skills. However, searching online can be overwhelming when navigating certain skills such as hygiene, health and fitness, makeup and skincare, as well as fashion especially given the large amounts of misleading information. Squirrel mentor, Nuts, helps girls navigate those skills by introducing a list of helpful resources that she wishes she knew about earlier (showcasing our favorite resources). This website is a special place designed especially for young female and nonbinary teens and their supportive single fathers. Dive into our resources and join our community of learners and dreamers!

How we built it

HTML, CSS, Javascript
Next.js, Typescript, TailwindCSS
Google Map and Places API
Replit and Github
Transitioning from Replit to GitHub has significantly enhanced our collaboration and version control capabilities. While Replit allowed us to rapidly prototype and establish the foundational structure and styling of our homepage and the five topic-specific pages (fashion, health, hygiene, makeup, and sexEd), GitHub has facilitated a more scalable and organized development process. We have now adopted Next.js and TypeScript for their robust features, which optimize both the development experience and the performance of our application. Next.js, a React framework, offers us server-side rendering and static site generation, which are crucial for SEO and performance. TypeScript introduces static typing, making our code more predictable and easier to debug. Our CSS has evolved to use modules, ensuring styles are scoped to components, thus preventing unintended clashes and promoting reusability. For dynamic features like our neighborhood map search, which personalizes results for each topic, we have moved to a more modular JavaScript structure. This structure improves maintainability and testability of our code.

Challenges we ran into

Given that team members had differing levels of experience with frontend languages, team members were unfamiliar with languages such as HTML, JS, and CSS, learning as they went and hence struggled a bit when trying to implement features (such as properly adding a logo in the nav bar) and debugging code. However, team members were able to fill in for each other when one was struggling and hence were ultimately able to resolve any issues. To provide makeup recommendations that are both cost-effective and well-received, we attempted to integrate an API that could scrape the web for shopping search results, but ran into bugs with the implementation due to an overall lack of familiarity with APIs. We also designed a gallery using Bootstrap to display various resources, but ended up going with the idea of cards instead of an animated gallery.

Accomplishments that we're proud of

This was one team member’s first ever hackathon and website made, so she was very proud to have been able to contribute to the creation of something that she never thought she was capable of creating. Additionally, team members were able to pick up on new frontend languages in different degrees (HTML, CSS, and JS). Given the circumstances of having large school-wide events during this hackathon, as well as a heavy courseload, we are proud to have come together to create such an aesthetically pleasing website during a short period of time. There were aspects that we didn’t use, such as a gallery designed with Bootstrap, which we were also proud of having created.

What we learned

All team members learned very different things, given the varying amounts of experience. For example, one member who had never created a website and had very little exposure to HTML learned more about the process of frontend development. Many team members learned how to use Replit for the first time and how to refine a website, as well as how to use external libraries from scratch. It was also intriguing diving into APIs, particularly to query for shopping results, as we were introduced to a new world of HTTPS requests, querying, and related concepts.

What's next for SquirrelMentor

Given that the team members in our group have plans on living together next year in a community-service based house (where a community service project is required), we plan on continuing the mission of squirrel mentor, which is to empower girls and nonbinary teens in our community in Nashville. We intend on creating our own content in the forms of blogs and videos and even adding a pre-professional aspect (or supporting underrepresented girls and nonbinary teens pre professionally) to our project.