will fill bio later

github

projects

devto

Rohan Mirjankar • Peerlist

<h3>Features</h3><ul><li><strong>Financial Dashboard</strong>: Get a quick overview of your total spending, expense count, and top spending category.</li><li><strong>Expense Management</strong>: Add, view, edit, and delete expense records.</li><li><strong>Live Search &amp; Filters</strong>: Find expenses by title, category, or date.</li><li><strong>Category Breakdown</strong>: Explore spending distribution with a doughnut chart.</li><li><strong>Monthly Spending</strong>: Visualize monthly expenses using a bar chart.</li><li><strong>Monthly Budget</strong>: Set a budget and track it against your spending.</li><li><strong>CSV Export</strong>: Export expense records for spreadsheets and further analysis.</li><li><strong>Dark Mode</strong>: Switch themes for a more comfortable experience.</li><li><strong>Toast Notifications</strong>: Get feedback when actions succeed or fail.</li><li><strong>Local Database</strong>: Store expense records in SQLite on your machine.</li></ul><h3>Tech Stack</h3><ul><li><strong>Frontend:</strong> HTML5, CSS3, Vanilla JavaScript</li><li><strong>Backend:</strong> Node.js, Express.js</li><li><strong>Database:</strong> SQLite with better-sqlite3</li><li><strong>Charts:</strong> Chart.js</li><li><strong>Version Control:</strong> Git and GitHub</li></ul><p>No frontend framework required. Just the fundamentals, put to work.</p><h3>Get Started</h3><h4>Prerequisites</h4><p>Install the following before running the application:</p><ul><li><a href="https://nodejs.org/" rel="nofollow">Node.js</a> — preferably a current LTS release</li><li><a href="https://git-scm.com/" rel="nofollow">Git</a></li></ul><h4>1. Clone the repository</h4>git clone https://github.com/rohans-cs24/Expense-Tracker.git
cd Expense-Tracker<h4>2. Install dependencies</h4>npm install<h4>3. Start the server</h4>node server.js<h4>4. Open the application</h4><p>Visit:</p>http://localhost:3000<p>🎉 That's it! Your local expense tracker is ready.</p><p><strong>Note:</strong> Run the application through the Express server rather than opening index.html directly. This allows the frontend to communicate with the backend API.</p><h3>How It Works</h3>┌─────────────────────────────┐
│ Browser UI │
│ HTML · CSS · JavaScript │
└──────────────┬──────────────┘
 │ HTTP requests
 ▼
┌─────────────────────────────┐
│ Express API │
│ CRUD · Validation · Routes │
└──────────────┬──────────────┘
 │ SQL queries
 ▼
┌─────────────────────────────┐
│ SQLite │
│ Local expense data │
└─────────────────────────────┘<h3>API Endpoints</h3>GET/api/healthCheck server healthGET/api/expensesRetrieve expensesPOST/api/expensesCreate an expensePUT/api/expenses/:idUpdate an expenseDELETE/api/expenses/:idDelete an expense<h3>Project Structure</h3>Expense-Tracker/
├── public/
│ ├── index.html # Application interface
│ ├── style.css # Styling and themes
│ └── script.js # Frontend logic and charts
├── database.js # SQLite connection and schema
├── server.js # Express server and API routes
├── seed.js # Optional sample-data seeder
├── package.json # Project metadata and dependencies
├── package-lock.json # Locked dependency versions
├── .gitignore
└── README.md<p><em>Your exact file structure may differ slightly depending on your latest changes.</em></p><h3>Data &amp; Privacy</h3><ul><li>Expenses are stored in a local SQLite database.</li><li>Each person running the application locally can have their own database.</li><li>The database file is created automatically when the application initializes.</li><li>Sample data can be added with the seed script, if configured.</li></ul><p><strong>Important:</strong> Do not commit your real expense database or personal financial data to GitHub. Keep expenses.db in your .gitignore.</p><p>The monthly budget and theme preferences are stored in browser localStorage, so they are specific to that browser.</p><h3>Security Notes</h3><ul><li>Never commit secrets, credentials, or personal financial records.</li><li>Validate user input on the server.</li><li>Keep dependencies updated.</li><li>Use a proper persistent database before hosting the application for real users.</li></ul><h3>License</h3><p><a href="/Rohan-Shridhar/Expense-Tracker/blob/main/LICENSE">Apache License 2.0</a></p><p><strong><a href="https://rohan-mirjankar.is-a.dev" rel="nofollow">Rohan S Mirjankar</a></strong></p>

