🔖 Introduction
About the project
Office IT Website is a full-stack web application built for Office IT (Pvt) Ltd, a Sri Lankan company selling a wide range of office equipment, retail tech hardware, and accessories. The project was designed to provide the client with a modern, mobile-responsive product catalog website to enhance online presence, build trust, and offer customers a convenient way to explore the company’s offerings.
This catalog-style website does not include payment gateways but focuses on clear product display, dynamic filtering, contact options, and an admin dashboard for managing products. As a solo freelance developer, I handled the full-stack development, UI/UX design, and deployment.
🤔 Problem Space
Problems to solve/Requirements to Create
Office IT needed to establish a strong online presence to increase trust and credibility. At the time, customers had to contact the company by phone to inquire about products and pricing, which was time-consuming and lacked transparency.
👉 Lack of Online Presence
The business had no official website, which made it difficult to establish legitimacy and trust with potential customers. There was also no central platform to display products, prices, and availability.
Previous Approach
The company relied solely on direct phone conversations or walk-in visits. Customers had no easy way to browse available products beforehand.
How do we know it is a problem
Repeated product inquiry calls caused unnecessary workload.
Customers often asked for brochures or pictures over WhatsApp, indicating a lack of centralized reference.
👉 Difficult Customer Communication
Customers had to engage in lengthy conversations to understand what Office IT sells. This created friction and potentially drove away buyers.
Previous Approach
Customers would call the business, describe their needs, and staff would explain the products over the phone or send images manually via WhatsApp.
How do we know it is a problem
Why solve these problems?
Improve customer experience through faster product discovery.
Build brand trust and legitimacy with a proper digital platform.
Reduce unnecessary operational overhead from repeated inquiries.
Goals
Company Objective 🎯
“To establish a modern online catalog website platform that increases brand trust and customer convenience while simplifying the internal product listing process.”
Project Goals
Built a responsive website to showcase product offerings in a professional manner.
Created an advanced admin dashboard to manage products and categories.
Enabled real-time filtering and search capabilities for an intuitive browsing experience.
Implemented role-based authentication for secure admin access.
Integrated communication tools like contact forms, WhatsApp, and newsletter management.
User Stories
🧑💼 Visitor (Customer)
A typical customer is browsing the website to check available office equipment, specifications, and prices.
Goals: Explore product catalog; contact the company through convenient channels.
Needs: Easy-to-navigate interface; clear pricing and specifications.
Other characteristics: Mostly mobile users; not tech-savvy.
🛠️ Admin (Business Staff)
Office IT staff manage the backend system to add/edit products and handle customer inquiries.
Goals: Add products quickly, manage categories, and update pricing.
Needs: Simple, non-technical dashboard interface; secure access.
Other characteristics: Varying tech skills; prefer minimal training.
🌟 Design Space
UI Design
The UI design focuses on a clean aesthetic using soft shadows, modern spacing, and component modularity. The user experience was tailored for both desktop and mobile users, with collapsible filters, responsive product grids, and clear CTAs.
High-fidelity Design
Design mockups include homepage layout, category pages, product detail views, and admin dashboard modules. Mobile views include responsive layouts for product filtering and contact forms.
Design System 🎨
The design system used a hybrid of:
Tailwind CSS: For utility-first styling.
ShadCN UI: For consistent, accessible UI components across the app.
This ensured scalable design consistency while speeding up development and responsiveness.
🛠 Development Phase
Technology Stack Selection
1. Frontend – React + Tailwind + ShadCN
2. Backend – Node.js + Express
3. Database – MongoDB with Mongoose
4. Authentication – Clerk
5. Deployment – Vercel
Key Features of the Software
1. 🔧 Product Management System
Full CRUD capabilities with auto-generated 5-digit product IDs via MongoDB counter model.
Dynamic category management with a limit of 8 featured products.
Expandable product tables and advanced admin UI.
📸 [Admin dashboard showing product editing modal]
2. 🛍️ Product Catalog + Filtering
Real-time filtering with price sliders, categories, and availability.
Instant search across product names and descriptions.
URL-state management for shareable filters.
📸 [Filtering sidebar in action with results auto-updating]
3. 🔐 Role-based Authentication with Clerk
Clerk integration for secure login/signup at /officeit-admin/login and /officeit-admin/signup.
Protected routes enforced on frontend and backend.
Route-based layout protection.
📸 [Login UI with role verification flow]
4. 🖼️ Image Management via Cloudinary
Drag-and-drop upload with real-time previews.
Auto-formatting and optimization using Cloudinary URL transformations.
Consistent folder structuring and CDN delivery.
📸 [Cloudinary upload interface with preview]
5. 📬 Communication & Newsletter System
Contact form with Gmail SMTP integration.
Auto email generation with formatted templates.
Brevo (Sendinblue) newsletter integration with immediate feedback and graceful error handling.
WhatsApp, phone number, and email quick access links.
⚠️ Challenges Faced and Solutions
Throughout this project, I encountered a few notable challenges—both technical and communication-related—that helped me grow significantly as a full-stack developer.
🧠 Translating Technical Concepts to a Non-Technical Client
One key challenge was explaining complex technical features, such as authentication logic or image optimization processes, to a non-technical client. The client was focused on outcomes rather than implementation, so I had to adapt my communication style accordingly.
Solution:
I learned to break down technical concepts into plain, relatable language—using analogies, visuals, and live demonstrations during meetings. This helped the client clearly understand what was being built, why it mattered, and how to use it effectively post-deployment. It also allowed for smoother sign-offs and trust-building throughout the project lifecycle.
🔐 Clerk Production Deployment Issue on Vercel
Another significant challenge came during the deployment phase when migrating Clerk authentication from development to production. Clerk requires a verified custom domain to switch from development mode, and since the app was deployed on Vercel, I had to go through a series of steps to properly connect the domain and verify the production environment.
At first, despite reading through Clerk’s official documentation and community threads, the production mode would not activate correctly. I also consulted with experienced developers using Clerk, but their guidance didn’t fully resolve the issue.
Solution:
After a few days of focused trial and error, I identified the root cause as a DNS misconfiguration. I resolved the issue by correctly pointing the domain’s nameservers to Vercel, adding the required CNAME records, and performing domain verification through Clerk’s dashboard. This seemingly simple configuration turned out to be a time-consuming and detail-sensitive task, but it gave me hands-on experience in DNS management, custom domain setup, and third-party auth provider integration at a production level.
This experience not only sharpened my deployment troubleshooting skills but also taught me the importance of closely understanding how third-party services like Clerk interact with deployment platforms like Vercel.
Future Vision / next steps
While no formal roadmap is confirmed, the following features could be considered for future versions:
Long-term vision
Add shopping cart and payment gateway for e-commerce expansion.
Implement real-time customer chat (e.g., WhatsApp floating widget).
Include analytics dashboard for tracking product views and inquiries.
Enable multi-admin roles with different permission levels.
Get visibility from recruiters & peers