Niranjan Kumar, Front-End Developer

Live projects

EGN ConnectX screenshot

The official website for India's big education leadership summit. People can register, book stalls and nominate for awards, and explore the venue in an interactive 3D floor plan. Over 20,000 visitors are expected.

StudynLearn screenshot

A smart classroom website: smart boards from 55 to 98 inches, AI teaching software and a national Olympiad. I built 21 pages on one design and cut the video and photo weight by about half.

SNL Solution screenshot

A redesign of the SNL Solutions website. SNL sells smart classroom equipment to schools across India. Version 2 has 27 pages, scored 94–99 for phone speed when tested in September, and makes it easy to compare products.

Automation projects

One dashboard that replaces five apps: tasks, calories, gym, money and sleep. You update it by typing or speaking to a Telegram bot.

SmartSchool's marketing dashboard. It builds the daily and monthly lead reports from CRM exports, shows live traffic and Search Console data for four websites, runs SEO checks and audits, and emails a weekly summary.

The chat assistant on this site. It answers questions about my projects, skills and experience using only what is on the site, and alerts me on Telegram when a visitor wants to talk.

Software

Code editors

  • VS Code, a code editor
  • Antigravity, an AI code editor

AI tools

  • Claude Code, an AI coding agent
  • Claude, an AI assistant
  • ChatGPT, an AI assistant
  • Codex, an AI coding agent
  • Gemini, an AI assistant
  • DeepSeek, an AI assistant
  • Grok, an AI assistant
  • Hermes Agent, an AI agent
  • Google AI Studio, a workspace for building with Gemini

Voice & agentic AI

  • LiveKit, real-time audio and video infrastructure
  • Faster-Whisper, speech-to-text
  • Kokoro, text-to-speech
  • ONNX Runtime, a machine-learning inference engine
  • RAG, retrieval-augmented generation
  • Agent Skills, reviewed capabilities an AI agent may use

Data & knowledge

  • Obsidian, a note-taking and knowledge app
  • MySQL, a database
  • PostgreSQL, a database
  • Supabase, a database and backend platform
  • Power BI, dashboards and reports
  • Tableau, data visualization
  • MS Excel, spreadsheets
  • Jupyter Notebook, interactive notebooks for data work

Development stack

  • React, a JavaScript library for user interfaces
  • Next.js, a React framework
  • TypeScript, JavaScript with types
  • Vite, a front-end build tool
  • Express, a Node.js web server framework
  • Tailwind CSS, a utility-first CSS framework
  • Three.js, a 3D graphics library for the web
  • React Three Fiber, Three.js for React
  • Node.js, a JavaScript runtime
  • PHP, a server-side language
  • JavaScript, the language of the web
  • HTML5, the markup language of web pages
  • CSS3, the styling language of web pages
  • FastAPI, a Python web API framework
  • Framer Motion, an animation library for React

AI models & inference

  • Ollama, a platform for running language models locally
  • Qwen2.5, a family of open language models
  • LLM APIs, hosted language-model services called from code

Security & DevOps

  • Auth0, sign-in and identity
  • Git, version control
  • GitHub, code hosting
  • GitHub Actions, automated workflows
  • Vercel, hosting and deployment
  • Gitleaks, a secret scanner for code

Design & productivity

  • Figma, interface design
  • Miro, an online whiteboard
  • MS Word, documents
  • MS PowerPoint, presentations
  • Shadcn UI, a React component library

Companies I've worked with

How I work

  1. Step 01

    Requirements & Planning

    I work out the business problem, the users, the pages and features, the technical limits, SEO and accessibility needs, deadlines and what success looks like. I produce the requirements, a sitemap and user flows, the feature scope and the technical decisions.

  2. Step 02

    UI/UX Design

    Wireframes first, then high-fidelity designs, every screen size, interactions and animations. Typography, colors, spacing, components and breakpoints are set here, before any code.

  3. Step 03

    Architecture & Setup

    I choose the stack and set up the codebase: for example Next.js, TypeScript and Tailwind, Git and GitHub, the folder structure, routing, reusable components, environment variables, linting, formatting, deployment environments and coding conventions.

  4. Step 04

    Frontend Development

    I turn the designs into production code: the layout, reusable components, responsive UI, navigation, forms, animations, API connections, state, loading and error states, SEO metadata and accessibility.

  5. Step 05

    Integration

    I connect the frontend to the services it needs: REST or GraphQL APIs, sign-in, a CMS, databases through their APIs, analytics, email, payments, AI APIs and other outside systems.

  6. Step 06

    Testing & QA

    I check that everything works and looks right on mobile and desktop and in different browsers: forms, navigation, APIs, accessibility, animations, error states and edge cases. Automated checks include TypeScript, ESLint, unit and component tests, Playwright or Cypress end-to-end tests and production builds.

  7. Step 07

    Performance Optimization

    I measure LCP, INP and CLS, JavaScript size, images, fonts, rendering, hydration, caching, lazy loading, animation frame rate and extra React re-renders. Then I find the slowest part, fix it and measure again.

  8. Step 08

    Deployment & Release

    A production build, CI/CD, hosting such as Vercel, environment settings, domain and DNS, HTTPS, a smoke test on the live site and monitoring.

  9. Step 09

    Monitoring & Maintenance

    After launch the work continues: I watch errors and analytics, fix bugs, improve Core Web Vitals, update dependencies, add features, act on user feedback, keep SEO and accessibility healthy and clean up technical debt.

Let's build something great together.

I'm open to full-time jobs, freelance projects and new ideas. Send me a message.

Or reach me directly