Expense Tracker

<h3>Overview</h3><p>TrashTrace is a full-stack web application that lets anyone create a traceable waste shipment, generate a QR code to attach to the physical package, and verify whether that package reached its intended destination (e.g. a recycling centre) based on GPS scan data. It is built for transparency — the system explicitly states that tracking is QR-scan-based, not physical movement tracking.</p><h3>Architecture</h3><p>The project is structured into a frontend and backend:</p><ul><li><strong>Frontend:</strong> Built with <strong>React</strong> and <strong>Vite</strong>, it serves as a Single Page Application (SPA). Key components include pages for creating shipments, tracking shipments, scanning QR codes, and an owner dashboard. It also utilizes utility functions for geolocation and owner token management.</li><li><strong>Backend:</strong> Developed using <strong>Node.js</strong> and <strong>Express</strong>, it functions as an API that can also be deployed as a Vercel serverless function. It connects to MongoDB using <strong>Mongoose</strong> for data persistence, defining models for Trash, Scan, and Notification. Routes handle trash shipments and notifications, with utility functions for geocoding addresses (using OpenStreetMap Nominatim) and calculating distances (Haversine formula). Tests are managed with <strong>Jest</strong>.</li></ul><h3>Features</h3><ul><li><strong>Create Shipment:</strong> Register a waste package with type, destination, and GPS source location.</li><li><strong>QR Code Generation:</strong> Generate a scannable QR code per package for download or printing.</li><li><strong>Scan &amp; Track:</strong> Couriers scan the package, and GPS coordinates are logged.</li><li><strong>Delivery Verification:</strong> Packages are marked DELIVERED if scanned within a configurable radius of the destination.</li><li><strong>Owner Dashboard:</strong> A device-based dashboard displays all packages and notifications for the owner.</li><li><strong>Notifications:</strong> An in-app notification log tracks package scans and deliveries.</li><li><strong>Geocoding:</strong> Destination addresses are geocoded via OpenStreetMap Nominatim.</li></ul><h3>Local Setup</h3><p><strong>Prerequisites:</strong></p><ul><li>Node.js ≥ 18</li><li>MongoDB Atlas account or a local MongoDB instance</li></ul><p><strong>Steps:</strong></p><ol><li>Clone the repository and install dependencies using npm.</li><li>Copy the .env.example file to .env and configure your MongoDB connection string.</li><li>Run the application locally using npm run dev.</li></ol><h3>Vercel Deployment</h3><p>The project can be deployed to Vercel. The setup involves pushing the code to GitHub, importing the project into Vercel, configuring environment variables (including the MongoDB URI and Vercel deployment URL), and Vercel handles the build and deployment process, serving the React SPA and the Node.js serverless function.</p><h3>API Endpoints</h3><p>The backend exposes several API endpoints for managing shipments, scans, and notifications, including:</p><ul><li>GET /api/health: Health check.</li><li>POST /api/trash: Create a new trash shipment.</li><li>GET /api/trash/:trackingId: Get tracking info.</li><li>POST /api/trash/:trackingId/scan: Record a courier scan with latitude and longitude.</li><li>GET /api/notifications/:token: Get notifications for an owner.</li></ul><h3>How QR Tracking Works</h3><p>A unique tracking ID is generated for each shipment, and a QR code is created encoding the tracking URL. When a courier scans the QR code, their GPS coordinates are sent to the backend. The system then calculates the distance to the destination and updates the package status to DELIVERED or IN_TRANSIT. Notifications are generated if an owner token is provided.</p><p><strong>Important Limitation:</strong> This system tracks QR code scans, not physical package location. A scan near the destination suggests arrival but does not guarantee it.</p>

QR-based waste tracking system

