AYAN
MULANI

Overview

Campus Connect is a campus-focused platform designed to bring students, faculty and campus services together in one place.

Problem

In college environments, notices, club announcements, and study materials are often scattered across disparate chat groups and physical notice boards, making it difficult for students to find timely academic resources.

Approach

Designed a role-based web architecture where administrators and faculty post official notices, share course notes, and organize events, while students access personalized dashboards and club discussions.

Key Features

• Role-based authorization for students, faculty, and administrative staff
• Centralized repository for subject study materials and course notes
• Campus events calendar and official notice bulletin
• Student clubs showcase and community messaging

Technology Stack

What I Learned

Gained practical experience designing relational schemas, managing user sessions, structuring multi-role permission layers, and crafting responsive UI layouts that adapt across mobile and desktop devices.

Overview

A web-based employee and payroll management system designed to manage employee records, attendance, leave and payroll operations.

Problem

Manual payroll calculations and paper-based attendance logging often lead to human errors, delayed salary disbursements, and lack of transparency in deductions and leave balances.

Approach

Engineered a relational database-backed application that automatically computes basic pay, allowances, and tax deductions based on validated attendance records and approved leave requests.

Key Features

• Complete employee database with search and department filtering
• Attendance tracking with present, absent, and late markers
• Leave application workflow with manager approval mechanism
• Automated payroll calculation with salary slip generation

Technology Stack

What I Learned

Practiced SQL queries, data validation routines, transactional integrity, and building clean web application workflows with Python and Flask.

Overview

Finance Dashboard is a data-focused financial web application built with React, Vite, Tailwind CSS, and Recharts for tracking income, analyzing expenditures, and monitoring personal or business cash flow.

Problem

Tracking personal finances across bank statements or manual spreadsheets makes it hard to identify spending trends, category bottlenecks, and real-time net balances at a glance.

Approach & Data Visualization

Constructed interactive visual graphs including an expense distribution Pie Chart to pinpoint top expenditure categories and a chronological Cash Flow Line Chart to visualize balance trajectories over time.

Key Features

• Live KPI metric cards for Net Balance, Total Income, and Total Expenses
• Interactive Recharts spending Pie Chart and chronological Line Chart
• Full transaction ledger with search, category filtering, and sorting
• Role switching (Admin / Viewer), dark theme toggle, and CSV export

Technology Stack

What I Learned

Deepened understanding of React state management (`useState`, `useMemo`, `useEffect`), integrating data visualization charting libraries (Recharts), dynamic SVG rendering, and persistent storage via browser `localStorage`.

Overview

Weather Intelligence Dashboard is a meteorological intelligence platform providing real-time global weather conditions, hourly weather predictions, 7-day extended forecasts, and GPS-based geolocation detection without requiring external API keys.

Problem

Many weather applications require paid subscription keys, have cluttered advertisement-heavy interfaces, or fail to present hourly forecast granularity alongside comprehensive meteorological metrics like surface pressure and sunrise/sunset timings.

Approach & Integration

Integrated Open-Meteo's open meteorological REST API paired with geocoding lookups and the HTML5 Geolocation API, architecting an asynchronous data pipeline that maps WMO interpretation codes to intuitive weather condition badges and dynamic responsive layouts.

Key Features

• Global city geocoding with localStorage search history caching
• Horizontal scrollable 12-hour hourly forecast timeline
• 7-Day high/low temperature predictions with condition icons
• Browser GPS coordinate detection with graceful permission fallbacks

Technology Stack

What I Learned

Practiced asynchronous JavaScript (`async`/`await`, `fetch`), REST API response parsing, coordinating multi-endpoint queries (geocoding + weather forecasting), and architecting error-resilient skeleton states.

Overview

Smart Expense Tracker is a personal finance management tool designed to track daily expenditures, monitor monthly budget utilization, analyze category spending via Chart.js, and export transaction ledgers to CSV.

Problem

College students and freelancers often struggle to track recurring expenses, manage discretionary spending within a target budget, or identify category spending bottlenecks without cumbersome accounting software.

Approach & Data Persistence

Implemented an offline-capable client-side architecture using browser `localStorage`, tying real-time CRUD operations to recalculate financial KPI balances, budget progress meters, and dynamic Chart.js doughnut and bar visualizers.

Key Features

• Dynamic calculation of Net Balance, Income, Expense, and Monthly totals
• Configurable monthly budget with threshold warning progress indicators
• Interactive Chart.js category doughnut chart and income vs expense bar chart
• One-click CSV ledger export and complete localStorage data management

Technology Stack

What I Learned

Enhanced skills in array transformation routines (`filter`, `reduce`, `sort`), integrating charting visualization libraries, managing form validations, generating client-side CSV files, and implementing theme-aware UI states.

Overview

Developer Notes & Knowledge Manager is a lightweight study workspace designed for computer science students and engineers to organize algorithms, programming language concepts, DBMS principles, and interview preparation snippets.

Problem

Technical notes containing code blocks, algorithms, and theory are often scattered across text files, IDE scratchpads, and browser tabs, making structured search, tagging, and revision inefficient.

Approach & Markdown Engine

Created a custom lightweight Markdown regex engine to parse headings, code snippets, lists, and bold text without third-party heavy editor libraries. Built a full JSON backup and restore module to ensure complete data portability.

Key Features

• Lightweight Markdown reader with code block highlighting
• Domain category tabs (Java, DSA, DBMS, Python, JS, Web) and tag filtering
• Pinning mechanism to prioritize key revision and interview topics
• Single note `.txt` download, database JSON backup, and JSON restore

Technology Stack

What I Learned

Built custom regex string parsers, handled complex DOM manipulations, structured client-side file reading (`FileReader`), and implemented full-text search indexing algorithms across multi-field data objects.