Inspiration
Sometimes people go through out their day having done nothing much. It’s usually okay, but some days can feel a bit boring or not feel productive because of that. Our team found that it was important to keep the mind active and try something new everyday. Therefore, we made SkillSwap as a way to easily get people in touch with each other to learn new things all the time, without the need of accounts or profiles, thus keeping anonymity if preferred.
What it does
SkillSwap lets a user fill out a form, where they enter their name, an introduction about themselves, what they want to learn, what they offer to teach, and their preferred contact methods. They are then able to add themselves to the website’s database so others can match with them, and/or match with others. When matching, the app searches its database and return people whose skills to learn and teach correspond to the user (fuzzy-tolerant). The UX is single-page, where JavaScript sends queries, while Flask returns results, and the page updates without reloading.
How we built it
The frontend uses standard HTML, CSS (Google font + custom gradient), and vanilla JavaScript to handle the form and any fetch calls. The inputs to the form are validated with form.checkValidity and event.preventDefault() to provide a smooth, reload-less experience.
The backend uses Flask to handle routes such as adding the user and matching them. We created a SQL database that’s automatically initialized (if the database is missing) and stored within the website. Matching is done using the regex Python library, and uses fuzzy search.
The GitHub repository exists to present the code, and also has a README for setting up the website locally on a server. PythonAnywhere is used for quick hosting during the hackathon.
Challenges we ran into
The largest issue was with the rapid upskilling required to complete the project. None of our team was particularly proficient with web development, and some team members have never done it at all, but we managed to finish the project with the right resources. During development, refreshing the page would clear the form, so event.preventDefault() was added to stop exactly that. Google Chrome and Safari interacted with local servers differently, which was solved by running the server only on Google Chrome. The browser’s required behavior on the input HTML elements made it so that, while it would block the user, it wouldn’t stop the Flask code from running. This was stopped using form.checkValidity() before querying Flask. Aside from other minor issues involving CSS quirks and not being sure where to host the website, the agenda was clear and progress was consistent.
Accomplishments that we're proud of
We are proud of: having a fully functional demo, creating a lightweight page that matches others almost instantly, having a reproducible repository, and having the correct safety checks to make the page work properly.
What we learned
We learned how to: rapidly upskill in web development skills, make JavaScript and Flask interact with each other, use fuzzy matching, debug UX issues, deploy our software, and polish the frontend with the right styling and formatting.
What's next for SkillSwap
While not needing an account was an outlying feature of the website, we will look into adding some sort of way of creating a secure way for users to add themselves to the database. We also want to improve the matching algorithm, as we hadn’t much time to flesh out how we wanted to match our users. Lastly, we want to add some type of email/messaging system that notifies users not using the website when they’ve found a match with someone.
Log in or sign up for Devpost to join the conversation.