PersonalPublic2024

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.

Wardi

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.

Role

Full-stack Developer

Year

2024

Status

Public

Type

Personal

Technology Stack

Node.jsExpressMongoDBVanilla JSSCSSNLP

Project Story

The Challenge

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.

The Approach

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.

The Outcome

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.