Astro

Your Unique Horoscope Dashboard Chrome Extension

Comment

Inspiration

Our team was inspired by astrology app Co-Star and last year's UI/UX winner project, Hubble.

What it does

Astro is a horoscope dashboard chrome extension that keeps users engaged with their daily prediction with an aesthetic user interface and fun animations.

How we built it

We began by building a branding toolkit and mock-up of the project design via Canva. We then built a custom logo using Adobe Photoshop. Using this vision, we built an animated prototype on Figma. We built Astro using React, HTML, CSS, and an open-source astrology API().

Challenges we ran into

None of us had prior experience using React. Ultimately, it was difficult to fully implement all the features and design we had envisioned. We were able to launch Astro on Chrome locally for a demo, but our Figma Prototype gives a better understanding of how we envisioned the site to interact.

Accomplishments that we're proud of

We are proud of the UI/UX vision we created, the animation wheel (functional on our website and figma), fully implementing an API, and learning so many new things from scratch!

What we learned

React and Web Development was new to our entire team, and we are proud to have learned Figma, React, HTML, CSS, and how to use APIs in such a short time. Huge shoutout to Hackbeanpot's beginner-friendly workshops and mentors for all the guidance they provided in React and overall.

What's next for Astro

As of now, Astro is functional. It takes in a 'name' and 'birthday', throws a Welcome Message, and displays the user's daily prediction based on their birthday. We want to fully implement Astro's design based on the Figma Prototype using proper formatting in React. We also hope to host and launch Astro on the Chrome Web Store for public use.

** Video demo and design process included in PPT linked!**

Built With

Share this project:

Updates