Inspiration

Alice attended CAN-CWiC about 2 weeks ago and was inspired by one of the speaker’s workshops on the lack of data and resources in tech for dialects and low-resource languages. Considering that “Hello, World!” is a message directed towards the entire globe, the team felt it’d be fitting to find a way to incorporate languages while working towards the Most complicated implementation of “Hello World” challenge. Speaking of challenges, here’s what we’re aiming for:

  • Education theme challenge: Increasing exposure for various languages and educating users on how to communicate with them!
  • Most complicated implementation of “Hello World” side quest: Self-explanatory when you read about what it does. 😄
  • Most useless hack side quest: The site’s vocabulary is basically limited to “Hello, World!” 😭

What it does

Users can explore the globe, selecting a country they are curious about. From there, the website will lead them to read, hear, write, and say “Hello, World!” in the country’s commonly spoken languages. Here are some other notable features:

  • ✈️ Airplane mode: Immerse yourself in the travel to another country by waiting the time it takes for a flight from your current location to the selected country before you start learning their language! You can take this time to prepare yourself with fun facts online, watching movies, or just some deep breaths. As they say: patience is a virtue.
  • 💻 Hacker mode: For our coding fanatics out there! Centre the location pin on the globe using solely CSS and a couple of handy keyboard shortcuts. You’ll find the effort well worth it, though if you don’t, do remember that life is about the journey, not the destination.
  • 🎲 Randomizer: Y’all feelin’ lucky? Take a trip with the randomizer to discover an arbitrary country. Who knows? Maybe you’ll find your new favourite language!
  • 🥚 Easter egg: That’s for y’all to find. (Hint: Think out of the world!)

How we built it

Though we primarily focused on designing the prototype on Figma, we attempted to use HTML, CSS, JavaScript, and React to begin developing the project, starting with the landing page. There were also some APIs/libraries that we were planning to implement for specific features, but did not get to in time, such as Leaflet.js and Mapbox for the mapping of locations.

Challenges we ran into

With barebones HTML/CSS/JavaScript knowledge, it was definitely a challenge delving straight into React for the development portion. There was a lot of Googling, Copiloting, and Stack Overflowing involved, but we eventually managed to get some code out for the start of our fun little project!

Accomplishments that we're proud of

Top of our list is definitely exploring a new development tool! We weren’t sure if it would be wise to try learning something new on top of building a project within 24 hours, but we were glad to have tried, at the very least. It wasn’t easy, but coming out of it, we learned some lessons on perseverance and curiosity which will hopefully serve us well in the long run. 🏃‍➡️

What we learned

  • As if we haven’t mentioned it enough, we learned a little bit of React and we were able to get a little more practise with frontend technologies.
  • Even when you’re tired and feel like it’s time to give up…it’s your brain lying to you (sometimes*)! In this case, we pushed through despite it all, so regardless of the hackathon results, we can be proud of what we accomplished within what felt like an impossibly short amount of time.
  • We have so much more to learn — some of which we’d never considered learning before! We appreciate having this opportunity to broaden our horizons, and hopefully we can now better equip ourselves for our next hackathon.

*Mental and physical health is important, so do take note of the cues your body is giving you. 💕

What's next for Yes, Speak Up!

Project-wise:

  • Adding more ridiculously fascinating features
  • Continuous updates on language accuracy based on user feedback

Team-wise:

  • Learning more about React and Next.js
  • Exploring more dialects and low-resource languages to provide them with some more exposure to the world
  • Staying curious!

Sources

  • Stack Overflow
  • Google images
  • YouTube tutorials (src 1, src 2, src 3)
  • Google Earth
Share this project:

Updates