Jithesh
Back to Blog

Building DreamSpace: A Modern Interior Design Website 🏠

5 min read

DreamSpace is a responsive, accessible, and feature-rich interior design website that I and my team built as part of our MCA Web Technology project.
It’s not just another academic project — it’s a showcase of how design, usability, and code discipline can come together to create something that feels real-world ready.

🎯 The Idea Behind DreamSpace

The core idea was simple:

Build a website that feels like a genuine interior design brand — warm, modern, and user-focused.

We wanted DreamSpace to represent a professional studio’s digital presence: displaying services, showcasing projects, and allowing clients to book consultations or leave feedback.

At its core, this project tested how far we could push HTML, CSS, and JavaScript without relying on any frameworks — focusing purely on clean code, accessibility, and design consistency.

🧩 Features We Built

The site includes a complete set of modules you'd expect in a real brand website:

  • Home Page with hero banner, featured projects, process overview, testimonials, FAQs, and newsletter form.
  • Services Page highlighting our six core design services with iconography and hover animations.
  • Projects Showcase — filterable project cards (residential, commercial, renovation).
  • Booking Module — guided consultation form with date/time pickers and validation.
  • Contact & Feedback Pages — clear validation, ratings, and feedback form.
  • Authentication System — login/signup with password strength check and “Remember Me.”
  • Wishlist Module — save favorites using localStorage.
  • Dark/Light Theme — user preference saved across sessions.
  • Products Page — searchable, filterable catalog with quick-view modal.
  • About Page — team info, story timeline, and brand milestones.

🎨 Design Language

The visual design followed a warm and minimal aesthetic, staying true to interior design sensibilities:

  • Colors: Beige, brown, and gray — creating a cozy yet elegant tone.

  • Typography:

    • Playwrite Modern for headings.
    • Inter for body text.

  • Layout: Spacious, card-based design with clean grids.

  • Icons: Lucide icons for consistent visuals.

  • Animations: Smooth transitions and hover effects for subtle motion.

đź’» Tech Stack

  • Frontend : HTML5, CSS3 (Flexbox, Grid, Media Queries), JavaScript (ES6) :
  • UI/UX : Semantic HTML, ARIA roles, responsive design principles :
  • Icons & Fonts : Lucide Icons, Google Fonts (Playwrite Modern, Inter) :
  • Performance : Deferred JS, image compression, CSS optimization :

⚙️ Challenges & What I Learned

Every project teaches something new — and this one definitely did.
Here are a few highlights from my personal learning curve:

🧠 1. Fixing FOUT (Flash of Unstyled Text)

At first, I noticed a flicker when loading custom fonts from Google Fonts — that “flash” before the text renders properly (FOUT).
I fixed this by self-hosting the fonts locally and using @font-face in my CSS.
Additionally, I used <link rel="preload"> for critical fonts, which made the text render instantly and consistently — a small but significant UX improvement.

⚙️ 2. Understanding defer in External Scripts

When I moved internal JavaScript to an external .js file, the scripts started executing before the DOM loaded — breaking some interactions. That’s when I learned to use the defer attribute in the <script> tag (inside <head>), ensuring the scripts load only after the HTML is parsed. It’s such a simple thing, but it made a huge difference in performance and maintainability.

🎨 3. Building a Theming System with CSS Variables

Instead of repeating color codes everywhere, I set up CSS variables (--background, --text-color, --primary, etc.) for both light and dark themes. This not only simplified theme toggling but also made spacing, color, and typography more maintainable and scalable.

🤝 4. Merging Code and Maintaining Consistency

Our team worked on different modules, which meant I had to merge multiple design styles and make them consistent. I standardized margins, paddings, and color usage across all pages — turning a collection of independent pages into a cohesive website. This part taught me the importance of design systems and UI consistency, even in small projects.

🌗 Dark/Light Theme

This was one of my favorite parts. Users can toggle between dark and light modes, and the choice is saved using localStorage, so it stays the same on the next visit. Smooth transitions (transition: background-color 0.3s ease) made it feel natural — not abrupt.

🤖 AI as a Design & Development Assistant

We used AI tools like ChatGPT during development to:

  • Generate UI ideas and layout structure.
  • Get accessibility recommendations (ARIA roles, color contrast checks).
  • Refine code snippets and error handling.
  • Improve documentation tone and structure.

Instead of replacing our work, AI acted as an assistant and collaborator — helping us stay efficient, consistent, and technically correct.

🧑‍💻 My Key Takeaways

This project wasn’t just about building pages — it was about understanding the workflow of a real web project:

  • From semantic markup to responsive layouts,
  • From performance optimization to team collaboration,
  • From aesthetic design to technical problem solving.

Every small improvement — like deferring scripts, hosting fonts locally, or syncing design styles — made me realize that good websites are built by attention to detail.

đź”— Explore the Project

đź‘Ą Team Members

đź“ś License

The project is open-sourced under the MIT License — free to use, modify, and learn from.

🪶 Final Thoughts

DreamSpace turned out to be more than just a submission — it became a learning experience in structure, collaboration, and refinement.

Every adjustment — from fixing font flickers to aligning grid spacing — taught me something real about web craftsmanship.

Building DreamSpace showed me how front-end design is not about decoration — it’s about communication, consistency, and care.

View All Posts