Search Page with Query Filled In
As first-year students at UWaterloo, the pressure we feel to be working on side-projects is constant. Whether it be for self-enjoyment or simply to pad one's resume, side-projects are viewed as the holy grail of self-learning. But for people like us, the hardest part is often finding a good idea to work off of - this is where SideQuest can help.
What it does
SideQuest is a web-app that helps people search for projects by the skills they want to learn. SideQuest helps match people with ideas to people who have the skills to realize them. Users can query for skills and interests they wish to pursue, and SideQuest recommends relevant projects for them to develop these skills. Moreover, users can submit project ideas with relevant tags so that others users looking to learn can contribute to the project.
We believe that if people have a desire to learn something new, then they should also be given an opportunity to do something practical and build something functional. SideQuest bridges the gap between knowing relevant technical skills and building real projects.
How we built it
The frontend was built using the Create React App. Each page and component was split into an individual JSX file in a modular approach. When ready to be deployed, the code was minified and deployed to GitHub pages.
The backend was built using Node.js and deployed on Firebase. To power the project search we used Algolia. We synchronized data from firestore with Algolia to create the search index, allowing us to find the best matching project when the user enters multiple skills, interests, and keywords.
Challenges we ran into
One of the biggest challenges we ran into was handling cross domain requests. Since we used Google Cloud Functions, our backend was on a different domain than our frontend. This posed a challenge when we had to make API calls to our backed from the frontend, which were initially blocked by the browser CORS policy. In order to work around this, we had to attach an “Access-Control-Allow-Origin” header onto the server responses to allow for requests to be sent and received from the server. However, we still encountered a problem with the preflight request sent by the browser when an OPTIONS request was sent. We were stuck on this problem for a while as we did not realize that the server was not responding to the OPTIONS request, which resulted in the browser blocking all outgoing CORS requests. However, after a bit of debugging and a lot of time on StackOverflow, we were able to figure the problem out and fix it.
Accomplishments that we're proud of
We are proud that we managed to set up a polished web app given a limited amount of time. It contains the basic functionality of our idea and works smoothly.
What we learned
We learned how to use Algolia’s API with data from firebase to create a search index. We used this API to power the project search feature. For the front-end, we learned more about React Bootstrap and how to implement each of the components in order to make a better UI experience for the users. To deploy the backend, we learned about the Serverless framework, and used it to deploy Cloud Functions.
What's next for SideQuest
- Login/user system
- More search options (difficulty, time required)
- Store images server-side