EliteChat

Inspiration

Very inspired by AirChat and Discord on how communities are built, but also was inspired by how Honk and other chat apps function in terms of branding and product. Currently, as we were time restricted, we completed the landing page of the concept for EliteChat — a portal for aspiring students to grow with their peers in the best way possible. The idea of this phase of building the landing page was to convey the message of how group chats in schools could be a fun way to make school like much more interesting.

Apart from the smooth scroll animations and booping 3D elemetns, you can see a ton of focus was put into the branding as well — font usage, colors, elements that cater to our target audience which are school children.

What it does

The idea of the landing page was to have an easy way to get the users to download the app on their phone by giving them 15 days of Discord Nitro for free. The landing page also aim to convey a fun, safe space for users to get competitive in the most healthy way possible.

We went big on social community features for school networks in this project by taking about group chats, live movie screenings and game sessions and also give an idea of how fitness in non sport based activities can be huge!

How we built it

3D elements on the landing page were created using Spline and the landing page design was done in Figma. We then took the design into code by building it using HTML, CSS and JavaScript!

Challenges we ran into

We had planned to add a "send download link via SMS" feature using Twilio, but faced issues handling POST requests with Astro. Unlike React, Astro’s server-side behavior required a different approach, and due to time constraints, we couldn’t iron out the integration in time to include it in the final product.

Accomplishments that we're proud of

For a hackathon that we joined late, we are super proud of how the 3D elements turned out with the overall branding of the page and is extremely light as a website! Go ahead and give it a try in the link below!

What we learned

We initially chose Astro because it’s a new and exciting framework that enhances performance and speeds up development. However, we didn’t fully anticipate the limitations Astro would bring when it came to handling server-side APIs like Twilio. With the time constraints we had, we couldn’t resolve the integration in time to include it in the final product.

What's next for EliteChat

We think this product has potential as it could be easily monetized. This could also become big as a leader/creator platform only for school clubs!

Built With

• astro
• css
• html
• javascript