- What Inspired the Project India’s urban centers are packed with narrow lanes, heavy traffic, and a massive last‑mile problem. Small shop owners often receive orders via WhatsApp, phone calls, or their own e‑commerce sites, but they lack a fast, reliable logistics layer that can pick up the parcel and deliver it within the same neighbourhood.
The idea was simple: build a lightweight web app that only orchestrates the pickup‑and‑delivery flow, leaving the shop’s existing ordering channel untouched. By providing a unified “Send a Parcel” UI for customers, a clean dashboard for delivery agents, and a transparent earnings view for shop owners, Nearby could:
Reduce delivery time from ≈ 2 hrs → ≈ 30 min for intra‑city hops. Keep the financial settlement transparent (COD, KHATA, digital wallets). Enable instant feedback loops (customer reviews for agents, real‑time weather alerts).
What I Learned Area Insight React + Vite Using Vite’s fast dev server (npm run dev) gave sub‑second hot‑module reload, which dramatically speeds UI iteration. TypeScript modelling Defining domain types (DeliveryRequest, KhataAccount, AgentReview) up‑front prevented a cascade of runtime bugs when the UI started sharing state across four roles. Tailwind theming The “Coral & Deep Plum” design system was implemented via Tailwind’s extend palette, allowing us to switch primary/secondary colours per component with a single class (bg-deep-plum). Global state via Context A single AppContext proved sufficient for a prototype, but taught me the limits of prop‑drilling when the app grows – an early hint at Redux or Zustand for future scaling. Date arithmetic Handling digital Khata due‑dates required computing days‑left and overdue status. I used the formula:
DaysLeft
max ( 0 , DueDate − Today ) DaysLeft=max(0,DueDate−Today) and rendered three badge colours (teal, amber, rose) based on the result. | | Packaging | npm run build → Vite bundles everything into a dist/ folder. Creating a reproducible ZIP (nearby-app.zip) is a repeatable step for delivery to stakeholders. |
How the Project Was Built Scaffold – Started from a Vite‑React‑TS template (npm create vite@latest nearby-app --template react-ts). Routing – React‑Router routes under /customer, /agent, /shop, /admin. Authentication – Simple role‑based login stored in localStorage; each role receives its own navigation bar (styled with Deep Plum). Core UI – Implemented Day/Week/Month filters on all dashboards using a shared PeriodTabs component. Added Digital Khata UI with billing‑cycle selector and overdue‑badge logic. Integrated customer reviews for agents (star rating breakdown, filterable list). Re‑styled the Navbar (removed role‑switch dropdown, added explicit logout). State Management – Centralised mock data (mockData.ts) and mutable state (AppContext) for deliveries, khata accounts, and reviews. Styling – Tailwind config extended with the brand palette (deep-plum, burnt-coral, warm-off-white, etc.). Testing & Build – Ran npm run dev repeatedly for UI sanity checks, then npm run build to produce the production bundle. Packaging – A small PowerShell script zipped the nearby-app folder; the artifact lives at: C:/Users/Subasree/.gemini/antigravity/brain/9c8ca135-a27b-4b95-ace7-3e0f5b81ae1e/nearby-app.zip
Challenges Faced Challenge Resolution Consistent theming across four roles Created a theme.ts that maps each role to the same colour scheme; reused Tailwind utilities to avoid duplicate CSS. Period‑filter logic duplication Extracted the filter state into a custom hook usePeriodFilter and shared it across dashboards, preventing mismatched tabs. Khata due‑date calculations Initially used JavaScript Date objects directly, which caused timezone drift. Switched to date-fns helpers (differenceInCalendarDays) for reliable day counts. PowerShell quoting when zipping A one‑line Compress-Archive command broke on spaces in paths. Wrapped the command in a temporary script (package.ps1) with proper quoting, then executed it. Hot‑reloading after context changes Adding new fields to the context caused components to re‑render infinitely. Fixed by memoising context values with useMemo. Ensuring offline usability The app heavily relies on mock data; to simulate a realistic API, I added a small wrapper (localStorageService) that persists any modifications, making the demo survive page refreshes.
Final Thoughts Nearby demonstrates how a lean, role‑aware web app can plug directly into existing shop ordering channels without disrupting them. The project reinforced the value of:
Clear domain modeling early on. Component re‑use (period tabs, badge components) to keep UI consistent. Thoughtful theming to give the product a distinct visual identity. Having the full source zipped and ready, the app can be deployed to any static‑hosting service (Netlify, Vercel, etc.) with a single npm run build → upload dist/.
Happy delivering! 🛵✨
