Hello everyone! Today, I want to share what I have been building over the past month in the Hashnode Vercel hackathon! It was an amazing experience and a fun way to so solve some challenges in my everyday life.
Links
Here is the site link 👉 materialpal live site on vercel.
Here is the repository 👉 Github Repo
Inspiration
Materialpal started out of my frustration with the conventional way of sharing educational materials at my campus, which was slow, boring and usually inefficient. Materialpal aims to make sharing of educational resources fast easy and reliable, an application where students can easily filter through and study materials and resources shared by students from all institutions around the globe.
The traditional method of acquiring study resources before material pal
Study materials are in hard copy or soft copy format but let's imitate some steps you would normally follow to get materials at my campus:
You have to visit a business cafe on campus and at the department that offers the course
Now imagine having to search through possibly hundreds of collections of materials to get a single material
Materials are not arranged or sorted, they are not separated because it's tiring for the cafe owner to keep arranging after every student purchases materials and there is no application properly suited for this purpose
After searching you couldn't find one you intended to get You move to the next business cafe and begin the search over again
The quest could go on...
After finally getting it or something related, in the case of a hard copy you have to make your copies, copies keep getting blurry and they are not easy to read, for a soft copy you have to transfer the file into your storage media
The problems with this approach
It's stressful and gets boring
You don't always get what you Intended to even after the stress
It's costly, it takes much time, energy and money
Materials gotten from this approach are not verified by any means and there are no feedbacks taken to make corrections, so students are prone to consume false knowledge ignorantly
Most times you don't even know a more comprehensive material exists and those who have it end up deleting it or throwing them out when they are no longer needed. Either ways materials would not get passed down to students who are yet to offer the course no matter how comprehensive it is
Mediums used is sharing at business centres are usually not secure so you are prone to security vulnerabilities
And this is not environmental friendly.. thousands of papers flying around yearly
The Solution - Material Pal
Students find it difficult to access quality and reusable educational materials, we provide a platform which provides verified materials shared by different students across the globe.
Tech Stack
Materialpal is a web-based application built on the Jamstack. One reason for building materialpal is speed, I wanted to make the whole process as fast as possible, so I set out for the best tools to accomplish this.
Next.js - according to Wikipedia "Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React-based web applications". With next.js I was able to generate a static site which is cool because the sped is unmatched
Hosted on Vercel(of course) - where else would be the best place to host next.js project than with those who built it, Vercel is nice and everything is easy to get around out of the box, and the fact that every PR gets hosted on another domain so you can test things out before pushing to production is another thing I liked about the experience.
I used Theme UI for the theming and styling of application, it allowed me to create configurable design constraints, Theme UI is highly flexible, making theming possible to the very last bit.
Remember it's serverless so I made good use of Firebase. Firebase is a backend as a service offering the services you need to power your backend. Not enough? Well there's firebase functions.
Firebase Authentication- user authentication and social authentication
Cloud Firestore for the database
Firebase Functions to add even more functionalities to the application
Firebase Storage is where the actual files are stored.
I wanted to add the search functionalities just then I realized firebase does not offer full-text search service yet. So I had to resort to some other option for this.
Algolia was the solution, it's recommended by firebase and battle-tested. It was my first experience with Algolia, the learning curve was steep to some point. They also provide a package "Algolia instant search" it makes it easier to connect to the data and send queries I couldn't theme it to ensure full consistency at first.
Features
- Authentication- students can create and update their profiles, they can also update as their data Email verification and Password reset.
- Upload- authenticated users can add to the collection of materials, by quickly telling us what material you want to add, the whole process takes an average of 1 minute and that's it, we take it up from there.
- Search- Access a global collection of materials, search materials by the name, author, description and a lot more almost in real-time thanks to Algolia. No limitations and all from the comfort of wherever you are whenever you want.
Download- Save the file on your local storage without the worry of being vulnerable, make good use of it, and come back to give feedback for improvements
Comment- Want to say kudos or you found something incorrect? drop a comment in real-time on the material, this allows taking feedback for improvement of the materials
Reactions- React with a thumbs up or thumbs down whichever, let others and the author know how you are feeling about the application. Just like the comments reactions are also in real-time.
Share- Found one you want to show to a friend? Share materials instantly via Whatsapp, Twitter, Facebook... or copy the link.
- Profile- everyone has a profile page. Manage your profile, you can manage, update and remove your shared materials.
Currently, I have focused on the MVP; the basic CRUD operations, the auth and search features of the application. There is more to come for sure.
Feature Improvements
A couple of friends we share the same vision would be joining me on the development to further solve this challenge. More features are being shipped
- Mailing list to get notifications when a material you could be interested in is uploaded
- Flashcards to reinforce knowledge
- Convert hard copy materials into a file format by scanning
- Quizzes to check you knowledge level
Conclusion
Learning doesn't have to be a boring and somewhat automated process, having fun while learning is important and this is what materialpal seeks to attain, It's the platform I wish I always had so I am building it for us all.
But this is just the beginning, to a developer's journey to build something awesome every day. Thanks for reading. Catch you on the next one.