Projects
Explore my portfolio of web applications, business automation solutions, and project management systems. Each project showcases real-world solutions built with modern technologies and best practices.
Project Types
Full-Stack
End-to-end web application development using React, Next.js, Node.js, NestJS, and modern backend architectures.
DevOps
CI/CD pipelines, cloud deployments, containerization, and infrastructure management using modern DevOps practices.
All Projects
4 projects
Hotel Booking Application (State Management - Redux Toolkit)
Hotel Booking Redux is a modern, scalable hotel booking frontend application built with React 18, Redux Toolkit, and Tailwind CSS. The project focuses on clean architecture, predictable state management, and a feature-based structure suitable for real-world, production-scale applications. Project Overview This application was originally implemented using React with the Context API and later refactored to Redux Toolkit to improve scalability, maintainability, and data flow clarity. It demonstrates how to migrate from simple state management to a more robust architecture as application complexity grows. Key Features • Centralized global state for rooms, availability, bookings, and filters using Redux Toolkit. • Predictable state updates through feature-based slices and immutable reducers. • Server-state management with RTK Query • Date-based availability and guest-capacity logic handled via global state. • Scalable architecture enabling easy extension of booking rules and business logic. Architecture & State Management The application follows a feature-based folder structure, organizing logic by domain such as rooms and bookings. Redux Toolkit slices handle local feature state, while RTK Query is used for API interactions, ensuring consistent and efficient data fetching. Technology Stack Frontend: React 18, Vite State Management: Redux Toolkit, RTK Query Styling: Tailwind CSS Routing: React Router DOM Libraries: React Date Picker, Swiper Slider, spinners-react Source Code View the full source code on GitHub: https://github.com/lochana0513/hotel-booking-redux What This Project Demonstrates This project showcases practical frontend engineering skills including Redux-based state management, scalable folder structures, reusable component design, and real-world UI patterns. It serves as a strong reference for developers transitioning from basic React applications to enterprise-ready frontend architectures.
Real-Time Dashboard with WebSockets (NestJS + React)
Dashboard WebSocket is a learning-focused real-time analytics dashboard built using NestJS, Socket.IO (WebSockets), React, and Vite. The project demonstrates how to stream live data from a backend to a frontend dashboard using WebSockets, backed by a local MongoDB database. Project Overview The backend connects to MongoDB, seeds multi-year dummy data on startup, and continuously mutates that data using scheduled jobs. Updates are pushed to connected clients in real time via a Socket.IO gateway, while REST APIs are used only to fetch the initial dashboard state. Key Features • Real-time data streaming using Socket.IO WebSockets. • Combination of REST APIs and WebSockets in a single application. • Live-updating charts, cards, and tables without page refreshes. • Automatic seeding and mutation of dashboard data. • MongoDB-backed persistence for historical sales, market, and channel data. • Clean separation of frontend and backend responsibilities. Backend Architecture The NestJS backend connects to a local MongoDB instance and manages multiple dashboard domains such as sales, market values, and channel metrics. Scheduled tasks update the data periodically, and a dedicated WebSocket gateway broadcasts changes to all connected clients in the /dashboard namespace. Frontend Architecture The React + Vite frontend fetches initial data using REST endpoints and then subscribes to WebSocket events for live updates. This approach ensures fast initial load times while keeping the UI fully synchronized with backend changes in real time. Technology Stack Frontend: React, Vite, Chart.js Backend: NestJS, Socket.IO, MongoDB Database: Local MongoDB Real-Time: WebSockets (Socket.IO) Data Behavior Sales data is seeded across multiple years and continuously extended. Charts compare the latest 12 months against the previous 12 months, while total sales values are always calculated from the most recent year. MongoDB retains full historical data beyond what is displayed in the UI. Source Code View the complete source code on GitHub: https://github.com/lochana0513/dashboard-websocket Learning Focus This project is intentionally built as a learning reference rather than a production system. It helps developers understand real-time application patterns, WebSocket communication in NestJS, frontend subscription handling in React, and MongoDB-backed dashboard architectures.
Azure Fullstack CI/CD Pipeline (GitHub Actions)
Azure Fullstack CI/CD Pipeline is a learning-focused repository that demonstrates how to design and implement CI/CD pipelines for a fullstack application using GitHub Actions and Microsoft Azure. The project focuses on deployment workflows rather than application complexity, making it a clean and practical reference for understanding real-world CI/CD structures. What This Project Demonstrates • Separate CI/CD pipelines for frontend and backend. • Path-based GitHub Actions triggers (client/** and server/**). • Frontend deployment to Azure Static Web Apps. • Backend deployment to Azure App Service. • Environment variable injection during build time. • Secure secret management using GitHub Actions secrets. CI/CD Architecture Frontend Pipeline The frontend pipeline is triggered when changes occur under the client/ directory. It installs dependencies, injects the backend API URL into environment variables, builds the Vite + React application, and deploys the generated dist/ files to Azure Static Web Apps. Backend Pipeline The backend pipeline runs when changes occur under the server/ directory. It builds the NestJS application, prepares a clean production bundle, installs production-only dependencies, packages the app into a ZIP archive, and deploys it to Azure App Service using ZIP deploy. Azure Setup (Simplified) Frontend: Azure Static Web App connected to GitHub (main branch). Backend: Azure App Service (Node.js, Linux). Deployment credentials and tokens are securely stored as GitHub Actions secrets. Local Development The project can be run locally using two terminals. The NestJS backend runs on http://localhost:3000, while the Vite + React frontend runs on http://localhost:5173. Environment variables are injected using .env files. Learning Focus This repository is intentionally minimal and not production-ready. It avoids authentication, authorization, and real business data to keep the focus purely on CI/CD concepts, deployment automation, and Azure integration. Source Code View the complete repository on GitHub: https://github.com/lochana0513/azure-fullstack-cicd-pipeline
Fullstack Containerized Deployment with Azure ACR
Fullstack ACR Deployment is a learning-focused project that demonstrates how to build, tag, push, and deploy containerized frontend and backend applications to Microsoft Azure using GitHub Actions and Azure Container Registry (ACR). The project showcases a real-world container-based CI/CD workflow where Docker images are built automatically, pushed to a private registry, and deployed to Azure Web Apps without manual intervention. What This Project Demonstrates • Multi-stage Docker builds for frontend and backend services. • Containerized Vite + React frontend served via Nginx. • Containerized NestJS backend running compiled production output. • CI/CD pipelines using GitHub Actions. • Automated image tagging and pushing to Azure Container Registry. • Azure Web App deployments using ACR-hosted images. Architecture Overview Frontend The frontend is built with Vite + React using a multi-stage Dockerfile. Application assets are compiled during the build stage and served via Nginx in the final image. Backend API URLs are injected at build time using environment variables. Backend The backend is a NestJS application packaged into a production-ready Docker image. The Dockerfile builds the application and runs the compiled dist output, ensuring a lightweight and efficient runtime container. CI/CD Workflow The CI pipeline detects changes under client/ or server/, builds the corresponding Docker images, tags them with both the commit SHA and latest, and pushes them to Azure Container Registry. The CD pipeline triggers automatically after CI completion and updates Azure Web Apps to use the newly pushed container images via az webapp config container set. Azure Integration • Azure Container Registry (ACR) for private image storage. • Linux-based Azure App Services for frontend and backend containers. • Secure authentication using Azure Service Principals. • Environment configuration handled via GitHub Secrets. Local Development & Docker The application can be run locally using Node.js or fully containerized using Docker. Developers can build and run frontend and backend images locally to mirror the production setup. Learning Focus This repository is intentionally minimal and not production-ready. It avoids authentication, authorization, and real business data to focus purely on containerization, CI/CD automation, and Azure deployments. Source Code View the complete repository on GitHub: https://github.com/lochana0513/fullstack-acr-deployment