YNM Safety — Corporate Website
Modern, responsive corporate website for YNM Safety Pan Global Trade Pvt Ltd, India's leading manufacturer and exporter of road safety products including road marking paints, metal beam crash barriers, highway signages, bitumen, road safety furniture, and precision metal fabrication. Built with Next.js 15.5 (Pages Router) and React 19, featuring AI-powered chatbot (Google Gemini 2.0 Flash) with company knowledge base and FAQ matching, 6 integrated forms with Google Sheets storage (5 sheet tabs) and email notifications, dedicated quote request page with product selection and PDF attachment, career portal with PDF resume upload and HR notifications, 12 Indian language support, interactive India presence map with state-level contacts, comprehensive product catalog (6 categories, 80+ products), SEO optimization with Schema.org structured data, security-first approach with Gitleaks and GitHub Actions CI/CD, and deployment on Vercel with Docker/GCP Cloud Run support.
Role
Full-stack engineer
Team
Solo
Company/Organization
YNM Safety
The Problem
YNM Safety needed a professional corporate website to establish strong digital presence and showcase their comprehensive road safety product...
Required multi-language support for 12 Indian languages (English, Hindi, Bengali, Telugu, Marathi, Tamil, Gujarati, Kannada, Malayalam, Punjabi,...
Needed intelligent customer support through AI-powered chatbot with comprehensive company knowledge base, FAQ matching, and conversation context to...
Required 6 different contact forms (Contact, Get a Quote, Careers, Director Appointment, Investor Relations, Foreign Collaborations) integrated with...
Career application system needed PDF resume upload with validation, security checks (reject password-protected files), rate limiting, and automated...
Needed to showcase regional presence across India with interactive map visualization showing state-level contact details.
Required comprehensive security measures to protect sensitive business data with automated secret scanning, pre-push security checks, and protection...
The Solution
Built a comprehensive Next.js 15.5 application using Pages Router with React 19 and Node.js 20+ featuring 19 React components, 9 API routes, and...
The AI chatbot is powered by Google Gemini 2.0 Flash with comprehensive company knowledge base (chatbotData.js), FAQ matching for common queries,...
The chatbot provides instant responses to customer queries about products, services, company information, and business inquiries.
6 integrated forms are connected to Google Sheets API v4 using a single sheet with 5 tabs (Contact Us, Our Director Appointment, Investor Relations,...
Each form includes reCAPTCHA v2 protection and automated email notifications via Nodemailer 7.x (supports Gmail SMTP with App Password).
The dedicated Get a Quote page features product category selection, quantity/unit/timeline inputs, PDF attachment support, and delivery location with...
The career portal features PDF resume upload via multipart form handling, PDF validation using pdf-parse 2.x (validates structure, rejects...
Multi-language support for 12 Indian languages is implemented using React Context (LanguageContext) with localStorage persistence and a first-time...
The interactive India presence map uses custom SVG paths (indiaMapPaths.js) with click-to-view state-level contact details (indiaContacts.js).
The comprehensive product catalog spans 6 categories with 80+ products: Road Marking Paints (8 products), Metal Beam Crash Barriers (5 products),...
Each product includes specifications, application areas, projects, and market data.
Security implementation includes GitHub Actions CI/CD with two workflows (ci.yml for lint/build/security checks/Docker build, security-scan.yml for...
Additional features include Google Analytics GA4 + Google Tag Manager for visitor tracking and conversion analytics, SEO optimization with Schema.org...
Design Decisions
Chose Next.js 15.5 with Pages Router for stability, server-side rendering, and straightforward API route handling for 9 API endpoints...
Implemented AI chatbot with Google Gemini 2.0 Flash (model fallback chain) for cost-effective, accurate responses with comprehensive company...
Used Google Sheets API v4 with single sheet and 5 tabs for form data storage — avoids database setup complexity, enables easy data access for business...
Built custom interactive India map component (IndiaPresenceMap) using SVG paths (indiaMapPaths.js) with click-to-view state-level contact details...
Implemented multi-language support (12 Indian languages) using React Context (LanguageContext) for global state management with localStorage...
Career portal uses multipart form handling for PDF resume upload, pdf-parse 2.x for validation and security (validates PDF structure, rejects...
Added reCAPTCHA v2 ('I'm not a robot' verification) on all 6 forms using shared recaptchaUtils.js for spam prevention and bot protection.
Built security-first architecture with GitHub Actions CI/CD (ci.yml + security-scan.yml), Gitleaks for automated secret scanning, comprehensive...
Implemented comprehensive product catalog with dedicated data files (productsData.js for 80+ products, productsCategoriesData.js for category-level...
Optimized all 410+ images to < 100 KB each for fast loading, with custom image loader (imageLoader.js) and lazy loading for performance.
Added Google Analytics GA4 + Google Tag Manager for visitor tracking, conversion analytics, and event tracking — only loads when NEXT_PUBLIC_GA_ID is...
Used Makefile for project automation with 14 commands (install, dev, build, start, lint, clean, setup, env-check, images, check, health,...
Tradeoffs & Constraints
Chose Pages Router over App Router: More stable and simpler API route handling for forms and chatbot, but misses some newer Next.js 13+ features like...
Google Sheets integration: Simple and accessible for business team with easy data access/export, but limited query capabilities and scalability...
Google Gemini 2.0 Flash chatbot: Cost-effective (~$0.002/interaction) with model fallback chain, but requires API key management and has rate limits....
Email delivery via Nodemailer with Gmail SMTP: Reliable and free for moderate volumes, but requires Gmail App Password setup and has daily sending...
reCAPTCHA v2 ('I'm not a robot'): Provides clear user feedback and effective spam prevention, but adds friction to form submissions. Chose over v3...
Career portal PDF upload: Validates and rejects password-protected files for security, but may inconvenience some applicants. Rate limiting (3...
12 language support via React Context: Simple implementation with localStorage persistence, but translations are manually maintained in...
Image optimization: All 410+ images optimized to < 100 KB for fast loading, but required manual optimization process. Custom image loader handles...
Security scans (Gitleaks, GitHub Actions): Comprehensive protection against accidental secret commits, but requires CI/CD setup and GitHub Actions...
Would improve: Add CMS integration (Sanity/Contentful) for easier content updates by business team, implement real-time chat with human handoff for...
Outcome & Impact
Live production website at ynmsafety.com serving as the central digital presence for YNM Safety with professional design optimized for mobile,...
AI chatbot powered by Google Gemini 2.0 Flash provides instant answers to customer queries with company-specific knowledge base, FAQ matching,...
6 integrated forms connected to Google Sheets (1 sheet, 5 tabs: Contact Us, Our Director Appointment, Investor Relations, Foreign Collaborations,...
Dedicated Get a Quote page with product category selection, quantity/unit/timeline inputs, PDF attachment support (multipart/form-data), and delivery...
Career portal with PDF resume upload, validation (validates PDF structure, rejects password-protected files), rate limiting (prevents spam), and...
12 Indian language support (English, Hindi, Bengali, Telugu, Marathi, Tamil, Gujarati, Kannada, Malayalam, Punjabi, Odia, Urdu) increased...
Comprehensive product catalog with 6 categories and 80+ products: Road Marking Paints (8), Metal Beam Crash Barriers (5), Highway Signages (10),...
Interactive India presence map (IndiaPresenceMap) with custom SVG paths effectively showcases regional presence across India with click-to-view...
Comprehensive security with GitHub Actions CI/CD (ci.yml for lint/build/security/Docker, security-scan.yml for Gitleaks secret scanning), no secrets...
SEO optimization with Schema.org structured data (Organization, Product, Service), sitemap.xml, robots.txt, 301 redirects, Google Search Console...
Google Analytics GA4 + Google Tag Manager for visitor tracking, conversion analytics, and event tracking. Analytics only load when NEXT_PUBLIC_GA_ID...
Performance optimizations: 410+ images all < 100 KB (optimized), lazy loading for images and components, response caching for chatbot, smooth...
Deployment flexibility: Vercel (recommended), Docker multi-stage build (Dockerfile included), GCP Cloud Run (deploy-gcp.sh script + cloudbuild.yaml),...
Complete documentation in README with project structure, tech stack, installation, Makefile commands, environment variables, API endpoints, pages,...
19 React components (Navbar, Hero, Footer, Chatbot, FloatingGetQuote, FloatingSocialMedia, Mascot, PhoneInput, PlacesAutocomplete, ProductsSection,...
9 API routes (/api/contact/submit, /api/quote/submit, /api/careers/submit, /api/director-appointment/submit, /api/investor-relations/submit,...
Tech Stack
Framework: Next.js 15.5 (Pages Router), React 19, Node.js 20+
Styling: Tailwind CSS 3.4 utility-first framework
AI: Google Gemini 2.0 Flash for chatbot with model fallback chain, company knowledge base, FAQ matching, response caching, sliding-window rate limiting
Data Storage: Google Sheets API v4 (1 sheet, 5 tabs for form data: Contact Us, Director Appointment, Investor Relations, Foreign Collaborations, Quote Requests)
Location Services: Google Places API for country/city autocomplete in forms
Email: Nodemailer 7.x (Gmail SMTP with App Password, custom SMTP, SendGrid support)
Analytics: Google Analytics GA4 + Google Tag Manager for visitor tracking and conversion analytics
Security: Google reCAPTCHA v2 on all 6 forms, Gitleaks for secret scanning, GitHub Actions CI/CD
PDF Processing: pdf-parse 2.x for resume validation (career portal)
File Upload: Formidable for multipart/form-data handling (PDF attachments)
CI/CD: GitHub Actions with 2 workflows (ci.yml, security-scan.yml), pre-push-check.sh script
Deployment: Docker (multi-stage build), Vercel (recommended), GCP Cloud Run (with deploy-gcp.sh + cloudbuild.yaml + Secret Manager)
Project Automation: Makefile with 14 commands for development workflow