A responsive, accessible, and feature-rich interior design website, created as part of the MCA Web Technology project. DreamSpace blends creativity with functionality — showcasing interior design portfolios, booking modules, feedback systems, and modern accessibility features.
✨ Designed for nuclear families and couples, DreamSpace focuses on warm, cozy, and elegant design experiences that make every space feel like home.
The objective of DreamSpace is to build a user-centered and device-friendly website that reflects the real-world functionality of a professional interior design firm.
The website focuses on:
- Responsive layouts that adapt to any screen size.
- Accessible forms with ARIA roles and labels.
- Usable design systems using clean HTML5 structure and CSS3 styling.
- Interactive JavaScript features to enhance user experience.
DreamSpace serves as a demonstration of front-end design principles like responsiveness and accessibility, semantic markup, and client-side scripting, aligning with MCA Web Technology project goals.
- 💡 Fully responsive (mobile-first, adaptive layouts for all screen sizes)
- 🧠 Accessible design (ARIA, semantic HTML, focus indicators)
- 🖋️ Consistent typography and brand theme
- 💬 Interactive modules like booking, feedback, and authentication
- ⚙️ Optimized loading with deferred scripts and reusable components
- 🌙 Light/Dark theme toggle with persistence
- The hero section introduces the brand with clear calls to action.
- Featured projects showcase recent work using responsive image cards.
- Client testimonials highlight authentic experiences.
- “Our Process” section explains how DreamSpace handles projects — from consultation to delivery.
- An FAQ accordion answers common user questions.
- A newsletter subscription form lets users stay connected.
- Displays six key services: Personalized Interior Design, Wall Painting & Finishes, Custom Furniture Design, Lighting & Décor Solutions, Modular Kitchen Design, and Space Planning.
- Each service includes an image, brief description, and icon-based checklist.
- Hover animations enhance interactivity.
- Displays completed residential and commercial projects as interactive cards.
- Each project includes images, location, type badges, and detailed descriptions.
- Filter tabs let users switch between residential, commercial, and renovation projects.
- Includes testimonial highlights linked to project stories.
- A guided form allows users to book a consultation slot.
- Logged-in users get auto-filled details for convenience.
- Includes date and time pickers (limited to future dates).
- Inputs: Name, email, phone, project type, budget range, and design preferences.
- Built-in validation ensures accurate form entries and data consistency.
- Contact form collects name, email, subject, service type, and message.
- The feedback form supports ratings, service type selection, and comments.
- Real-time validation provides instant user feedback.
- Embedded Google Map for company location reference.
- Users can sign up or log in securely using email and password.
- Password strength meter promotes better security.
- “Remember Me” enables persistent sessions.
- Session management tracks and maintains login state.
- Users can add or remove favorite products or design ideas.
- Prevents duplicate entries and supports category-based sorting.
- Filter options and quick modals show more details about saved items.
- Persistent storage using localStorage.
- Theme toggle icon allows switching between dark and light mode.
- Theme preference is stored locally for consistency across visits.
- Smooth transitions ensure the visual shift feels natural.
- Displays a catalog of furniture, décor, and lighting products.
- Built-in search and filters help users find items quickly.
- Product cards include image, title, description, and price.
- Quick-view modal opens detailed product previews without leaving the page.
- Data rendered dynamically via JavaScript and stored in localStorage.
- Layout adjusts from 3-column desktop to single-column mobile.
- Shares the company’s story, mission, and values.
- “Our Story” includes major milestones and statistics.
- Interactive cards display DreamSpace’s core values.
- Vertical timeline visually presents brand history (2015–2023).
- “Our Process” section outlines four workflow stages.
- Team section introduces members with roles and images.
- Client testimonials show satisfaction and trust.
- Ends with a strong call-to-action to start their design journey.
-
🎨 Color Palette: Warm tones – beige, brown, and gray for a cozy aesthetic.
-
🖋️ Typography:
- Headings: Playwrite Modern
- Body: Inter
-
📐 Layout: Spacious, minimal, card-based grid system.
-
🧩 Icons: Lucide icons for clean and consistent visuals.
-
✨ Animations: Subtle hover and fade transitions across components.
| Area | Technologies Used |
|---|---|
| Frontend | HTML5, CSS3 (Flexbox, Grid, Media Queries), JavaScript (ES6) |
| UI/UX | Semantic structure, accessibility standards, and responsive breakpoints |
| Icons & Fonts | Lucide Icons, Google Fonts (Playwrite Modern, Inter) |
| Performance | Deferred JS, compressed images, and optimized CSS |
-
Clone the repository
git clone https://github.com/jithesh-poojari/interior-design-website.git
-
Open the
index.htmlfile in a browser. -
Navigate between pages via the navigation bar.
- All forms use
<label>elements with correspondingforattributes. - Keyboard and screen-reader support built-in using
tabindexand ARIA. - All images include descriptive
alttext. - Contrast ratios meet WCAG AA guidelines.
- JavaScript loaded with
deferfor better page performance.
- Add backend with Node.js & Express for persistent storage.
- Implement admin panel for gallery and project management.
- Integrate authentication with database (JWT-based).
- Add custom theme builder and real-time form analytics.
- Extend to PWA for offline support.
“DreamSpace was built with attention to both detail and scalability. Every line of code reflects an understanding of how structure, accessibility and design coexist in modern web projects.”
This project enhanced the team’s grasp of responsive layouts, client-side validation, and user experience design, aligning academic learning with industry standards.
Throughout the project, AI tools (like ChatGPT and LMArena) were used for:
- Generating design ideas and layout inspiration.
- Writing clean, semantic HTML and optimized CSS.
- Improving accessibility and interactivity scripts.
- Refining project documentation and code quality.
AI acted as a development assistant, ensuring efficiency, clarity, and consistency in both design and documentation.
Developed as part of the Master of Computer Applications (MCA) program under the Web Technology course module. Special thanks to mentors and peers for guidance, collaboration, and creative feedback.
Licensed under the MIT License — free to use and modify with attribution.