YNM Drishti — AI Road Infrastructure Company Website
Official corporate website for YNM Drishti, an AI-driven road infrastructure intelligence company detecting potholes, signages, barriers, and lane markings with 99.8% accuracy. Built with React 19 + Vite 7 + Tailwind CSS 4 featuring 9 comprehensive pages (Home, About, Leadership, Solutions, Technology, Clients, Partnerships, Investors, Contact) with React Router 7.x client-side routing, AI chatbot powered by Google Gemini 2.5 Flash with optional API key (fallback to local knowledge base), Framer Motion 12.34 animations, Lucide React 0.563 icons, multi-stage Docker build (Node → Nginx), comprehensive CI/CD with GitHub Actions (lint/build/Docker on push/PR, deploy to Google Cloud Run on main), Dependabot weekly dependency updates, Makefile automation with 12 commands, and security-first approach with .env git-ignored and platform secret management.
Role
Full-stack Developer
Team
Solo
Company/Organization
YNM Drishti
The Problem
YNM Drishti, an AI-powered road infrastructure detection company achieving 99.8% accuracy in identifying potholes, signages, barriers, lane markings,...
Required comprehensive information architecture to showcase their AI technology (computer vision, deep learning pipeline, architecture...
Needed to attract and engage potential clients from government agencies, construction companies, and smart city developers by clearly communicating...
Required investor relations page to showcase market opportunity, growth roadmap, and business model to attract funding for expansion and technology...
Needed partnership inquiry system with collaboration models for technology integrations, data partnerships, and joint ventures with infrastructure...
Required AI chatbot for instant customer queries about technology, pricing, implementation, and business inquiries — with optional API key to control...
Required modern, fast, and responsive website with smooth animations, professional design, and optimized performance across all devices (mobile,...
Needed automated CI/CD pipeline for continuous integration (lint, build, Docker validation) and deployment to production (Google Cloud Run) with...
Required security-first approach with no hardcoded secrets, git-ignored environment files, and platform-based secret management for production...
The Solution
Built a comprehensive corporate website with modern web architecture and automated deployment workflows.
Frontend Architecture (React 19 + Vite 7 + Tailwind CSS 4)
Implemented 9 route-level pages with React Router 7.x for client-side routing:
Home (/) — Hero section with company tagline and CTA, features showcase with detection capabilities, statistics cards (99.8% accuracy, clients...
About Us (/about) — Company story and founding vision, mission statement (AI-driven road infrastructure intelligence), vision for future of...
Leadership (/leadership) — Director profile with photo and biography, expertise areas (AI, computer vision, infrastructure), professional...
Solutions (/solutions) — Use cases for different industries (government infrastructure monitoring, construction quality assurance, smart city...
Technology (/technology) — AI pipeline architecture diagram (data collection → preprocessing → detection → analysis → reporting), computer vision...
Clients (/clients) — Industries served with logos and descriptions (government agencies, construction firms, smart cities, highway authorities),...
Partnerships (/partnerships) — Collaboration models (technology partnerships, data partnerships, joint ventures, reseller programs), partnership...
Investors (/investors) — Market opportunity with TAM/SAM/SOM analysis, growth roadmap with expansion plans, business model and revenue streams,...
Contact (/contact) — Multi-department contact form (general inquiry, sales, support, partnerships, careers), FAQ section with common questions...
AI Chatbot Integration (Google Gemini 2.5 Flash)
Powered by Google Gemini 2.5 Flash API with streaming responses for token-by-token display
Optional API key via VITE_GEMINI_API_KEY environment variable
Fallback mode: chatbot works without API key by using local knowledge base (company data hardcoded in src/data/chatbot.js)
Knowledge base includes: company overview, technology specs, detection capabilities, pricing information, implementation process, contact details
Chat UI with message history, typing indicators, and smooth animations via Framer Motion
Rate limiting and error handling for production stability
Styling and Animations (Tailwind CSS 4 + Framer Motion)
Tailwind CSS 4.1 for utility-first responsive styling with custom color palette matching brand identity
Framer Motion 12.34 for smooth page transitions, scroll-triggered animations, hover effects, and parallax scrolling
Lucide React 0.563 for consistent icon set across the application (navigation, features, social media, contact)
Custom UI components in components/ui/ directory: Toast notifications, TiltCard with 3D tilt effect on hover, animated counters, progress bars
Mobile-first responsive design optimized for all screen sizes with collapsible navigation and touch-friendly interactions
Build and Development (Vite 7.3)
Vite 7.3 for fast HMR (Hot Module Replacement) during development and optimized production builds
ESLint configuration (eslint.config.js) for code quality and consistency checks
Development server on port 5173 with instant feedback on code changes
Production build outputs to ynm-drishti/dist/ with minified assets, code splitting, and tree shaking
Preview mode to test production build locally before deployment
Containerization (Docker + Nginx)
Multi-stage Dockerfile: Stage 1 (Node.js build), Stage 2 (Nginx serve)
Nginx configuration (nginx.conf) for SPA routing — serves index.html for all routes (handles React Router client-side routing)
Production container runs on port 8080 with optimized static file serving
Docker image built via GitHub Actions and deployed to Google Container Registry
CI/CD Pipeline (GitHub Actions)
Implemented two workflows in .github/workflows/:
CI Workflow (ci.yml) — runs on every push and pull request:
- ESLint checks for code quality
- Vite production build with artifact upload (retained for 7 days)
- Docker build validation to ensure Dockerfile builds successfully
- npm dependency audit to flag high-severity vulnerabilities
Deploy Workflow (deploy.yml) — runs on push to main branch:
- Runs full CI checks first (lint, build, Docker)
- Authenticates with Google Cloud using Workload Identity Federation
- Builds Docker image and pushes to Google Container Registry
- Deploys to Google Cloud Run with environment variables from GitHub Secrets
- Configures Cloud Run service with auto-scaling, health checks, and HTTPS
Dependency Management
Dependabot configuration (.github/dependabot.yml) for automated weekly PRs updating npm and GitHub Actions dependencies
Pull request template (.github/pull_request_template.md) for consistent PR descriptions
Makefile Automation (12 commands)
`make install` — Install npm dependencies
`make dev` — Start Vite dev server (localhost:5173)
`make build` — Production build to ynm-drishti/dist/
`make preview` — Preview production build locally
`make lint` — Run ESLint checks
`make clean` — Remove node_modules/ and dist/
`make fresh` — Clean + reinstall dependencies
`make up` — Install + start dev server in one command
`make docker-build` — Build Docker image
`make docker-run` — Run Docker container on port 8080
`make docker-up` — Build + run Docker in one step
`make docker-stop` — Stop and remove Docker container
`make help` — Show all available commands with descriptions
Security Best Practices
.env files git-ignored — never committed to repository
.env.example template with placeholder values (safe to commit) for local development setup
GitHub Secrets for CI/CD: VITE_GEMINI_API_KEY, GCP_PROJECT_ID, GCP_SERVICE_ACCOUNT, GCP_WORKLOAD_IDENTITY_PROVIDER
Vercel/GCP secrets configured in platform dashboards (not in repository)
No hardcoded API keys or sensitive data anywhere in source code
Gemini API key is optional — chatbot falls back to local knowledge base for cost control
Deployment Options
Vercel (recommended for previews) — Import repo, set root directory to ynm-drishti, add VITE_GEMINI_API_KEY, deploy (vercel.json handles SPA...
Google Cloud Run (production) — Automated via deploy.yml workflow on push to main, or manual via `make docker-build && make docker-run`
Any static host — Deploy ynm-drishti/dist/ folder to Netlify, Firebase Hosting, AWS S3 + CloudFront with SPA routing configuration
Design Decisions
Chose React 19 with Vite 7 over Next.js — simpler client-side routing sufficient for marketing website, faster dev server, smaller bundle size, no...
Used Tailwind CSS 4 for styling — utility-first approach enables rapid UI development, custom color palette matches brand, responsive design with...
Implemented 9 route-level pages with React Router 7.x instead of multi-page static site — enables smooth client-side navigation, shared components,...
Built AI chatbot with optional Gemini API key — allows cost control by running in fallback mode without API key, uses local knowledge base...
Added Framer Motion 12.34 for animations — smooth page transitions, scroll-triggered effects, hover interactions enhance user engagement and...
Chose multi-stage Docker build (Node → Nginx) — optimized production image size by separating build stage from serve stage, Nginx efficiently serves...
Implemented comprehensive CI/CD with GitHub Actions — automated testing (lint, build, Docker) on every push/PR prevents broken deployments, automated...
Used Makefile for project automation — single commands (`make dev`, `make build`, `make docker-up`) simplify development workflow, consistent across...
Added Dependabot for weekly dependency updates — automated PRs for npm and GitHub Actions versions keep dependencies current and secure.
Chose Google Cloud Run for production deployment — auto-scaling, pay-per-use pricing, HTTPS by default, integrates with Cloud Build for CI/CD.
Separated environment configuration (.env.example template) — developers copy template and add own API keys, production secrets managed via platform...
Built custom UI components (Toast, TiltCard) in components/ui/ — reusable primitives with consistent styling and animations across pages.
Tradeoffs & Constraints
Chose client-side routing (React Router) over server-side rendering (Next.js) — simpler deployment and faster dev experience, but sacrifices SEO for...
Gemini chatbot with optional API key — cost-effective with fallback mode, but local knowledge base requires manual updates when company information...
Multi-stage Docker build — optimized image size (Node build → Nginx serve) but slightly longer build times. Trade build speed for smaller production...
Tailwind CSS utility classes — rapid development and consistency, but large HTML files with many classes. Purge CSS in production build removes unused...
Framer Motion animations — enhanced UX and professional appearance, but adds bundle size (~60KB). Trade bundle size for better user engagement.
GitHub Actions for CI/CD — free tier sufficient for current usage (2000 minutes/month), but may need paid tier or self-hosted runners for larger teams...
Google Cloud Run for production — excellent auto-scaling and pay-per-use, but cold starts (1-2 seconds) for first request after idle period. Acceptable...
Vercel for preview deployments — fast and easy, but production on Cloud Run requires maintaining two deployment configurations. Trade simplicity for...
Single-page application — smooth client-side navigation but requires SPA routing configuration on hosting platforms (serve index.html for all routes).
Would improve: Add CMS integration (Sanity/Contentful) for non-technical team to update content, implement real-time chat with human handoff for...
Outcome & Impact
Production website live at ynm-drishti-822693677008.asia-south1.run.app serving as the official digital presence for YNM Drishti's AI road...
Comprehensive information architecture with 9 route-level pages: Home (hero, features, stats, testimonials), About (story, mission, vision,...
AI chatbot powered by Google Gemini 2.5 Flash with optional API key — fallback mode uses local knowledge base (src/data/chatbot.js) for common queries...
Modern responsive design with Tailwind CSS 4: mobile-first approach, custom brand color palette, utility-first styling for rapid development,...
Smooth animations with Framer Motion 12.34: page transitions, scroll-triggered effects, hover interactions, parallax scrolling, typing indicators in...
Fast development workflow with Vite 7.3: instant HMR (Hot Module Replacement), optimized production builds with code splitting and tree shaking,...
Production-ready Docker deployment: multi-stage build (Node → Nginx), optimized image size, Nginx serves static assets efficiently, container runs on...
Comprehensive CI/CD pipeline with GitHub Actions: ci.yml workflow (ESLint, build, Docker validation, dependency audit) on every push/PR, deploy.yml...
Automated dependency management: Dependabot weekly PRs for npm and GitHub Actions version updates, pull request template for consistent PR...
Makefile automation with 12 commands: make install, make dev, make build, make preview, make lint, make clean, make fresh, make up, make...
Security-first approach: .env files git-ignored, .env.example template with placeholders (safe to commit), GitHub Secrets for CI/CD credentials...
Flexible deployment options: Google Cloud Run for production (auto-scaling, HTTPS, Cloud Build integration), Vercel for preview deployments (fast,...
Custom UI components in components/ui/: Toast notifications for user feedback, TiltCard with 3D hover effects, animated counters for statistics,...
ESLint configuration (eslint.config.js) enforces code quality and consistency across development team.
Lucide React 0.563 icon set provides consistent visual language across navigation, features, social media, and contact sections.
Proprietary license suitable for corporate use — all rights reserved for YNM Drishti intellectual property.
Tech Stack
Frontend: React 19.2 (UI framework), React Router 7.x (client-side routing)
Build Tool: Vite 7.3 (dev server, production build with HMR)
Styling: Tailwind CSS 4.1 (utility-first, responsive, custom brand colors)
Animations: Framer Motion 12.34 (page transitions, scroll effects, hover interactions)
Icons: Lucide React 0.563 (consistent icon set)
AI: Google Gemini 2.5 Flash (chatbot with optional API key, fallback to local knowledge base)
Containerization: Docker (multi-stage build: Node → Nginx)
Web Server: Nginx (production static file serving, SPA routing)
CI/CD: GitHub Actions (ci.yml for lint/build/Docker, deploy.yml for Cloud Run deployment)
Deployment: Google Cloud Run (production auto-scaling), Vercel (preview deployments)
Dependency Management: Dependabot (weekly npm and GitHub Actions updates)
Code Quality: ESLint (code standards, consistency checks)
Automation: Makefile (12 commands for dev/build/Docker workflows)