Palyglot
Learning a new language, now with Friends!
Timeline:
October 2020 - December 2020
October 2020 - December 2020
Team:
Dominic Casillano, Faraz Hussein, JJ Kanu (Me!), Owen Hu
Dominic Casillano, Faraz Hussein, JJ Kanu (Me!), Owen Hu
Tools:
MongoDB, Express, React, Node.js
MongoDB, Express, React, Node.js
Overview
A portmanteau of PenPal and polyglot (a person who speaks multiple languages), Palyglot is the result of a semester-long project in the University of Toronto’s Software Engineering course, CSC301. It is a web app made with the intent to to create an environment for friends who regularly write to each other to improve their literacy in a foreign language.
My Role
My role pertained to much of the front-end design and implementation. This included the initial mock-up designed using Figma all the way to the front-end of the deployed site.
Why Palyglot?
Imagine a scenario: wanting to learn something during the monotony of quarantine, you decide it would be a good idea to learn a new language. Now you look towards apps like Duolingo or more traditional methods like Rosetta Stone, both of which you can learn a lot from, but they both lack the best way to learn a new language: that is just to talk to other people.
A lot of the current Pen Pal systems that have this idea in mind are very outdated; either there is no incentive to keep using them, have antiquated user interfaces (pictured right), or use actual physical mail. We wanted to make an application where we can modernize these older systems in the vain of current applications: where it is easy, fast, and rewarding to keep learning alongside talking to new individuals.
A lot of the current Pen Pal systems that have this idea in mind are very outdated; either there is no incentive to keep using them, have antiquated user interfaces (pictured right), or use actual physical mail. We wanted to make an application where we can modernize these older systems in the vain of current applications: where it is easy, fast, and rewarding to keep learning alongside talking to new individuals.
Planning and Design
Who are our target users?
- University students wanting to learn a new language with others (The actual inspiration for this project!)
- Adults who move to a new country and wants to meet new friends to improve communication skills in a new language
What kind of User Stories would they have?
As a student learning French, I want to meet other French speakers or learners in order to hone my French skills and increase my vocabulary.
- Choose French as a language when matching with other users
- Display the languages you speak so other users can match with you
- Ability to add interests to your profile
- Have a matching algorithm that finds users with similar interests
- Users should have a profile where they can introduce their interests and hobbies
Modeling Our Application
In our initial design, the frontend would render our homepage, with authentication, then lead the user to a matchmaking component, messaging component and a profile component.
The matchmaking component would communicate with the backend to retrieve new matches and to allow the user to select matches. The messaging component would communicate with the backend to retrieve matches and messages, and it would also communicate with our APIs such as the Google Translate API to run our extra features (spell checking, dictionary etc.).
Lastly, the profile would also communicate with the backend to show the user their profile and allow them to edit it. For all backend requests, the backend would be retrieving data from our main server.
The matchmaking component would communicate with the backend to retrieve new matches and to allow the user to select matches. The messaging component would communicate with the backend to retrieve matches and messages, and it would also communicate with our APIs such as the Google Translate API to run our extra features (spell checking, dictionary etc.).
Lastly, the profile would also communicate with the backend to show the user their profile and allow them to edit it. For all backend requests, the backend would be retrieving data from our main server.
Original Mockup
We used Figma to create an interactive mockup of our initial vision.
Implementation
We used Node.js to build our application, using React.js in the frontend and Express.js in the backend. Although we initially considered using Python, we saw that the APIs we wanted to use had better support on Node.js (such as Google Translate API).
Also, React.js (Frontend) and Express.js (Backend) are very easy to use frameworks for web apps that are built upon Node.js. Using Node.js allowed our Frontend and Backend to be built in the same language and gave us better ease of development.
Deployment
By the end of the semester, we were able to complete the project on top of balancing our other academic responsibilities. Although missing some of the initial features we had mapped out we were able to achieve several of our set out key features:
- Login and Signup
- Users can create accounts, specify their details and languages they know or languages they are targetting, this affects the matchmaking service.
- Profile Page
- Users can edit their bio and interests to customize their profiles
- Matchmaking
- Users can view the profiles of potential matches (other users)
- Users can send match requests to users
- Chat
- Users can text chat with other users
- Users can have multiple chats with different users
- Chats are kept updated and users can view previous messages
Take a look at our demo!
Want to see the site for yourself? Check out the deployed link here!
What I Learned
Although I have had a couple of large group projects at this point, none have been to this scale. Initially we started off with 6 members so our model and mockup was within the realm of possibility.
After a couple of students left the group, our initial plan became less feasible. We had to learn to compromise on our original vision and focus on key features. I learned the importance of flexibility and adaptability when working on large applications. Our weekly sprints became essential when we had to buckle down to finish the project, and is a skill I know I can carry on in the future.
After a couple of students left the group, our initial plan became less feasible. We had to learn to compromise on our original vision and focus on key features. I learned the importance of flexibility and adaptability when working on large applications. Our weekly sprints became essential when we had to buckle down to finish the project, and is a skill I know I can carry on in the future.