<h3>GridCraft: A React-Powered Pixel Art Tool</h3>
<p>GridCraft is an innovative pixel art application built with React, offering a user-friendly interface for creating digital art on a customizable grid. Whether you're a seasoned artist or a beginner, GridCraft provides a streamlined experience for bringing your pixel art visions to life.</p>
<ul>
<li><strong>Multiple Grid Sizes</strong>: Choose from 16x16, 32x32, 64x64, or 128x128 canvases to suit your project's needs.</li>
<li><strong>Full RGB Color Support</strong>: Utilize an intuitive RGB color picker to select from the entire spectrum of colors.</li>
<li><strong>Export as PNG</strong>: Easily download your creations in PNG format for sharing and further use.</li>
<li><strong>Intuitive Controls</strong>: Features like right-click drawing, a dedicated eraser mode, and clear canvas functionality make art creation seamless.</li>
<li><strong>Undo/Redo Functionality</strong>: Work with confidence thanks to a robust undo and redo system that tracks your changes.</li>
<li><strong>Real-time Updates</strong>: See your artwork evolve instantly with immediate visual feedback as you draw.</li>
</ul>
<p>The application is built using modern React patterns and demonstrates efficient state management. It's designed to be a lightweight and accessible alternative to complex art software, making pixel art creation more approachable.</p>
<p>Key technical aspects include:</p>
<ul>
<li><strong>React 18 (CDN)</strong>: Leverages React for a component-based architecture, loaded directly via CDN.</li>
<li><strong>In-Browser JSX Transpilation</strong>: Uses Babel Standalone for on-the-fly conversion of JSX to JavaScript.</li>
<li><strong>PNG Export System</strong>: Employs html2canvas for high-resolution image exports, ensuring clean output by temporarily adjusting grid styles.</li>
<li><strong>Undo/Redo System</strong>: Implements a history tracking mechanism using a past, present, and future state pattern.</li>
</ul>
<p>Explore the live demo and detailed user manual for a comprehensive understanding of GridCraft's capabilities.</p>

Pixel art application with adjustable grids

<h3>Kravoxin is a lightweight Chrome extension designed to capture and organize your clipboard history, ensuring you never lose a copied snippet again.</h3><ul><li><strong>Auto Capture:</strong> Automatically saves every text snippet copied from a webpage to your history with zero user effort.</li><li><strong>Local Storage:</strong> All clipboard history is stored securely on your device using `chrome.storage.local`, ensuring complete privacy with no cloud synchronization.</li><li><strong>Lightning Fast:</strong> Features a minimal footprint and provides instant access to your clipboard history through a clean, intuitive popup interface.</li><li><strong>Favorite Items:</strong> Allows users to mark important snippets as favorites, protecting them from bulk deletions.</li><li><strong>Easy Deletion:</strong> Offers the ability to instantly remove unwanted items or clear all non-favorite entries with a single click.</li><li><strong>Modern Design:</strong> Boasts a beautiful dark theme with glassmorphism effects for a visually pleasing user experience.</li></ul><p>Installation is straightforward: clone or download the repository from GitHub, navigate to `chrome://extensions/`, enable developer mode, and load the unpacked Kravoxin folder. Once installed, simply copy text anywhere on the web and click the Kravoxin icon to view your clipboard history.</p><p>Connect with the developer via GitHub, LinkedIn, Instagram, or email. Report bugs directly through the integrated bug report form, which creates a GitHub issue.</p>

Kravoxin - Clipboard History Manager

<h3>Jump to Your Favorite Websites Instantly</h3><ul><li><strong>Lightning Fast:</strong> Opens in milliseconds with zero load time for pure speed.</li><li><strong>Smart Favicons:</strong> Automatically detects and displays favicons for over 200 tech stacks.</li><li><strong>Local Storage:</strong> Your bookmarks stay on your machine, ensuring privacy with no cloud sync or tracking.</li><li><strong>Zero Dependencies:</strong> Built with Vanilla JavaScript, offering pure code without frameworks or bloat.</li><li><strong>Beautiful Design:</strong> Features a clean grid layout and smooth animations for an intuitive user experience.</li><li><strong>Bulk Delete:</strong> Easily remove multiple bookmarks at once using simple checkboxes.</li></ul><p>Add your favorite websites once and access them forever with a single click. No more lost tabs or endless searching.</p><h4>Install in 3 Simple Steps:</h4><ol><li><strong>Clone or Download:</strong> Get the code from GitHub.</li><li><strong>Load as Extension:</strong> Enable Developer Mode in Chrome extensions and load the unpacked HopTab folder.</li><li><strong>Start Using:</strong> Click the HopTab icon and begin adding your websites.</li></ol><p>Built with ❤️ by Rohan under the Apache 2.0 License.</p>