Inspiration

Car Cosmos was inspired by our frustration with the complexity and stress of car buying and financing. We wanted to create something that transforms a typically confusing process into an engaging, approachable experience. By blending celestial visuals and interactive financial tools, we aimed to make users feel like they're embarking on a fun journey rather than slogging through paperwork.

What it does

Car Cosmos lets users:

Discover and compare different Toyota cars based on their lifestyle and budget

Simulate monthly payments for each model using real finance and credit variables

Track goals and benchmarks on a unique cosmic dashboard

Learn about auto financing and leasing with simple, friendly explanations

How we built it

We built Car Cosmos using Next.js for the web framework, TypeScript for reliability, and Tailwind CSS for fast, custom styling. The app is composed of modular React components handling onboarding, car selection, payment simulation, and progress tracking. All design is mobile-first and uses open-source assets for the celestial aesthetic.

Challenges we ran into

Syncing data between Supabase and Nessie APIs, handling React export/import bugs, managing saving goals state to avoid duplicate savings, ensuring UI theme consistency, debugging Supabase authentication and RLS, and designing an intuitive, motivating user savings flow.

Accomplishments that we're proud of

Developed a visually distinctive car dashboard with cosmic theme

Created an intuitive onboarding flow and modular payment simulation

Refactored code for future expansions (brands, APIs, features)

Overcame significant git/file management issues during development

Built a tool that makes financial literacy more friendly and inviting

What we learned

We learned how crucial git hygiene is when collaborating and building for production. We improved our ability to integrate Next.js, TypeScript, and Tailwind CSS efficiently. Designing for clarity and fun taught us the importance of user-centered design. We also deepened our understanding of how to present complex financial information in a way anyone can use.

What's next for Car Cosmos

Our goals for the future:

Integrate real auto financing and credit APIs for more accurate simulations

Expand car selection beyond Toyota to include more brands

Add features for saving and exporting personalized plans

Enhance the cosmic theme with new animations and educational content

Gather feedback from real users to keep refining the experience

Built With

• celestial-svgs)
• css-frameworks:-next.js
• github-design/assets:-figma-(icons
• javascript
• languages:-typescript
• open-source-graphics-apis/data:-demo-car-data-(expandable-for-real-car/finance-apis-in-the-future)-tooling:-vs-code
• react-styling:-tailwind-css-runtime-platform:-node.js
• vercel-(for-cloud-deployment)-version-control-&-collaboration:-git