Inspiration 💡
Teachers are arguably the most important members of our society. They give their pupils purpose and set them up for success in life. For the very same reason, they share with students notes from their lifelong learnings. Most private tuitions are renowned because they have wonderful descriptive notes which can make complicated concepts easy. Because of lockdowns and digitalization of learning solutions, these notes need to be shared digitally - and that's where the game changes. Because now, it is super easy to take a screenshot and send it over to other friends. Naturally, because you share the notes - you become more popular, right? These things happen a lot and this is completely unethical and hurts the reputation and work of the teacher who created the notes for their students.
We believe that with the power of AI, this can be solved if proceeded creatively. Thus we made Spiroshield!
What it does 🤔
We built a secure enclave where teachers can add in their notes and lectures. The app doesn't allow any screenshots. And the more technically fun part - if someone was to look at the network data, they would find that a lot of shredded paper notes are being sent, the individual and the ordering of whose would not even make sense. It's an algorithm we built ourselves. Teachers are our priority - they have full right to see and assign users their PDFs and in case anyone student turns rogue or leaves, they can simply remove it from their list.
Another vital concern is that it takes time and patience to learn any lecture note and even for teachers sometimes it's not possible to create so many questions so as to make sure students are through with their notes. Hence, we take the note, create the text out of it and process it using OpenAI's GPT-3 which amazingly returns quizzes every time they want one. This results in a series of unexplored question/answers and can generate newly unseen questions which the students need to think and answer. They can see the answers at the end. We also are summarizing the entire text for revisions.
How we built it ⚙️
Spiroshield is crafted with ❤️. The mobile app is made using Flutter which encapsulates React.js and it is crafted using Material UI CSS. The authentication of the platform is done via JWT. The entire system architecture of our app can be seen below.
The backend of our application is hosted using process manager (PM2) so that it handles restarts in case of failures in production. It is running on a VM in GCP. NGINX is present as the server on port 80 to forward requests to port 5000 on which this application listens to. The React App is built for production and is also being served from the same backend. We are using Node.js and Express, therefore everything must go pseudo-realtime. The pdf document uploaded requires poppler-utils as pdftocairo (pdf -> image generator) is present in that package. We are using exec to create the same. Then using sharp and jszip, we zipify the file.
Challenges we ran into 😤
A lot! As I previously mentioned, the whole execution was done from scratch, even the advent of idea in our mind literally came during the opening ceremony from Sandipan. Initially, ideated the whole project & then divided the same into two chunks. Sandipan was primarily working on the React-App's Backend & Pratyay was working on building front-end & the ML model. Brandon faced few issues while working with GPT-3 & deploying the model as an API & Aditya faced issues during integrations. We faced most challenges while we were integrating the modules into one. Also, it was a bit difficult for us to collaborate in a virtual setting but we somehow managed to finish the project on time.
Design
We were heavily inspired by the revised version of Double Diamond design process developed by UK Research Council, which not only includes visual design, but a full-fledged research cycle in which you must discover and define your problem before tackling your solution.

- Discover: a deep dive into the problem we are trying to solve.
- Define: synthesizing the information from the discovery phase into a problem definition.
- Develop: think up solutions to the problem.
- Deliver: pick the best solution and build that.
This time went for the minimalist Material UI design. We utilized design tools like Figma & Photoshop to prototype our designs before doing any coding. Through this, we are able to get iterative feedback so that we spend less time re-writing code.
Research 📚
- Protecting Student Privacy While Using Online Educational Services: Requirements and Best Practices, PTAC : https://bit.ly/3hOognr
- 5 problems e-learning students experience, Edology : https://bit.ly/3nNwOPw
- Privacy Concerns in the Age of Expanding Online Education : https://bit.ly/2ZdAekc
- Impact of COVID-19 on education (UNICEF) : https://bit.ly/3lBtnbH
- Covid-19 Lockdown: Impact of global pandemic on education sector : https://bit.ly/3kfDTGf
♣ Datasets :- Didn't required since GPT-3 was the trump-card of our project. Thanks to Elon Musk :p
♣ Articles :-
- Impact of digital surge during Covid-19 pandemic, ncbi.nlm.nih.gov : https://bit.ly/3tQxVyO
- Digital Piracy on Fleek, FirstPost : https://bit.ly/3kmdPt2
- Original content creators losing money as digital piracy rises amid COVID-19 pandemic, BusinessToday : https://bit.ly/3AABOu0
- Insight Implications Covid-19 Low-cost Private Schools : https://uni.cf/3zjycvg
- Impact via covid-19 on Tuition Finance : https://bit.ly/3zdY2k5
CREDITS
- Design Resources : Freepik
- Icons : Icons8
- Font : Helvetica Neuecyr / Rubik / Varela Round / Questrial / Jost
Takeways
Accomplishments that we're proud of ✨
We are proud of finishing the project on time which seemed like a tough task as we started working on it quite late due to other commitments and were also able to add most of the features that we envisioned for the app during ideation. Moreover, we learned a lot about new web technologies and libraries that we could incorporate into our project to meet our unique needs. And as always, working overnight was pretty fun! :)
What we learned 🙌
A lot of things, both summed up in technical & non-technical sides. For the technical part, we faced a lot of serious issues as we were working with OpenAI's GPT-3. Handling CORS and other bugs were also a big challenge. We also gave our level best to make the UI/UX look solid which helped us learn more about different design-centric approaches! Not to mention, Stackoverflow was the gem for us while we're troubleshooting some complicated issues late-night.
What's next for SpiroShield 🚀
We just really want this project to create a real positive impact on humanity. We are also planning to integrate some cosmetic features into the application to make the UI look more attractive & intuitive. We are also looking forward improving machine learning model performances, upscaling the demo app to include its full functionalities, other applications of our Document-Securing Algorithm. Moreover, a lot of code needs to be refactored as we couldn't hit so much under 36 hrs. Overall, we hope that one day this project can be widely used globally to redefine the existing & help prevent piracy of someone's sweat & blood.
Note — GPT-3 API has been restricted to our App only. If you want to run the same on your local, use your own credentials.

Log in or sign up for Devpost to join the conversation.