Saluton

Inspiration

Being multilingual is a definitive advantage in a world that becomes more connected every day. Lots of elementary schools in big cities have language immersion programs, giving children from that area a big advantage going into the world as a bilingual person. However, As we enter a world that is increasingly online, children in small towns have the opportunity to broaden their horizons using online platforms. There is no existing product for young kids that aims to connect them and immerse them in other languages. Our platform aims to do that. In fact, our name - Saluton - is the word for "hello" in Esperanto, a language created to be an international, worldly language.

What it does

Saluton is a modern replacement for pen pals. The goal is to connect students with other students from countries different from their own. A student will be assigned an account by a teacher or parent, and Saluton will automatically pair them with someone from another country, with a set preferred language if specified. Everyone is also assigned a random profile picture.

From there both students can start texting and learning to each other. When not conversing, there's also a tab to learn more about the language of your pen pal. When you click on "learn language", it takes you to Duolingo.

How we built it

In order to establish efficient collaboration within the team and to view and test the project, Replit was used to develop the project. The front end was made with HTML, CSS / Tailwind CSS, and JavaScript, and the back end was built using Flask in Python. A Deta database was used to store user data and conversations.

To come up with our innovative, child-friendly designs, we first sketched out a general layout on paper. We then looked to Canva to find fun visuals and to refine the layouts before implementing them in the website.

Challenges we ran into

The process used to arrive at the result was not direct. But, as is the design process, failure was common and necessary for improvement.

One issue that the team came across was in determining database structure. With so many datapoints to keep tabs on, a simple and effective method of storing information was necessary. Within the Deta database, the username was used as the key to find associated data. However, tying the data in this way lead to an extra level of complexity when it needed to be retrieved. In order to combat this, helper methods were implemented in order to break down the problem into many smaller and simpler parts. This solution proved effective.

On the front end, navigating HTML and CSS as beginners proved difficult and took a lot of time. However, with practice and guidance from more experienced group members, the team was able to successfully create the front end, and more importantly, learn a lot on the way.

Other bumps in the road came from learning how Flask worked, from making sure that cache isn't stored to how to set up routing to setting cookies. Also, due to the fast development of the project, there were some bugs that resulted from a lack of security measures, such as making sure that accounts exist and have a pen pal before messaging, that we had to work around.

Accomplishments that we're proud of

Making a functional website with a front end and back end is a big feat, especially when doing it for the first time. Two of the three members of the group members had never made a website before, let alone participated in a hackathon, so this was a huge learning experience for all of us. For this reason, seeing the process as a whole lead to the final website (in addition to the lower level details that made it happen) was very rewarding.

On a feature basis, the team is proud of many aspects of the project. For one, our design matched the targeted audience of roughly elementary school through middle school aged children. The page needed to be kid friendly, so the graphics were made simple and the images were fun (this includes the photos of the team, profile pictures, and many other images throughout the site). Additionally, the menus were made to be simple and easy to navigate. Another feature of note is the use of the database. The database used is hosted by Deta and is cloud-based. This ensures safekeeping of all of the data associated with Saluton. This data includes usernames, passwords, pen pal pairs, message conversations (and who sent each message), and profile pictures. All of this data adds up when more and more users join Saluton, so keeping the data orderly is very important. This is why the team is proud of the data management in the project.

What we learned

For me, this was my first hackathon. Coming into this project, I did not have any experience with databases in Python — although I had used the language before. In looking to implement a Deta database into the project, I first read the documentation, then I experimented with the library, and ultimately implemented it into Saluton. -Michael This was also my first hackathon and before stating this project I had little to no experience with Replit, html, or css. Through completing this project I was able to develop my skills with all of them so that I can make aesthetically pleasing websites. -Lilly
While this wasn't my first hackathon, I definitely learned a lot - I advanced my Tailwind CSS skills, learned how to interact with a database other than Firestore, and I learned more about how to use Canva. - Ethan

What's next for Saluton

For the next stage of the development of Saluton, we look to create a mobile app. This way, it will be much easier to connect while not on a computer. This will also serve to make Saluton more accessible on the go and where a laptop/desktop is not available.

Built With

• css
• deta
• flask
• html
• javascript
• python
• replit
• tailwindcss