-
-
-
This is our initial UI design. As we went along our development process, the UI evolved to match both user and developoer friendliness.
Inspiration
Thyme was inspired by an issue that arises from all virtual learning platforms - the lack of directed peer to peer social interaction. While attending zoom lectures and turning in assignments on Canvas and Google Classroom, there is no time to chat with peers in your class and receive much needed assignment help or life advice, as well as the means of making new friends. We aimed at a simple, but impactful solution. By integrating a social-media messaging platform with Google Classroom and Canvas through a chrome extension, we were able to meet the needs of students who can benefit by studying and learning from peers by giving them the means to do so. While it is wise to learn from experience, it is wiser to learn from the experiences of others, and with a passion to create a more powerful learning environment in the light of this pandemic, we created this powerful platform.
What it does
Thyme serves to fulfill one task: make a powerful peer to peer learning environment. Biding by this mentality, Thyme brings the act of collaborating and chatting with peers into an intuitive interface. Users can use Thyme to talk through text channels, voice channels, and drawing rooms with all the peers in your class. Thyme is able to seamlessly add members to all of the servers for each class by integrating with Google Classroom. Users also have the ability to add and remove text channels and voice channels within a class for ease of use. Thyme takes the task of learning from peers in a time of need and transforms it into an enjoyable task as numerous features simplify the job at hand while providing an elegant UI.
How we built it
Thyme was built on a variety of technologies. Initially, front-end design was done on Figma, focusing on the major parts of the app. From there, our team split up front-end work and back-end work amongst ourselves. The Front-end was built primarily off React, using MaterialUI, Socket.io, and Express with data storage in Firebase. This front-end was then set to communicate with the backend, running multiple services such as Firestore and AWS. Communication was done through JQuery and XMLHttpRequest, both of which helped facilitate multiple HTTPS requests.
Challenges we ran into
Thyme ran into a few challenges working with the Socket.io and Heroku. Our team was mostly new to using these languages so we saw a steep learning curve that took some time away from functionality. The React development process was especially slow at first due to some issues with project setup in the beginning, however, as we progressed, we soon gained momentum. In addition to that, we struggled with making our React app conform to the dimensions we wanted, as we had to squeeze it on the side of Google Classroom. The documentation was clean and easy to read, but our lack of professional development experience made it a little difficult to understand the reasoning behind and the usage of certain important features. We lost a large amount of time in trying to explore some very new territory and argued about giving up that functionality, but ultimately decided that we would keep trying as exploring new territory is what a hackathon is all about! :) Eventually we were able to figure out how to use the APIs and it turned out even better than we expected. With cooperation and teamwork between all our members, we were able to turn difficult situations into memorable ones.
Accomplishments that we are proud of
Thyme was actually the first time a few of us encountered/actively used technologies like Socket.io and Express and that quickly became a fulfilling experience in itself. Furthermore, considering the time span, it was both stressful and exciting to learn these technologies to get to development as soon as possible while retaining the information for later use. The UI design aspect in particular shined in our project which was an equally pride-worthy moment. In addition to that, we were very, very happy to get the functionality down for voice chats and drawing boards within each class. It was a struggle, but the fun and worry in pulling something off at the very, very last second was an amazing experience for us all.
What we learned
As a team, we undeniably learned many new things about newer technologies that shaped the course of our project. Outside of our code, we learned more about the time constraint and the importance of planning/sticking to the plan. We saw ourselves drifting towards more ambitious goals, but learning to stick to the essentials and create something that simply works was a great learning. In essence, we learned the importance of making a product that is impressive, scalable, and dynamic in order to maximise effectiveness. In terms of technologies, we learned how to use Socket.io functions, Express, and Heroku alongside github pages in order to host our web application and store data in the back end. Alongside that, as we were starting to run out of time, our front-end developers worked with a lot of back-end and vice versa - so it served as a chance for everyone to explore something new and out of their comfort zones.
What's next for Thyme
Thyme definitely has the capacity to go much further than it is now in the form of extra features and integration. While we have made it as seamless as possible for Google Classroom, we could also integrate it into other platforms such as Canvas and Blackboard. We could also add more features and integrate other services into the Thyme app, making for a richer experience, such as notifications, mentions, and file sharing. With these features, we can allow for a much better user experience and stick with our core mission to make student communication easier.parts
Log in or sign up for Devpost to join the conversation.