Calendar for Exams & Study Sessions
Quiz Section
Flashcards
Home Page
Homework Helper Chatbot

Offline Learning Micro-Library

About the Project

This project was inspired by the idea that education should not depend on constant internet access. Many communities around the world still struggle with unstable or expensive connectivity, yet access to knowledge is essential for growth. I wanted to create a lightweight, offline-friendly web library that allows people to keep learning even when they are disconnected.

Through this project, I learned not only the technical side of building with React and Vite, but also the importance of designing for inclusivity and accessibility. By working on it, I realized how empowering it can be to make knowledge available regardless of circumstance.

How I Built It

I built the app using React + Vite for speed and simplicity, combined with service workers to enable offline support. The idea was to create a micro-library where users can access and save educational content, then continue using it even without an internet connection.

The workflow looked something like this:

Set up the React + Vite project structure.
Designed reusable UI components to keep the app lightweight.
Integrated a service worker for offline functionality, caching the core assets so the app stays usable when disconnected.
Configured deployment via GitHub Pages so the project could be shared publicly.

Challenges I Faced

This project was honestly a crash course in web development for me.

First, just figuring out how React and Vite actually worked was a challenge. I had moments of freaking out over things like routes, JSON files, and just… how it all fit together.
I had no prior experience with service workers, so implementing offline features was a huge hurdle. I had to dive into documentation, experiment, and basically teach myself from scratch in a very short amount of time.
Deployment wasn’t straightforward either — I kept running into errors trying to get GitHub Pages to actually serve the project, and only after trial and error did I figure out how to configure the dist/ folder properly.

Overall, the process felt like piecing together a puzzle with no instructions — but every time I solved one small piece, I got a little closer to the bigger picture.

What I Learned

How React and Vite handle project structures, routing, and data.
The fundamentals of service workers and how they bring offline functionality to web apps.
How to debug deployment issues and configure GitHub Pages for static builds.
Most importantly, how to stay persistent when things don’t work the first time (or the tenth).