[02] - 01 - Architecture & Tech Stack
Mohammad Saad Ansari🧱 Architecture: MVC-Inspired Structure
While not a full MVC (Model-View-Controller) framework, this project loosely follows its principles to keep the structure modular and clean:
Model (Data) – All tour destinations are stored in a structured JavaScript array (
menu[]) that represents our "travel database."View (UI) – The layout and components are built in
index.htmland styled usingstyles.csswith responsive design in mind.Controller (Logic) – The interactive behavior, such as navbar scroll logic, button filtering, and DOM rendering, is handled in
app.js.
This separation ensures each file has a clear responsibility, making it easier to maintain or expand in the future.
⚙️ Tech Stack
No frameworks. No dependencies. 100% pure frontend fundamentals. 🌱
| Layer | Tool/Language | Purpose |
| 🧩 Structure | HTML5 | For creating semantic layout and sectioned content (home, about, services, tours) |
| 🎨 Styling | CSS3 (with Grid, Flexbox, Media Queries) | For layout, responsiveness, and theming (via custom variables) |
| 🧠 Behavior | Vanilla JavaScript (ES6) | For DOM manipulation, scroll behavior, navbar control, and filtering logic |
| 💻 Icons | Font Awesome | For clean and scalable icons (hamburger menu, arrow-up button) |
| 🔤 Fonts | Google Fonts | For a modern and clean UI with Roboto and Open Sans |
| 🌐 Hosting | (Optional) GitHub Pages / Netlify | To easily deploy the static site live |
🗃️ File Structure (Simplified)
📁 TravelScroll
├── index.html # main HTML structure
├── styles.css # custom styles and layout
├── app.js # all interactive logic and data
└── images/ # all destination images
This simple yet powerful tech stack was chosen intentionally to reinforce core frontend concepts without the complexity of external libraries or frameworks.
Subscribe to my newsletter
Read articles from Mohammad Saad Ansari directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by