Chaar Diwari Studio

Overview

As the developer of the Chaar Diwari Studio website, I crafted a visually stunning and highly functional digital platform that perfectly encapsulates the studio's blend of traditional and contemporary design principles. This project highlights the studio's architectural innovation and commitment to sustainability.

Important Pages

Portfolio Page

Features an interactive gallery of projects with detailed descriptions and high-resolution images.

Technologies: Used Masonry layout for the gallery and React Lightbox for image viewing.

Services Page

Provides in-depth descriptions of architectural, interior design, and urban planning services.

Technologies: Enhanced with CSS animations to highlight service categories on hover.

Contact Page

Features a user-friendly contact form with validation and integration with an email service for direct inquiries.

Technologies: Employed Formik for form handling and Yup for validation.

Technologies Used

• Frontend: React.js, HTML, CSS, JavaScript
• Styling: Tailwind CSS
• Backend: Node.js, Express.js
• Database: MongoDB
• Hosting: Porkbun

Key Features

• Interactive Portfolio: Utilized smooth animations and interactive elements to engage visitors, showcasing the studio's extensive portfolio in a visually appealing manner.
• Responsive Design: Ensured optimal viewing across all devices using Tailwind CSS and meticulous media query adjustments.

Challenges and Solutions

• Server Performance: Managing high traffic and data load was particularly challenging, especially after major marketing campaigns. To address this, AWS CloudFront and S3 were utilized for optimal performance and rapid load times.
• Scalability: The backend, built with Node.js and Express.js, was containerized using Docker, allowing for efficient handling of increased loads.
• Responsive Design: Ensuring the site performed well across various devices required detailed testing and adjustments using Tailwind CSS.