Freelancers using TypeScript in Tamil NaduFreelancers using TypeScript in Tamil Nadu
Web Developer | NextJS | ThreeJS | WebGL
Web Developer | NextJS | ThreeJS | WebGL
Websites that turn visitors into paying customers.
New to Contra
Websites that turn visitors into paying customers.
I lead a 20-engineer dev team that ships MVPs and SaaS build
New to Contra
I lead a 20-engineer dev team that ships MVPs and SaaS build
Full Stack Developer and Graphic Designer
Full Stack Developer and Graphic Designer
Cover image for 🌍 Voyageur – Travel Planner
🌍 Voyageur – Travel Planner Platform I built Voyageur, a full-stack travel planning platform designed to help users discover, explore, and book curated travel experiences through a clean and high-performance interface. The goal of this project was to simulate a real-world travel product with scalable architecture, smooth UX, and API-driven content. πŸš€ What it does Voyageur allows users to: Explore curated travel packages across multiple destinations Filter trips by budget, duration, category, and preferences View detailed itineraries with hotels, transport, and experiences Save packages to a personal wishlist Book trips with dynamic pricing calculation See live weather insights for destinations Browse visually rich destinations powered by dynamic images 🧠 Smart Features Dynamic Image System Integrated Unsplash API to fetch destination-based images. Each package displays unique visuals with caching and fallback handling to ensure reliability and performance. Optimized Navigation Fixed real-world issues like slow page transitions and blank states by improving data fetching, caching, and route handling. Performance First Approach Implemented lazy loading, pagination, debounced filters, and API caching to keep the experience fast even with large datasets. βš™οΈ Tech Stack Frontend React (Vite) Tailwind CSS React Router Context API Backend Django REST Framework JWT Authentication Database MySQL APIs Unsplash API (images) Weather API πŸ—οΈ Architecture The platform follows a clean API-driven architecture: React frontend communicates with Django REST APIs Backend handles authentication, business logic, and data processing MySQL ensures structured and scalable data storage πŸ› οΈ Challenges I Solved Fixed slow routing and blank page issues between views Ensured unique images per destination using API randomization + caching Handled async image fetching without breaking UI Migrated and managed structured data in MySQL Built fallback systems to prevent UI breaks πŸ’‘ Why this project matters Voyageur isn’t just a UI project β€” it demonstrates: Real-world full-stack architecture API integration at scale Performance optimization strategies Clean, maintainable code structure Problem-solving under real development constraints.
0
41
Detail-Oriented Full-stack developer πŸ’»
Detail-Oriented Full-stack developer πŸ’»
NodeJS, AWS & React Specialist for Web Apps
NodeJS, AWS & React Specialist for Web Apps
Product Designer & Developer for Personal Brands
$1k+
Earned
6
Followers
Product Designer & Developer for Personal Brands
Cover image for πŸ‹οΈ SK FITNESS STUDIO
A real
πŸ‹οΈ SK FITNESS STUDIO A real gym. A real glow-up. ✨ THE BUSINESS SK Fitness Studio is a unisex strength & cardio gym in Chinnadharapuram, Karur. 100+ members, running two years. I trained there myself, so I knew exactly where their online presence was failing them. THE OUTREACH I pitched them the redesign myself. I showed the manager what their online presence actually looked like to a customer: a static page, no pricing, no timings, and a "Join Now" button that just dialled a phone number. Then I showed him what it could be. He said yes on the spot. βœ… From there it was a hands-on collaboration. Real photos from the floor, their real pricing, their real timings, their real WhatsApp number, and the manager reviewing every iteration before it shipped. He's in the video, in his own words. That's not a testimonial I wrote. That's the guy who runs the gym. THE BEFORE Their entire online presence was a single static page. ❌ No pricing ❌ No timings ❌ No way to book anything ❌ Every button on it ("Join Now", "Call Now") just dialled a phone number πŸ“ž So if you were browsing at 11pm. Or you wanted the price before calling a stranger. Or the manager was busy on the floor and missed the call. That lead was gone. The gym was running on missed phone calls. ⚑ THE AFTER A fully designed, mobile-first site, built and published on Base44. 🎨 DESIGN β†’ Kept their brand equity: their red, and their own tagline, "Gym first. Excuses next." (with EXCUSES struck through in red) β†’ Dark, editorial, premium. Oversized display type, full-bleed photography, glass stat cards β†’ An "Inside SK" poster grid with solid-over-outline titles, oversized numbering, red arrows β†’ Motion throughout: ken-burns hero, an animated strikethrough, count-up stats, a scrolling marquee, hover states on every card β†’ Fully mobile-responsive, with a sticky Book / WhatsApp bar always one thumb away πŸ“ CONTENT β†’ Their real programs: weight loss, muscle gain, cardio β†’ Their real timings: 6–10 AM, 4–10 PM, open all days β†’ Transparent pricing, four tiers: β‚Ή1,000/mo Β· β‚Ή2,500/3mo Β· β‚Ή5,000/6mo Β· β‚Ή10,000/yr β†’ An FAQ section, a gallery, a real location πŸ™… No more "call to find out." THE AUTOMATION 1️⃣ SESSION BOOKING SYSTEM Visitors book a free trial (date + morning/evening) or a personal training session (date + time). Every booking writes to a Bookings table with a full status workflow: New β†’ Confirmed β†’ Completed / Cancelled. 2️⃣ AI AGENT (the core of it) One agent, two front doors: their WhatsApp πŸ’¬ and a chat widget on the site. It's loaded with the gym's real pricing, timings, programs and policies, and it can: β€’ answer customer questions at any hour, in plain language β€’ collect name, phone, goal, date and slot β€’ create the booking itself, straight into the database πŸ”₯ It doesn't just reply. It books. 3️⃣ ADMIN DASHBOARD Every booking lands here: name, phone, type, date, slot, status. The manager filters, confirms, and runs his day from one screen. No spreadsheet, no notebook, no missed call. 🎯 THE RESULT A gym that used to run on missed phone calls now takes bookings 24/7, on its own. πŸŒ™ A customer can ask about pricing at midnight, book a trial, and be confirmed by morning, without anyone picking up a phone. πŸ—£οΈ The manager says it best himself. He's in the video. πŸ”— Old site: https://skfitnessstudio.github.io/SK-Fitness-Studio/ πŸ”— Live site: https://sk-fitness-studio.base44.app πŸ“£ Post: https://www.linkedin.com/posts/surya-ux_giveitaglow-base44giveitaglowchallenge-share-7481793147015127040-7FY0/ #GiveItAGlow
2
113
Cover image for Air Sculpt - sculpt with
Air Sculpt - sculpt with your bare hands, in the air. For 30,000 years we've shaped stone with our hands. I wanted to know: what if you still could - without ever touching a mouse? Air Sculpt is a browser tool where you sculpt a real 3D marble form using only hand gestures, tracked live through your webcam, then export a genuine, 3D-printable file. The oldest art, in the palm of your hand. πŸ›οΈ What it does Pinch in the air to carve - the marble swells where you point, like clay Press to push in, Smooth to polish, two hands to scale, a fist to rotate Switch materials - marble, clay, bronze, alabaster Finish β†’ name your piece β†’ export a real .STL you can 3D print Every sculpture lives on in a museum gallery you turn through like a real exhibition The whole thing is built as a classical sculpture museum - warm marble, golden skylight, an atelier you step into. Modern hands, ancient craft. ✨ How Wonder made it possible I designed the entire world in Wonder: Wonder Chat β€” built every screen (atelier, gallery, reveal, about) by describing them and reshaping on the canvas Shaders β€” the golden museum light, drifting marble dust, and glowing material spheres are all real Wonder shaders, the whole atmosphere, not decoration Figma paste-in β€” sketched a frame in Figma, dropped it in, Wonder matched it MCP β†’ Claude Code β€” because in Wonder the design is real code, I connected straight to Claude Code and shipped the whole thing live. No handoff, no rebuild. What I designed is what shipped. The hand-tracking runs on MediaPipe + Three.js; Wonder was the design engine behind all of it. I walked into Wonder to design a museum and walked out with a working product. πŸ”— Live: https://airsculpt.vercel.app/ 🎨 Wonder file: https://app.wonder.so/surya/files/019f14b1-5a6e-7049-b19d-66b9f422c950 Built for the Wonder Challenge
9
11
582
Cover image for FERO - Untamed Energy 🐯
Most
FERO - Untamed Energy 🐯 Most energy brands scream at you. FERO doesn't have to. FERO is a fictional energy bar built on one idea: real energy doesn't need to prove itself. So instead of another hyped-up mascot throwing lightning bolts and shouting about gains, I built the opposite - the chill-est predator alive. A tiger with a permanent half-lidded stare who's already ahead of you and can't be bothered to mention it. The name says everything: "easy, tiger" - too much energy, worn like it's nothing πŸ”₯ Then I built his entire world around him. One character, one attitude, stretched across a complete identity system - every asset unmistakably FERO, from the shelf to the street to the screen. The character A soft-matte designer-toy tiger - cute, collectible, and quietly convinced he's the best thing in the room. Cocky but never loud. I pushed him through a full expression range (smug, hyped, unbothered, mid-bite) so he holds his personality in any moment, not just one pose. The identity πŸ”₯ A custom wordmark hand-built from real tiger fur - orange and black, tactile, alive 🎨 Tiger Orange, Warm Black, Cream - his own coat doing the branding before a single word is read 🧩 A flat-vector system for the small stuff, a rich 3D world for the hero moments, two formats, one tiger The applications πŸ“¦ Packaging - Peanut, Almond & Cranberry. Real fruit, real nuts, zero chill πŸ–ΌοΈ Poster & environmental - FERO in the wild, where he belongs 🏷️ Stickers & merch - the whole personality, ready to stick and wear πŸ₯€ A custom FERO vending machine dropped into a real street 🎬 A full motion ad - one bite, zero to feral. "Some chase energy. You just bite." The point Same tiger, every touchpoint - packaging, poster, merch, motion, all speaking one language. That's the whole game: one mascot carrying an entire brand through consistency, attitude, and a world that actually holds together. 🐯 Character Brief Name: FERO Role: The chill-est predator alive Personality: Cocky, dry, effortless, confident, unbothered - and always a step ahead. FERO believes energy isn't something you chase - it's something you already have. One bite before a skate session or just walking through the world like he owns it, FERO's a reminder that the strongest move is never looking like you're trying. πŸ”— Full project in Recraft: https://www.recraft.ai/project/e350424f-5c7c-4e2f-829b-600a224c9981
1
5
223