QuoteIt

this the add quote page of our webapp!

IF YOUTUBE DOES NOT WORK, PLEASE USE THIS VIDEO LINK ON GOOGLE DRIVE: https://drive.google.com/file/d/1XudBOjI5N2JxPtKrmqa086IsJGBRIsQl/view?usp=sharing

Inspiration

We were inspired by our English Honors class we took last year because we frequently had to cite books, plays, poems, and other works from American Literature. We saw an extreme lack of online presence of quote websites that were easy and intuitive to understand that students could use to upload their quotes for others use, but being able to have a properly formatted citation, with the page number. This was our main problem in school because if we did not have the book we had to skip it, causing issues because it is our responsibility to cite our sources. The most important part of our writing where we used quotes however, was the analyzation of quotes. Inevitably after reading whole books and long poems all year we easily forgot if quotes had a melancholic feeling, referred to to the American Literature concept of land of the frontier, etc. Our web app allows users to provide this information, that way when a student is in need of a certain type of quote, they would be able to search for it, and quickly get the citation. We were also inspired at the fact we could use our great problem solving skills and knowledge in software development to create a product we could present to our English Honors teacher so she could invest in promoting it to her future classes, helping further streamline the essay/report writing process for all students. We also realized that many students may not have access to some books because their school may only budget for classroom copies, or less than that. This way they can find exactly what they need to help earn the best grades they deserve, without any payment restrictions/

What it does

Users would be able to create an account where they could then upload any quotes that they would like to. Users also would have had the ability to save quotes which for any reason which they could swiftly reference again at a later time, on top of rating quotes from 1 to 5 stars so other people can find the quotes.

The homepage was also intended to host a variety of the highest ranking quotes and newly posted quotes for those who were just willing to browse quotes.

What we were initially planning to do with helping students search for quotes was to search by the text which they remember from it and the web app would find what book it was from with the full citation. We then realized it is important to include the keyword search functionality too, and searching by literary work title.

How we built it

Due to both of our prior knowledge in Python we used Flask to create a backend API which would do the communication with our initially PostgreSQL database, and then our MySQL database. While we thought about using React.js for the frontend, we decided against it due to the time constraints we were faced with, and instead used vanilla HTML, CSS and JS.

We hosted out Flask API on PythonAnywhere (https://kaptainkermit1.pythonanywhere.com/) Our PostgreSQL database was initially hosted on ElephantSQL.com, but then we switched to a MySQL database also hosted on PythonAnywhere Our frontend with HTML/CSS/JS is hosted on GitHub Pages

Challenges we ran into

We ran into time issues because of our physical locations being in different timezones, so we were unable to work together as frequently.
Our lack of knowledge in hosting apps on the internet and not locally created many roadblocks and led us to read lots of documentation and StackOverflow articles on how to fix our issues.
Our database on ElephantSQL.com was not able to work over HTTPS for a long time, and once it did start working, it kept sending out frontend HTTP 500 errors which we were not able to fix because the free tier of ElephantSQL does not let you use the Admin panel, logs, or firewall settings.
PythonAnywhere also gave us challenges due to the changes that needed to be made from running locally to on the web.

Accomplishments that we're proud of

We are proud that we challenged ourselves to try a lot of new things like PostgreSQL, and MySQL but specifically being able to integrate them into a web app where we used Python AND vanilla web dev tools.

What we learned

We learned that we needed to plan before the hackathon because we spent a long time to come up with an idea because we were trying to make something which was not common, like a Quizlet clone.
Additionally, we learned how to effectively use GitHub to work together on the project
Lastly, we also learned about the interconnectedness of a web app and how important it is to write diligent code.

What's next for QuoteIt

We are very eager to let our minds rest for some time and come back to this project very soon to continue developing it so the features we thought of can become reality! Also as we will be able to work together in person eventually, it will make the debugging process a lot easier. Plus the removed time crunch will allow us to work through problems with more in depth approaches.