Delwo
Athauda
I'm Delwo Athauda, a dedicated IT graduate skilled in Full-Stack Development and Emerging Technologies. Education & Experience: ▶ Bachelor of Information Technology, majoring in Web and Mobile Application Development. ▶ Strong foundation in Full-Stack Development, particularly with the MERN Stack. ▶ Capable of building AI-driven full-stack applications to create intelligent, data-driven solutions. ▶ Hands-on experience in delivering user-focused digital solutions. Technical Expertise: ✔ Full-Stack Development: React, Node.js, Express.js, MongoDB, Mongoose, Redux, Redux Toolkit, RTK Query, REST API, Shadcn UI, Tailwind CSS, Git/GitHub. ✔ Programming Languages: JavaScript, TypeScript, Java, Python. ✔ Database Management: MySQL, MongoDB. ✔ API Integration: OpenAI API, REST API. ✔ Additional Skills: Prompt engineering for optimizing Large Language Models (LLMs). Key Strengths & Achievements: 🏅Best Performer award recipient for outstanding academic achievement as the top-performing graduate in my degree program. ✔ Strong problem-solving abilities to tackle complex challenges effectively. ✔ Demonstrated leadership skills with the ability to guide and inspire teams. ✔ Excellent communication and presentation skills for conveying ideas clearly and engagingly. ✔ Proficient in Object-Oriented Programming (OOP) principles and experienced with UML diagrams for designing system architectures. Career Aspirations: 🚀 Life Goal: Build a large-scale, impactful application with a sustainable and strong team to solve significant problems and be the solution to them. 🎯 Next Career Goal: Advance in Full-Stack Development by gaining expert-level expertise through diverse projects, becoming a professional in the field, and integrating AI to build AI-driven full-stack applications. Eventually, transition into the AI and ML space as part of a 5-year career progression. 🔹 Core Interests: Full-Stack Development | AI-Driven Application Development | Scalable Software Solutions | Tech Leadership
Tech stack
Projects
Office IT - Product Cataloge (Client Project) (Website)
🔖 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 Identified during early discussion with the client. Business lost leads due to the lack of browsing capability. 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 Component-based architecture with reusable elements. Smooth user experience with dynamic filtering and layout transitions. 2. Backend – Node.js + Express Built RESTful APIs to handle product data. Lightweight server suitable for catalog functionality. 3. Database – MongoDB with Mongoose Flexible schemas for diverse product types. Auto-incrementing product ID system for readability. 4. Authentication – Clerk Enterprise-grade secure login/signup for admin only. Role-based access via Clerk publicMetadata . 5. Deployment – Vercel Zero-config, CI/CD, fast deployment for both frontend and backend. 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.
Horizone Hotels - AI Driven Hotel Booking & Management System (AI-Powered Booking Platform)
🔖 Introduction About the project Horizone is an AI-powered hotel booking platform designed to redefine the accommodation search experience using natural language. Built as a personal showcase project, it demonstrates how semantic AI, clean architecture, and full-stack engineering can be integrated to deliver a modern, intuitive travel platform. Users can search for hotels using natural language (e.g., “peaceful beachfront with ocean views”), book stays securely with Stripe, and manage bookings via their account. Admins (hotel owners) can add hotels to the platform. The platform prioritizes both technical sophistication and user-friendly design. 🤔 Problem Space Problems to Solve / Requirements to Create Traditional booking platforms rely on rigid keyword matching and filters, forcing users to adapt their input to the system’s constraints. Hotel owners lack intelligent visibility to the right guests, and travelers often struggle to find accommodations that match their true preferences. 👉 Rigid Keyword-Based Hotel Search Most existing platforms use exact keyword matching, which fails to capture the real intent behind user searches. Previous Approach Users often had to repeatedly modify search keywords or filter options to get relevant results, which was time-consuming and inefficient. How do we know it is a problem Travelers spend more time trying to make the system understand them than actually making decisions. Leads to abandoned bookings and low satisfaction for users who can't easily describe what they want. 👉 Lack of Intent-Based Hotel Discovery Users want to describe their preferences in plain English (e.g., "eco-friendly mountain hotel near a waterfall") but can't with traditional platforms. Previous Approach Users are forced to use generic filters (location, price, etc.) and browse through hundreds of listings manually. How do we know it is a problem First-time users unfamiliar with filter systems experience higher bounce rates. Travel planning forums show users often seek recommendations outside of booking platforms due to friction. Why solve these problems? Provide travelers with faster, smarter, and more intuitive hotel discovery. Increase booking conversion rates by reducing friction in the search process. Offer hotel owners better visibility by matching their listings with high-intent users. Goals Project Objective 🎯 To create a modern, AI-integrated hotel booking platform that understands user intent and delivers relevant hotel matches while offering a secure, scalable experience for both guests and hotel owners. Project Goals Built a clean-architecture backend to ensure long-term maintainability and scalability. Developed AI-powered semantic search using OpenAI and MongoDB Atlas Vector Search. Designed a responsive, accessible UI with Shadcn and TailwindCSS. Implemented full authentication and RBAC using Clerk. Created a secure end-to-end booking and payment flow via Stripe. Integrated dynamic booking state visuals and account-level history views. User Stories 👤 Guest (Traveler) The traveler visits the platform to discover hotels that match their specific preferences, makes bookings, and manages their stays. Goals : Find hotels easily using plain language, book seamlessly, track bookings. Needs : Smart search, visual booking status, clear filters, mobile-friendly design. Other characteristics : May be first-time users; expects intuitive and fast experiences. 🧑💼 Admin / Hotel Owner Hotel owners sign up and are assigned admin roles to list their properties and manage visibility to potential guests. Goals : Add hotels easily, showcase them with rich descriptions and pricing. Needs : Secure login, easy-to-use form system, role-based access. Other characteristics : Varying tech familiarity; system must be accessible and secure. 🌟 Design Space UI Design The UI is clean, consistent, and mobile-responsive, designed using Shadcn UI with Tailwind. Booking statuses are color-coded for clarity. Layouts are modular, with role-protected sections and clearly defined CTAs. Toast feedback is provided via Sonner, enhancing the interaction experience. Low-fidelity Wireframe Early wireframes were created using Figma to visualize the landing page with the AI search interface, the my account page, and create hotel page. High-fidelity design Final designs reflect a high-end booking platform, with gradient backgrounds, interactive filtering, and semantic search bar. Design system 🎨 Horizone uses: Shadcn UI for design consistency and accessibility. Tailwind CSS for utility-based styling. 🛠 Development Phase Technology Stack Selection Frontend – React + Vite + Redux Toolkit + RTK Query Modular component-based UI for fast, interactive booking experiences. RTK Query for powerful and efficient API interaction. Backend – Node.js + Express + TypeScript Type-safe server logic with business logic abstraction. Layered clean architecture for scalability and clarity. Database – MongoDB + Mongoose + Atlas Vector Search Dynamic data modeling and semantic vector-based search indexing. Embedded document structures and indexed fields. Authentication – Clerk Secure, token-based authentication with public metadata for role-based access control. Payments – Stripe Full payment integration for guest bookings. Handled webhooks and success/cancel state flows. AI Integration – OpenAI + LangChain + MongoDB Vectors Implemented embeddings via OpenAI to convert search queries into vectors. Used LangChain + MongoDB Atlas Vector Search for real-time semantic matching. High-Level Architecture Diagram Follows a Client–Server Architecture with a React frontend and Express/NodeJS backend. Client (Frontend): The ReactJS web application acts as the client, initiating requests (e.g., search queries, bookings) and rendering UI based on responses. Server (Backend): The NodeJS + Express backend handles those requests, processes logic, communicates with OpenAI (for semantic search), and interacts with the database. Database Layer: MongoDB stores all persistent data, mediated via Mongoose (ODM) — part of the server's infrastructure. Third-party Services : Stripe and OpenAI are integrated as external services the server interacts with. Entity Relationship Diagram / Class Diagram Key Features of the Software 1. 🧠 AI-Powered Semantic Search Natural language search powered by OpenAI embeddings. Vector search via MongoDB Atlas for high-relevance results. 2. 💳 Booking & Stripe Payment Integration Functional booking system with real-time availability, checkout, and payment handling. Post-payment confirmation screens with detailed breakdowns. 3. 🔐 Role-Based Access & Clerk Auth Admins can create hotel listings via protected pages. Clerk metadata used to gate access and define UI logic per user role. 4. 📘 Booking History & Status Tracking Guests see all past/current bookings in My Account. Color-coded booking statuses: Blue (Upcoming), Yellow (Active), Green (Completed), Red (Cancelled). 5. 📄 Clean Architecture with Type Safety Domain-level DTOs with Zod ensure validation on both backend and frontend. Utility logic abstracted into service files like price-calculations and payment-handling. ⚠️ Challenges Faced and Solutions Implementing payment flow with Stripe was initially a challenge. During development, payments either failed outright or succeeded but returned incorrect post-payment status like “payment failed.” These bugs consumed considerable time and created confusion. After thoroughly reviewing Stripe’s documentation, watching targeted tutorials, and debugging with AI support, I identified and fixed the misconfigured response handlers. This experience deepened my understanding of payment gateway integration and state synchronization. Additionally, working with embeddings and vector databases for the first time posed a steep learning curve. Concepts like semantic encoding, vector similarity, and real-time vector search using LangChain and MongoDB Atlas required focused learning. Despite the difficulty, I successfully integrated OpenAI's embedding API and built a functional semantic search experience — transforming how users discover hotels on the platform. 🔮 Future Vision / Next Steps Horizone’s roadmap includes powerful admin tooling and booking availability features. Planned enhancements: MA comprehensive Hotel Owner Dashboard to view/edit/delete hotels and track analytics. A Booking Slot Availability System to ensure each hotel has fixed daily capacity; dates will be disabled once daily limits are hit. UI Revamp with smoother transitions, animations, and accessibility features. Possible evolution into a hosted SaaS offering for small boutique hotels.