Wardi
I love reading the Quran, but I strongly disliked the UI of most existing websites. So, as a 1st year student with zero prior web experience, I built my own. Using pure Node.js, vanilla JavaScript, SCSS, and MongoDB, it was entirely bare-bones. It was incredibly difficult but stands as the best learning experience I've ever had.

About This Project
Dissatisfaction with the UI of available Quran platforms, and a deep desire to learn full-stack web development from scratch as a first-year student.
Architected a complete platform without relying on high-level frontend frameworks. Mastered backend logic through Node.js/Express, implemented complex data preprocessing using NLP, and wrote custom vanilla JS and SCSS for a tailored, aesthetic UI.
Successfully launched my very first website. The sheer difficulty of avoiding abstractions forged an incredibly deep, foundational understanding of web technologies and database optimization.
Full-stack Developer
2024
Public
Personal
Technology Stack
Project Story
Dissatisfaction with the UI of available Quran platforms, and a deep desire to learn full-stack web development from scratch as a first-year student.
Architected a complete platform without relying on high-level frontend frameworks. Mastered backend logic through Node.js/Express, implemented complex data preprocessing using NLP, and wrote custom vanilla JS and SCSS for a tailored, aesthetic UI.
Successfully launched my very first website. The sheer difficulty of avoiding abstractions forged an incredibly deep, foundational understanding of web technologies and database optimization.
Insights & Takeaways
Highlights
- My inaugural web project as a 1st year student, setting the foundation for my entire full-stack career.
- Built practically without frameworks, relying heavily on vanilla JS, SCSS, and raw Node.js.
Challenges
- Learning advanced MongoDB database management, querying, and optimization entirely from scratch.
- Undertaking complex data preprocessing and NLP to properly handle and serve Arabic Quranic text and Tafsir.
Lessons Learned
- Proved that building a project completely 'bare-bone' is the absolute best way to deeply learn a technology stack.