Stellar Explorers

Inspiration

The idea for Stellar Explorers came from two main sources: the UniCS challenge, which asked us to make a site for kids to learn, and the cosmic theme of Unihack. We thought, why not combine the two? So, we did just that. Stellar Explorers is the result—a cool place where kids can learn about space while having fun.

Learning Journey

During the making of Stellar Explorers, we picked up a lot of new things. We explored how kids learn and figured out ways to explain tricky topics in simple ways. It was all about making learning about space exciting and easy. So, we learned a bunch about teaching and making space fun.

How we built it

Building Stellar Explorers was a commitment. We delved into the latest tech like TypeScript, Next.js, Tailwind CSS, and Framer Motion. It was like diving into a whole new world of tools and frameworks! We started from scratch with these libraries, tailoring them to our needs. It was a challenge, but it paid off big time.

We found shadcn/ui and aceternity ui super useful. They gave us loads of pre-made components and made our site look great and user-friendly.

We poured our hearts into every part of Stellar Explorers. From crafting dynamic simulations of planetary movements to designing engaging quizzes about space, we made sure everything was both fun and educational. And the best part? Our website is super responsive, working smoothly on any device thanks to Framer Motion and our responsive design approach.

Challenges we ran into

Adapting to the intricacies of Tailwind CSS and the stringent typing rules of TypeScript proved to be quite challenging. Moreover, operating as a duo necessitated additional hours of work compared to our counterparts. Nevertheless, we rose to the occasion, recognizing these hurdles as opportunities for growth.

Accomplishments that we're proud of

The framer-motion animations we built from scratch with tailwind css and framer motion for the planets.

What we learned

What's next for Stellar Explorers

Built With

• aceternity/ui
• css
• framer-motion
• html
• nextjs
• react
• shadcn/ui
• tailwind
• typescript