Because your excavator deserves a side hustle too.
A refreshingly simple B2B equipment rental marketplace that treats rental agreements with the seriousness they deserve—and the UI polish your eyes appreciate. Built for KEC Hack-a-Lite 3.0, because sometimes the best business ideas come from realizing that expensive equipment spends more time gathering dust than building skyscrapers.
Upyog is an equipment rental platform that makes sharing heavy machinery as easy as ordering pizza—except you can't eat a concrete mixer (trust us, we checked). We're connecting equipment owners with businesses that need tools, scaffolding, and machinery for short-term projects.
Think of it as Airbnb, but for things that weigh several tons and have absolutely zero aesthetic appeal.
- Equipment owners: Have expensive machinery sitting idle 70% of the time, slowly depreciating into very expensive paperweights
- Renters: Need equipment for specific projects but can't justify buying a NPR 5M crane for a 3-day job
- The Planet: Loves it when we share instead of manufacturing duplicate everything
- Your wallet: Also loves this arrangement
- 📋 Smart Listings - Upload equipment with photos, pricing, and availability. Our typewriter effect makes it look like magic is happening.
- 💰 Finance Dashboard - Track earnings, view payout summaries, and pretend you're a CFO (with prettier charts).
- 📊 Rental Timeline - Visual timeline showing when your equipment is booked vs. when it's lonely and available.
- 🔔 Real-time Notifications - Get pinged when someone wants to rent your stuff (the good kind of pinging).
- ✅ Approval Workflow - Accept or reject rental requests. Power feels good, doesn't it?
- 🔍 Intelligent Search - Type what you need, where you need it. Our search actually understands "concrete mixer near Kathmandu" instead of showing you coffee grinders.
- 💬 Owner Chat - Message owners directly. No carrier pigeons required.
- 📅 Date Selection - Pick rental periods with a calendar that doesn't make you question your life choices.
- 📸 Condition Logging - Document equipment condition at pickup/return with photos. CYA, professionally.
- 🔄 Extension Requests - Need it for longer? Request extensions without the awkward phone call.
- 🎨 Actually Pleasant UI - Minimal design with subtle animations. No assault on your eyeballs.
- 🔐 Firebase Auth - Google sign-in that works. Revolutionary, we know.
- 📱 Responsive Design - Works on phones, tablets, and that weird screen size your boss insists on using.
- 🌿 Sustainability Stats - Feel good about sharing. We calculate CO₂ saved (roughly).
- 🚨 Task Flagging - Flag issues during rentals. Drama resolution, digitized.
- React 18 - Because functional components and hooks are chef's kiss
- TypeScript 5 - Type safety or bust (mostly safety)
- Vite 5 - Fast builds so you can iterate like a caffeinated squirrel
- Tailwind CSS - Utility-first CSS that makes sense once you get over the className length
- shadcn/ui - Beautiful component primitives that we customized heavily
- Radix UI - Accessible components that don't look like they're from 2002
- Lucide Icons - Icons that spark joy (literally, we have a Sparkles icon with pulse animation)
- Firebase 10
- Firestore: NoSQL database (because schemas are so last decade)
- Firebase Auth: Google OAuth magic
- Firebase Storage: For all those equipment glamour shots
- TanStack Query - Data fetching that doesn't make you cry
- React Hook Form - Forms that validate themselves (self-actualizing forms!)
- Zod - Schema validation that TypeScript approves of
- date-fns - Date manipulation without the pain
- clsx - Conditional classNames without the mess
You'll need Node.js installed. If you don't have it:
# Don't panic, just install it
# We recommend using nvm (Node Version Manager)# Clone this beauty
git clone https://github.com/dhirendraxd/5th-Avenue-KEC-Hack-a-Lite-3.o.git
cd 5th-Avenue-KEC-Hack-a-Lite-3.o
# Install dependencies (grab coffee, this takes a minute)
npm install
# Start the dev server
npm run devYour browser should open to http://localhost:5173 and you'll see the homepage in all its animated glory.
Create a .env file in the root directory with your Firebase + Cloudinary credentials:
VITE_FIREBASE_API_KEY=your_api_key_here
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain_here
VITE_FIREBASE_PROJECT_ID=your_project_id_here
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket_here
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id_here
VITE_FIREBASE_APP_ID=your_app_id_here
VITE_CLOUDINARY_CLOUD_NAME=your_cloud_name_here
VITE_CLOUDINARY_UPLOAD_PRESET=your_unsigned_upload_preset_herePro tip: Don't commit this file. Git will ignore it, but your security team won't ignore you if you leak keys.
src/
├── components/ # React components organized by feature
│ ├── chat/ # Chat panel and bubbles
│ ├── dashboard/ # Owner dashboard components
│ ├── equipment/ # Equipment cards and details
│ ├── finance/ # Charts and transaction stuff
│ ├── home/ # Homepage sections (with fancy animations)
│ ├── layout/ # Navbar, Footer, BackgroundIllustrations
│ ├── rental/ # Rental operations components
│ └── ui/ # shadcn/ui components (40+ of them)
├── contexts/ # React contexts (Auth, etc.)
├── hooks/ # Custom hooks for Firebase, mobile detection
├── lib/ # Utilities, stores, mock data, Firebase wrappers
├── pages/ # Page-level components
└── integrations/ # Supabase (we tried it, then went with Firebase)
We believe in:
- Minimalism - If it doesn't serve a purpose, it doesn't exist
- Subtle Motion - Animations are like spices: a little goes a long way
- Consistency - All CTAs have blue underlines on hover. ALL OF THEM.
- Professional Aesthetics - Sage green for active states. Blue for primary actions. No Comic Sans ever.
- Accessibility - Focus states, ARIA labels, keyboard navigation. We're not monsters.
- Primary Blue -
hsl(217 91% 55%)- For important stuff - Success/Sage Green -
hsl(152 60% 45%)- For approvals and active states - Muted Everything Else - Soft neutrals that don't scream at you
# Development server with hot reload
npm run dev
# Production build (outputs to /dist)
npm run build
# Preview production build locally
npm run preview
# Lint your code (because standards)
npm run lint- Push your code to GitHub (without local env files).
- Import the repo in Vercel.
- In Vercel Project Settings → Environment Variables, add all
VITE_vars from.env.example. - Deploy using:
- Build Command:
npm run build - Output Directory:
dist
- After first deploy, set your production domain and update:
src/lib/seo.ts(SITE_URL)public/sitemap.xml(<loc>URLs)public/robots.txt(Sitemap:URL)
git status --short(verify no unintended files)- Ensure
.env.local,.env.*.local,.vercel/,dist/,node_modules/are not tracked npm run buildpasses locally- Do not commit real secrets to GitHub
- Go to Firebase Console
- Create a new project (or use existing)
- Enable Authentication → Google Sign-In
- Create a Firestore Database (start in test mode for development)
- (Optional) Create Storage bucket if you want Firebase Storage later
- Copy your config to
.envfile
- Go to Cloudinary Console and create/login to your account.
- From Dashboard, copy your Cloud Name.
- Open Settings → Upload → Upload presets and create a preset.
- Set the preset to Unsigned.
- (Recommended) Restrict the preset to
imageuploads only. - Add these env vars:
VITE_CLOUDINARY_CLOUD_NAME=your_cloud_name
VITE_CLOUDINARY_UPLOAD_PRESET=your_unsigned_upload_presetAfter this, listing uploads images to Cloudinary and stores public image URLs in Firestore so all users can view them.
equipment/
- id (auto)
- name, description, category
- pricePerDay, pricePerWeek, pricePerMonth
- owner: { uid, name, email, location }
- images[], features[]
- depositAmount, specifications
- availabilityWindows[], usageNotes
users/
- uid (document ID)
- email, displayName, photoURL
- role: 'owner' | 'renter'
- createdAt, lastActive
rentals/
- id (auto)
- equipmentId, renterId, ownerId
- startDate, endDate, status
- totalCost, conditionLogs[]
Because "Upyog" means "use" or "utilization" in Sanskrit/Nepali—perfectly fitting for a platform about utilizing idle equipment. Plus, it sounds way cooler than "Rent-A-Thing".
It's hackathon-ready, which is like production-ready but with more energy drinks and fewer tests.
Sure! Open an issue or PR. We accept code improvements and dad jokes.
We tried Supabase first (check /src/integrations/supabase), then realized Firebase Auth UX is just better. Sorry, Supabase fans.
Because we can. Also, they make the app feel polished and professional without being distracting.
With proper Firebase security rules and indexing? Absolutely. Without them? Please don't try.
- Bundle size is chunky (~1.6MB before gzip). We're optimists about dynamic imports.
- Browserslist data is 8 months old. We live dangerously.
- No comprehensive test suite yet. Manual testing is a valid strategy, right?
- TypeScript is your friend - Caught 847 bugs before they became embarrassing
- Good UI takes time - We spent 40% of dev time on animations and spacing
- Firebase is magical - Until you forget security rules
- Tailwind class names get long - Like, really long. Embrace it.
- Users appreciate attention to detail - Typewriter effects and fade-ins matter
MIT License - Do whatever you want with this code. Build empires. Rent excavators. We believe in you.
- shadcn for making UI components that don't suck
- Vercel for Vite (speedy builds = happy devs)
- Google Firebase for auth that actually works
- Coffee for existing
- KEC Hack-a-Lite 3.0 for the deadline-induced focus
Built with ❤️ and excessive attention to underline animations.
Team: Upyog
Event: KEC Hack-a-Lite 3.0
Repo: github.com/dhirendraxd/5th-Avenue-KEC-Hack-a-Lite-3.o
"Making idle equipment useful, one rental at a time."
Now go forth and rent responsibly. 🏗️