javascript
I Built an AI Finance Tracker with WhatsApp & Google Sheets
I built a practical AI-powered finance tracker that makes recording and organizing personal finances easier. The workflow allows me to send income and expense information through WhatsApp, process the data automatically, and organize it in Google Sheets. The goal was simple: turn everyday financial messages into structured records without manually entering everything into a spreadsheet. Built with: • JavaScript • React • Google Sheets • API Integration • Automation • WhatsApp This project is part of my journey building practical software that solves real-world problems. What would you improve or add to this finance tracker?
I Built a Real Business Website with an AI Assistant & Visitor Tracking
I built a real-world business website for Master Baja Bangunan — a building-materials business in Tangerang, Indonesia. But I didn't want to build just another company website. I wanted to turn a traditional building-materials business into a more interactive digital experience. The website includes: 🤖 AI-powered Material Assistant Visitors can ask questions about building materials and get help estimating materials such as cement, sand, lightweight bricks, rebar, and more. 📊 Visitor Tracking The website includes visitor information so the business can understand website activity. 💬 WhatsApp Integration Customers can quickly contact the business directly from the website. 🌐 Responsive Business Website Designed to present products, pricing, location, business information, and customer contact options in one place. 🌍 Bilingual Experience The website supports Indonesian and English. This project taught me something important: A good website isn't just about how it looks. It's about solving a real business problem. I built this project from scratch as a self-directed developer, combining web development, AI integration, automation, and real-world business requirements. 🔗 Live website: https://masterbajabangunan.my.id/ I'd love to hear from other developers: What would you add to this system next? webdevelopment ai automation javascript aiintegration business fullstack portfolio
Shipped: AI Code Explainer — paste code, get a plain-language explanation
Built a small tool that explains any code snippet in plain language — useful when you're reading unfamiliar code or just want a quick refresher. What it does: - Explain like I'm a beginner / intermediate / concise / line-by-line modes - Auto-detects the programming language - Saves explanation history locally - Clean dark UI, built from scratch Stack: HTML/CSS/JS frontend, Node.js serverless backend (Vercel), Groq API for the AI part. Live: [https://ai-code-explainer-fj7e3o9fw-qurat-ul-ain1.vercel.app/] Would love any feedback — especially on what explanation modes or features would be useful to add next.
Your CLI could handle your entire API workflow
Hello world devs! Imagine being able to create, test, debug and chain APIs right from your terminal No Postman. No switching tabs. Just your CLI. So... I came up with APIX. It's a CLI tool I've been building to make working with APIs a little easier You can: - Run GET, POST, PUT, PATCH & DELETE requests - Generate API requests using AI - Save and reuse requests - Manage environments & variables - Chain multiple APIs into a single workflow For example: "POST login → GET credentials → PATCH profile → POST orders → GET confirmation" ...all as one chain. It's still very much a work in progress, but I'm pretty happy with where it's going. Would love to know what you guys think... and what you would add to something like this GitHub: https://github.com/Aayush4518/apix npm install -g apix-dev-cli
I Built a 3D Particle Universe You Can Control With Your Hands ✋🌌
What if you could control a 3D world without a mouse or keyboard? I built AetherParticles 3D — an interactive particle universe where hand gestures become the controls. Just a camera, your hands, and thousands of particles. ✋ Gesture → Action ✊ Fist → Implode particles 🖐️ Open Palm → Scatter particles 🤏 Pinch → Scale the particle world ☝️ Point → Attract particles like a magnet ✌️ Peace → Switch to the next 3D shape 🤘 Rock → Trigger a particle burst 👍 Thumbs Up → Increase energy 👌 OK → Randomize the experience The particles can transform into different 3D forms such as galaxies, Saturn, hearts, fireworks, lotus shapes, and more. 🪐❤️✨ 🧠 What I Wanted to Explore The goal wasn't simply to create a visually impressive particle system. I wanted to explore a bigger question: What happens when we remove the traditional interface and let humans interact with digital worlds naturally? Instead of clicking a button, moving a mouse, or pressing a key, your hand becomes the interface. ⚙️ What I Built The project combines: Real-time hand tracking Gesture recognition 3D particle simulation Interactive particle physics Dynamic 3D shape transformations Real-time visualization Modern web UI One of the interesting challenges was making the gestures feel responsive without making the particle system unstable or unpredictable. There is still plenty I want to improve: Better gesture accuracy More realistic particle physics Improved performance More interactive shapes More complex gesture combinations Better visual effects 🚀 Try AetherParticles 3D https://normal-amethyst-pnff6pqr.edgeone.dev/ This project started as an experiment with computer vision and 3D graphics. It turned into something I enjoyed much more: Making the human hand the controller of a digital universe. ✋🌌 I'm continuing to learn, build, experiment, and explore where AI + computer vision + creative coding can take interactive experiences next. If you try it, I'd love to know: Which gesture or particle shape should I add next? 👀 showcase ai computervision threejs creativecoding webdev javascript 3d
AI Three Studio: Bringing Visual Editing to Three.js Development
What if you could work with a Three.js project the way you work with a visual 3D editor while still keeping your actual source code? That idea led me to build AI Three Studio , a browser-based, source-aware development environment designed to bring 3D scene editing, live preview, and source code into one workspace. 🚀 Live Demo: https://punitpritam788.github.io/AI-Three-Studio/ I’d also like to thank and acknowledge @GitHub for providing the platform and hosting infrastructure that makes it possible to share and deploy this project, and @@ for providing a platform to publish and share it with the developer community. I’m also grateful to @threejs , @WebGL , @JavaScript , and the developers, creators, and open-source communities behind modern web development tools that continue to make projects like this possible. --- 💡 The Motivation Behind This Project This project started from a problem I personally experienced while developing 3D environments for my games and websites . When working with Three.js - especially when the code is generated or heavily assisted by AI coding tools - getting the first working version can be surprisingly easy. But then comes the next problem: How do you actually edit it? You may have a working 3D scene, but simply changing the position of an object, adjusting its scale, rotating something, or changing the layout can mean going back into the code and asking an AI to modify it again. Then you inspect it. Something isn't quite right. So you prompt again. Then again. And again. That repetitive process was one of the biggest motivations behind this project. I started thinking: Why can't I simply select the object I want and edit it visually, while the underlying code stays connected? That question eventually became the foundation of AI Three Studio. --- 🤖 Exploring the Idea with ChatGPT Before building the project, I spent a lot of time researching and exploring the idea with ChatGPT . I used ChatGPT to discuss the concept, think through possible architectures, explore development approaches, identify technical challenges, and understand what would actually be possible in a browser-based environment. That research helped turn a rough idea into something I could start prototyping. It wasn't about asking AI to build the entire product for me. It was about using AI as a thinking and research partner while I experimented with the implementation myself. --- 🧩 The Original Idea Was Much Bigger To be honest, my original goal wasn't specifically to build a Three.js editor. I wanted to build something closer to an HTML / web editor that could visually edit existing websites and projects . The idea was much broader: Open a project → see the actual rendered page → select elements → change layout, styling, positioning, fonts, structure, and more → keep the source code synchronized. But very quickly I realized how complicated that becomes. A serious editor like that can't realistically be limited to one type of project. It would need to deal with: HTML + CSS + JavaScript + React + frameworks + dynamic DOM + external libraries + runtime state + component structures + source mapping and much more. That's a massive problem to solve. So instead of trying to build everything at once, I decided to narrow the problem. Three.js became the starting point. --- 🎯 Why Three.js? Three.js gave me a focused environment where I could explore the core idea: Can visual editing and source code actually stay connected? That is what AI Three Studio is currently experimenting with. It isn't intended to be the final answer to visual web development. It is a prototype and a learning ground for a much bigger idea. --- 💡 The Problem Three.js development can involve a constant back-and-forth workflow: Write code → save → refresh → inspect → change code → refresh again. That process works, but it becomes increasingly frustrating when you're building complex scenes and simply want to move an object, adjust a rotation, change a scale, or understand what's currently inside the scene. I wanted to explore a different workflow: What if the scene itself could become part of the development environment? --- 🧩 Introducing AI Three Studio AI Three Studio is an experimental browser-based environment that combines: 🎮 3D viewport 🌳 Scene hierarchy 🎛 Object inspector 💻 Source editor 🌐 Live preview 🎯 Transform controls ⏸ Animation freezing ↩ Undo/redo 📦 Project export The goal is simple: Make Three.js development more visual without abandoning code. --- 🎮 Edit the Live Page One of the most interesting parts of the project is Live Page Edit . Instead of editing only a separate copy of the scene, the studio can connect to the actual Three.js application running inside the preview. You can select runtime objects and manipulate them using familiar 3D tools: W - Move E - Rotate R - Scale The studio communicates with the running page through an internal bridge that tracks scene objects and their transformations. This creates a workflow much closer to a traditional visual 3D editor. --- ⏸ Editing Animated Scenes Animations introduce another challenge. Imagine trying to position an object while it is constantly rotating, moving, or following an animation loop. AI Three Studio includes a Freeze feature that temporarily pauses animation-frame execution. That means you can: Freeze → Position → Transform → Resume without fighting against the animation. --- 🌳 Understanding the Scene The hierarchy panel makes it possible to inspect the objects currently present in the Three.js scene. You can select objects, hide or show them, filter visible objects, and work with multiple selections. For larger scenes, this provides a much easier way to understand what's actually happening in the runtime environment. --- 🎯 Multi-Selection & Group Editing The editor also supports multiple selection workflows. For example: Shift + Click → Select multiple objects Shift + Drag → Box selection Ctrl + A → Select everything And with: G → Group Mode multiple selected objects can be manipulated around a shared selection center. --- 🧠 The Interesting Part: Source-Aware Editing The bigger challenge isn't moving a cube. The interesting question is: What happens to the source code after you move that cube? AI Three Studio explores a source-aware workflow where runtime objects can be associated with the code that created them. When the system can confidently identify a source relationship, visual transformations can be written back toward the original project representation. When that relationship cannot be safely determined, the editor can fall back to runtime editing instead of pretending it knows more than it does. This is an important design principle for tools that try to bridge visual editing and real programming. --- 📂 Bring Existing Projects The studio isn't designed only for scenes created from scratch. It includes project import workflows for: 📄 HTML files 📁 Project folders 📋 Pasted HTML/JavaScript It can also work with linked CSS and JavaScript module structures while preparing the project for preview. --- 💻 Code + Visual Editing The editor keeps the source visible rather than hiding it behind a purely visual abstraction. You can work with: alongside the scene and live preview. That means developers can choose the workflow that makes sense for the current task: Code when code is faster. Visual tools when visual editing is faster. --- 📦 Export Once you're finished, the project can be exported as: 📄 Single HTML 📦 ZIP project The export workflow also provides options for preserving the original code or generating output from the scene representation. --- 🔭 Where I Want to Take This This is still a prototype , and there is a lot more I want to explore. The long-term vision is bigger than Three.js. Eventually, I would like to explore whether the same fundamental approach could be extended toward a more general visual HTML/web editor that can work with real projects instead of forcing developers to repeatedly regenerate code just to make small visual changes. But that is a much larger challenge. For now, I'm focusing on Three.js, learning from the implementation, discovering the limitations, and figuring out which parts of the idea can realistically scale. The bigger idea behind the project is to explore a development environment where: remain connected. --- 🚀 This Is Only the Beginning AI Three Studio is not a finished product . It is a prototype, an experiment, and a practical exploration of an idea I've been thinking about while building 3D experiences for games and websites. There are still technical limitations, edge cases, and many things that need improvement. But that's exactly why I'm sharing it. I'd love to learn from other developers. If you have experience with: Three.js, WebGL, browser editors, developer tools, AST/source analysis, visual programming, React, web IDEs, or AI-assisted development I'd genuinely appreciate your feedback, ideas, criticism, or suggestions. Maybe there are better approaches I haven't considered yet. --- 🚀 Try It Yourself The project is available online and can be tested directly in the browser. 👉 Live Demo https://punitpritam788.github.io/AI-Three-Studio/ 👉 GitHub https://github.com/punitpritam788/AI-Three-Studio A special thanks to @GitHub for providing the platform to host and distribute this project, and to @ @ for providing a platform to post it and connect with developers, designers, Three.js creators, and open-source contributors. You can also connect with and follow communities and creators working in these areas, including @threejs , @WebGL , @JavaScript , frontend development, creative coding, and open source. --- Final Thought This project started with a simple question: Can we make editing a Three.js application feel more like editing a 3D scene, without losing the source code underneath? The larger question I'm now exploring is: Can we eventually do something similar for the web itself? AI Three Studio is my first practical step toward exploring that idea. ⚡ ThreeJS Html CSS JavaScript WebGL 3DDevelopment WebDevelopment FrontendDevelopment CreativeCoding OpenSource AI SoftwareDevelopment GameDevelopment InteractiveWeb 3DGraphics GitHub TechInnovation DeveloperTools VisualProgramming SourceCode OpenSourceSoftware LinkedInTech AIAssistedDevelopment WebIDE ThreeD WebTools
Shipped: Corvit AI Chatbot - Smarter Way to Help Students
What if students could just ask instead of searching 5 different campus pages? I built an AI-powered chatbot for Corvit Systems that answers questions about: • Courses, certifications, and NAVTTC programs • Class timings, instructors, and facilities • Fees, career opportunities, and more Key Features: AI-powered conversational assistance RAG-based knowledge retrieval for accurate answers Context-aware responses + online search Clean web interface Tech Stack: GPT-OSS-120B | RAG | JavaScript | Tailwind CSS | Netlify Goal: Turn a traditional info website into an intelligent student assistant. More improvements coming soon! AI RAG Chatbot WebDev JavaScript EdTech CorvitSystems
Shipped: Lumora eBook Store
I built Lumora Books , a modern responsive bookstore experience focused on making book discovery feel calm, curated, and enjoyable rather than overwhelming. ✦ What I built The goal was to create a polished bookstore interface with a strong editorial feel while keeping the experience simple to explore. Key sections include: - 🏠 Hero & discovery experience — a focused landing section introducing the collection - 📚 Book categories — Fiction, Business, Mind & Wellness, Art & Design, and more - ⭐ Bestsellers — curated popular titles with pricing and editorial labels - 🆕 New Arrivals — a dedicated section for recently added books - 📰 Lumora Journal — essays, recommendations, and editorial content - 📩 Newsletter subscription — a simple way for readers to stay updated - 📱 Responsive design — built to adapt across desktop and smaller screens - ✨ Modern visual system — typography, spacing, cards, transitions, and visual hierarchy designed around a premium bookstore aesthetic 🎯 Design goal I wanted Lumora to feel less like a traditional e-commerce page and more like a digital reading space — clean, editorial, and focused on the experience of discovering your next book. The interface combines strong typography, generous spacing, subtle visual details, and clear content sections to make browsing feel effortless. 🔍 What you can explore The live site includes: - Bestseller collection - Book categories - New arrivals - Editorial recommendations - Journal section - Newsletter signup - Shipping, returns, and customer-care sections 🚀 Live Preview https://lumora-books.netlify.app/ Would love to know — what would you add to make the book-discovery experience even better? 📖 webdevelopment frontend html css javascript uiux webdesign books showcase