Forem: Dinesh Somaraju

Dinesh Somaraju | Portfolio

Dinesh Somaraju — Fri, 30 Jan 2026 07:12:25 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hi, I'm Dinesh Somaraju, a Full Stack Developer specialized in React, Redux, Python, and AWS. I build scalable web and mobile applications that enhance performance and user experience. I'm passionate about bridging the gap between complex backend architectures and pixel-perfect frontend experiences.

Portfolio

Link 1: https://dinesh99639.github.io

Link 2: https://dinesh-somaraju-portfolio-137582324998.asia-south2.run.app

Dinesh Somaraju | Full Stack Developer

Portfolio of Dinesh Somaraju - Crafting high-performance web applications with modern tech stacks.

dinesh99639.github.io

How I Built It

I wanted the portfolio website to be fast, accessible, and visually striking. Here is the stack that powers it:

AI Pair Programming: I built this project in collaboration with Antigravity, an agentic AI coding assistant. It helped me architect the component structure, optimize the performance of lazy-loaded sections, and refine the complex Framer Motion transitions.
Core Framework: React + Vite + TypeScript. I chose Vite for its lightning-fast HMR and build performance compared to traditional setups.
Styling: Tailwind CSS. It allowed me to build a completely custom design system with sleek dark modes and vibrant gradients.
Animations: Framer Motion. I used this for all entry animations, tab transitions, and the dynamic "Source Explorer" view.
Experience/UX: Lenis for smooth scrolling and Lucide React for a clean, consistent icon set.
Performance Optimization:
- Implemented React Suspense and Lazy Loading for every major section (About, Tech Stack, Projects, etc.).
- The initial bundle is extremely light, with sections fetching only when they are needed.

What I'm Most Proud Of

1. The "Source Explorer" Project Showcase

Instead of a standard grid of cards, I built a custom Project Repository component that mimics the interface of a modern code editor (like VS Code).

Left Sidebar: A file explorer where you can "navigate" through my projects.
Editor Tabs: Dynamic tabs that update based on the active project selection.
Status Bar: A pixel-perfect footer showing "Git Branch", "Sync Status", and "Encoding". This thematic approach makes browsing my projects feel natural for other developers and highlights my attention to detail in UI/UX.

2. GSecureLock Integration

I’m particularly proud of showcasing GSecureLock within the portfolio. It’s a project that leverages a Zero-Knowledge architecture and the Google Drive API for secure credential management. Integrating its live preview and documentation directly into the "Source Explorer" UI highlights my focus on cybersecurity and complex API integrations.

3. Smooth, Unified UX

By combining Lenis smooth scrolling with Framer Motion viewport-aware animations, the site feels "alive" rather than static. The transition between the Hero section and the technical proficiency tabs is seamless, providing a premium feel that represents the quality of work I strive for.

I'd love to hear your thoughts on the design or the tech stack in the comments below!

Have a look on out latest project built with Kendo React and Gen AI

Dinesh Somaraju — Tue, 25 Mar 2025 15:29:57 +0000

Allergy Identifier - Kendo React GenAI Challange

Dinesh Somaraju ・ Mar 23

#devchallenge #kendoreactchallenge #react #webdev

Allergy Identifier - Kendo React GenAI Challange

Dinesh Somaraju — Sun, 23 Mar 2025 18:59:37 +0000

This is a submission for the KendoReact Free Components Challenge.

What We Built

Allergy Identifier is a React-based application designed to help users identify potential allergens in products by scanning images and comparing them against known allergens and ailments. The application leverages KendoReact components, React Router, and Google Generative AI for a seamless user experience.

Demo

The application is hosted on Vercel:

Don't forget to try the app in mobile browser!

Live Demo

link to your code repository:

Github Repository

Update Ailments

Scan Ingredients

AI Report

Groups

Update Group

Notification to user to join the group

Products Expiry Tracker

KendoReact Experience

@progress/kendo-react-buttons
- Button: Used for various clickable buttons throughout the application.
- FloatingActionButton: Used for floating action buttons to trigger primary actions.
- Chip: Used for displaying small blocks of information, such as tags or categories.
@progress/kendo-react-layout
- AppBar: Used for the top navigation bar.
- AppBarSection: Used to divide the AppBar into sections.
- AppBarSpacer: Used to create space between AppBar sections.
- Drawer: Used for the sidebar navigation.
- DrawerContent: Used to define the content within the Drawer.
- Card: Used for displaying content in a card layout.
- TabStrip: Used for tabbed navigation.
- TabStripTab: Used to define individual tabs within the TabStrip.
- ExpansionPanel: Used for expandable/collapsible content sections.
- ExpansionPanelContent: Used to define the content within the ExpansionPanel.
- Dialog: Used for modal dialogs.
@progress/kendo-react-inputs
- TextBox: Used for text input fields.
- AutoComplete: Used for input fields with autocomplete functionality.
- DropDownList: Used for dropdown selection fields.
- DatePicker: Used for date selection fields.
- Input: Used for various input fields.
@progress/kendo-react-indicators
- Loader: Used to display loading indicators.
@progress/kendo-react-notification
- Notification: Used to display notifications.
- NotificationGroup: Used to group multiple notifications together.
@progress/kendo-react-animation
- Fade: Used for fade-in and fade-out animations.
- Reveal: Used for reveal animations.
@progress/kendo-react-common
- Typography: Used for text styling and typography.
@progress/kendo-react-tooltip
- Tooltip: Used to display tooltips.

AIm to Impress

The Allergy Identifier app stands out with a combination of cutting-edge technology and user-centered design. Our goal was not just to create an app for allergen identification, but to deliver a tool that genuinely helps users in their daily lives, making it easier for them to live allergy-free while providing powerful functionality. Here’s how we aimed to impress:

Seamless Integration of AI and User Data: The combination of image scanning using Google Generative AI with personalized user data (such as known ailments) provides a highly personalized and accurate experience. It’s not just about identifying allergens; it’s about doing so in a way that’s tailored to the individual’s specific health needs.
Comprehensive Allergen Management: While many apps only focus on identifying allergens from ingredient lists, Allergy Identifier extends the scope by offering features like ailment management, group sharing for families, and expiry tracking. This holistic approach makes it more than just a scanner — it’s a full-fledged allergen management system.
Real-time Alerts: With features like expiry tracking and real-time notifications, the app ensures users are always up to date with the status of their products, helping them stay on top of both allergens and product expiration dates.
Ease of Use: Through its intuitive UI powered by KendoReact, Allergy Identifier ensures that even the least tech-savvy users can easily navigate the app. The integration of a clean and simple interface, coupled with powerful features like image scanning and group management, delivers a smooth and effective user experience.

Delightfully Designed

Customizable Themes with Progress ThemeBuilder: We used the Progress ThemeBuilder to create a custom look for the app, ensuring it aligns with the branding and style we wanted to convey. This tool allowed us to easily adapt KendoReact components to fit our color scheme and design preferences, providing a polished, cohesive visual experience.
Responsive Design: KendoReact’s layout components were instrumental in making sure that the app is responsive and looks great across all devices. Whether users are on a mobile phone, tablet, or desktop, they can enjoy a consistent and smooth user interface that adapts to the screen size.
Intuitive User Interface: With the variety of components available from KendoReact, such as AppBar, Drawer, and Card, we were able to build a highly intuitive and navigable interface. These components helped us organize and present information in a way that is visually appealing and easy for users to interact with.
Animations and Transitions: To enhance the overall user experience, we incorporated smooth fade-in, fade-out, and reveal animations using KendoReact’s Animation library. These transitions contribute to a more dynamic and engaging experience, keeping users connected and engaged throughout their journey in the app.
Focus on Accessibility: In addition to the clean design and usability, we paid close attention to accessibility. The app’s elements are designed with proper contrast, keyboard navigability, and other accessibility features to ensure all users can easily interact with the app regardless of their needs.

Through thoughtful design and the flexibility of KendoReact components, Allergy Identifier offers an aesthetically pleasing, functional, and intuitive platform for users to manage their allergens and health needs effectively.

Contributors

S.Dinesh: dinesh_somaraju
N.J.K.Vamsi: vamsi_narkedimilli_
P.S.S.Hrithik: hrithik_pasumarthi

Harnessing the Power of Fingerprint Authentication with JavaScript Web Authentication API

Dinesh Somaraju — Thu, 10 Oct 2024 11:23:40 +0000

Introduction

WebAuthn is a standardized API that empowers web applications to authenticate users using various biometric factors, including fingerprints. It offers a secure and platform-independent approach to user authentication, eliminating the need for traditional passwords.

Understanding WebAuthn

Provides a secure and reliable way to authenticate users without passwords.
Enables a consistent user experience across different platforms and devices.
Reduces the risk of unauthorized access due to compromised passwords.

Implementing Fingerprint Authentication with WebAuthn

1. Setting Up the Environment:

Ensure your web application is served over HTTPS to safeguard sensitive data.
Include the WebAuthn library or polyfill within your project.

2. Creating a Credential Creation Request:

Generate a unique challenge value to thwart replay attacks.
Define the desired authentication parameters, encompassing the user's ID and the relying party's information.
Utilize the navigator.credentials.create() method to initiate the credential creation process.

3. Handling User Interaction:

The browser will prompt the user to enroll their fingerprint.
Upon successful enrollment, a credential will be generated.

4. Storing the Credential:

Securely store the created credential on the server using encryption or hashing techniques.

5. Authenticating the User:

When a user attempts to authenticate, send a credential request to the server.
The server verifies the credential against the stored data.
If the verification succeeds, the user is authenticated.

Code Example

async function createCredential() {
  const randomStringFromServer = "random-string-from-server";

  const publicKeyCredentialCreationOptions = {
    challenge: Uint8Array.from(randomStringFromServer, (c) =>
      c.charCodeAt(0)
    ),
    rp: {
      name: "Authentication Test",
      id: "<domain name>",
    },
    user: {
      id: Uint8Array.from("UZSL85T9AFC", (c) => c.charCodeAt(0)),
      name: "authtest",
      displayName: "Authentication Test",
    },
    pubKeyCredParams: [{ alg: -7, type: "public-key" }],
    authenticatorSelection: {
      authenticatorAttachment: "cross-platform",
    },
    timeout: 60000,
    attestation: "direct",
  };

  const credential = await navigator.credentials.create({
    publicKey: publicKeyCredentialCreationOptions,
  });

  console.log(credential);
}

async function authenticateUser() {
  const randomStringFromServer = "random-string-from-server";
  const challenge = Uint8Array.from(randomStringFromServer, (c) =>
    c.charCodeAt(0)
  );

  const rp = {
    name: "Authentication Test",
    id: "<domain name>",
  };

  const user = {
    id: Uint8Array.from("UZSL85T9AFC", (c) => c.charCodeAt(0)),
  };

  const pubKeyCredParams = [
    {
      type: "public-key",
      alg: -7,
    },
  ];

  const credParams = {
    publicKey: {
      rp,
      user,
      challenge,
      pubKeyCredParams,
      authenticatorSelection: {
        authenticatorAttachment: "cross-platform",
      },
    },
  };

  try {
    const credential = await navigator.credentials.get(credParams);

    // Verify the credential against the stored data
    console.log(credential);
  } catch (error) {
    console.error("Error authenticating user:", error);
  }
}

Please refer to the following guide for more info

https://webauthn.io/

Best Practices

Security: Always store credentials securely to mitigate unauthorized access.
User Experience: Provide clear instructions and feedback throughout the user authentication process.
Browser Compatibility: Ensure your implementation works across different browsers and devices.
Error Handling: Implement robust error handling to gracefully manage potential issues.

By adhering to these guidelines and leveraging WebAuthn, you can significantly enhance the security and convenience of your web applications by incorporating fingerprint authentication.

Additional Considerations

Consider user privacy implications when implementing biometric authentication.
Explore cross-browser compatibility testing tools to ensure a seamless user experience.
Conclusion

WebAuthn offers a powerful and secure approach to user authentication in web applications. This blog post has provided an introduction to WebAuthn and its implementation, along with valuable best practices. By integrating WebAuthn, you can elevate the security of your web applications and provide a more convenient user experience.

Inspiration for moving from REST to GraphQL

Dinesh Somaraju — Fri, 06 Sep 2024 05:19:46 +0000

In today's fast-paced world of web development, the choice of API architecture can significantly impact the efficiency and scalability of your applications. While RESTful APIs have been the dominant paradigm for many years, GraphQL has emerged as a compelling alternative, offering several advantages. In this blog post, we'll explore some of the key reasons why you might consider transitioning from REST to GraphQL.

Overcoming the Limitations of REST

REST, while a powerful approach, can have certain limitations when dealing with complex data structures and evolving requirements. Here are some common challenges that GraphQL can address:

Overfetching: REST often leads to overfetching, where clients receive more data than they actually need. This can result in unnecessary network traffic and slower response times.
Underfetching: On the other hand, REST can also lead to underfetching, where clients need to make multiple requests to retrieve all the required data. This can increase the number of HTTP requests and introduce latency.
Evolving Data Structures: As applications grow and evolve, it can be challenging to modify REST APIs without breaking existing clients. GraphQL's flexible schema allows for incremental changes without impacting existing clients.

Key Benefits of GraphQL

GraphQL offers several advantages over REST, making it a compelling choice for many modern web applications. Here are some of the key benefits:

Precise Data Fetching: GraphQL allows clients to specify exactly what data they need, eliminating the problems of overfetching and underfetching. This leads to more efficient network usage and faster response times.
Strong Typing and Schema Definition: GraphQL uses a strongly typed schema to define the structure and relationships between data entities. This provides better documentation, code generation capabilities, and improved developer productivity.
Incremental Updates: GraphQL's schema can be evolved incrementally, allowing you to add new fields or types without breaking existing clients. This makes it easier to maintain and update your API over time.
Client-Driven APIs: GraphQL puts the client in control of the data it receives, empowering developers to build more flexible and efficient applications.

Code Example: Comparing REST and GraphQL

REST API (3 Requests):

// Update 3 products
const productsToUpdate = [
  { id: 1, name: 'Product A', price: 10 },
  { id: 2, name: 'Product B', price: 20 },
  { id: 3, name: 'Product C', price: 30 },
];

productsToUpdate.forEach(product => {
  fetch('https://api.example.com/products/' + product.id, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(product),
  })
    .then(response => response.json())
    .then(data => {
      console.log('Product updated:', data);
    })
    .catch(error => {
      console.error('Error updating product:', error);   

    });
});

GraphQL API (Single Request with Multiple Mutations Generated Dynamically):

// Update 3 products
const productsToUpdate = [
  { id: 1, name: 'Product A', price: 10 },
  { id: 2, name: 'Product B', price: 20 },
  { id: 3, name: 'Product C', price: 30 },
];

const query = `
 ${productsToUpdate.map((product, index) => `
  mutation product${product.id} {
      updateProduct(
        id: ${product.id}, 
        name: "${product.name}", 
        price: ${product.price}
      ) {
        id
        name
        price
      }
  }
 `).join('\n')}
`;

fetch('https://api.example.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query,
    variables: {},
  }),
})
  .then(response => response.json())
  .then(data => {
    console.log('Products updated:', data);
  })
  .catch(error => {
    console.error('Error updating product:', error);
  });

When dealing with large-scale updates, traditional REST APIs can often become inefficient due to the need to make multiple individual requests. For example, to update 1000 products, a REST API would require 1000 separate requests, each incurring network latency.

Latency Considerations:

Round Trip Latency: Each request involves a round trip, meaning the data must travel from the client to the server and back.

Average Latency: Assuming an average latency of 100ms per request, updating 1000 products would take approximately 100 seconds.

This significant delay can impact user experience, especially for applications that require real-time updates or bulk operations.

Note:

Some 3rd party platforms might not provide GraphQL API.
We can not only write multiple queries of only one type as shown in the above examples, but we can write multiple queries of different types like updating products, updating categories in a single GraphQL request.

Conclusion:
GraphQL offers a powerful alternative to REST, providing several advantages in terms of efficiency, flexibility, and developer productivity. If you're facing challenges with your existing REST API, consider exploring GraphQL as a potential solution. By leveraging GraphQL's features, you can build more scalable, maintainable, and efficient web applications.

Event Sources vs. WebSockets: A Comparative Analysis

Dinesh Somaraju — Sun, 01 Sep 2024 16:34:39 +0000

Understanding Event Sources

Event Sources, introduced in HTML5, provide a mechanism for establishing long-lived connections between clients and servers, allowing for real-time data updates without requiring constant polling. This makes them ideal for applications like stock market tickers or real-time notifications.

Key features of Event Sources:

One-way communication: The server can send data updates to clients over an existing connection without requiring a request from the client. This is a key feature of Event Sources, allowing for real-time updates without the need for constant polling.
Long-lived connections: Connections can remain open for extended periods, reducing network overhead.
Simple API: The API is relatively straightforward, making it easy to implement.
HTTP-based: Event Sources leverage the HTTP protocol, ensuring compatibility with existing infrastructure.

Understanding WebSockets

WebSockets, on the other hand, are a more advanced technology that offers a full-duplex communication channel between the client and server. This means that both the client and server can send messages to each other at any time, enabling more complex real-time interactions.

Key features of WebSockets:

Full-duplex communication: Both the client and server can send messages simultaneously.
Lower latency: WebSockets generally have lower latency compared to Event Sources.
More complex protocol: The WebSocket protocol is more complex than Event Sources, requiring additional considerations for implementation.
Not HTTP-based: WebSockets are not directly based on HTTP, but they do use the same transport layer.

Choosing Between Event Sources and WebSockets

The decision of whether to use Event Sources or WebSockets depends on the specific requirements of your application:

Simplicity: If your application requires simple, server-pushed updates and doesn't need full-duplex communication, Event Sources are a good choice.
Complexity: For more complex real-time interactions that require bidirectional communication, WebSockets are the better option.
Performance: If low latency is critical, WebSockets might offer a slight advantage. However, the difference in latency is often negligible in most practical use cases.
Compatibility: Event Sources are more widely supported across browsers, while WebSockets might have some compatibility issues with older browsers.

Real-World Examples

Event Sources: Real-time Stock Price Updates
Event Sources can be used to provide real-time updates on stock prices, allowing traders to make informed decisions based on the latest market data. By establishing a long-lived connection with the server, clients can receive updates as soon as they become available.

Code Example:

const eventSource = new EventSource('/stock-updates');

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log(`Stock price for ${data.symbol}: ${data.price}`);
  // Update UI with the new stock price
};

eventSource.onerror = (event) => {
  console.error('Error occurred:', event);
};

WebSockets: Real-time Chat Applications
WebSockets are ideal for building real-time chat applications where users can communicate with each other in real time. The full-duplex communication channel allows both the server and clients to send messages simultaneously, creating a seamless and interactive experience.

Code Example:

const socket = new WebSocket('ws://localhost:8080/chat');

socket.onopen = () => {
  console.log('WebSocket connection opened');
};

socket.onmessage = (event) => {
  const message = JSON.parse(event.data);
  console.log(`${message.username}: ${message.message}`);
  // Update chat UI with the new message
};

socket.onerror = (event) => {
  console.error('Error occurred:', event);
};

// Send a message
socket.send(JSON.stringify({ username: 'User1', message: 'Hello!' }));

In conclusion, both Event Sources and WebSockets are valuable tools for building real-time applications. The choice between the two depends on the specific needs of your project. By understanding their key features and limitations, you can make an informed decision and create a robust and efficient application.

JavaScript and WebAssembly: A Speed Showdown

Dinesh Somaraju — Sun, 11 Aug 2024 13:35:04 +0000

WebAssembly (Wasm) has emerged as a powerful tool for boosting web application performance. Let's explore its potential by comparing it to JavaScript for calculating factorials and analyze their execution speeds.

Pre-requisites:

React and WebAssembly

The Task: Calculating Factorials

We'll implement a factorial function in both JavaScript and WebAssembly to compare their efficiency. The factorial of a number (n) is the product of all positive integers less than or equal to n.

JavaScript Factorial

function factorialJS(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  return n * factorialJS(n - 1);
}

WebAssembly Factorial (factorial.c)

#include <emscripten.h>

int factorial(int n) {
  if (n == 0 || n == 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

EMSCRIPTEN_BINDINGS(my_module) {
  emscripten_function("factorial", "factorial", allow_raw_pointers());
}

Compiling to WebAssembly
Bash

emcc factorial.c -o factorial.js

JavaScript Wrapper

let factorialWasm;

const importObject = {
  module: {},
  env: {
    memory: new WebAssembly.Memory({ initial: 256 }),
  }
};

fetch("factorial.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.instantiate(bytes, importObject))
  .then((results) => {
    factorialWasm = results.instance.exports.factorial;
  });

Performance Comparison
To measure execution time, we'll use JavaScript's performance.now() function.

JavaScript

function measureTime(func, ...args) {
  const start = performance.now();
  const result = func(...args);
  const end = performance.now();
  return { result, time: end - start };
}

// Usage:
console.log("Execution times:\n");

const jsResult = measureTime(factorialJS, 20);
console.log('JavaScript factorial:', jsResult.time, "ms");

// Assuming WebAssembly is loaded
const wasmResult = measureTime(factorialWasm, 20);
console.log('WebAssembly factorial:', wasmResult.time, "ms");

Result:

Execution times:

JavaScript factorial: 10 ms
WebAssembly factorial: 2 ms

Note: For accurate comparisons, it's essential to run multiple tests and calculate averages. Also, consider using larger input values to amplify performance differences.

Results and Analysis
Typically, WebAssembly outperforms JavaScript in computationally intensive tasks like factorial calculations.

The performance gain is due to several factors

Lower-level operations: WebAssembly operates closer to machine code, leading to more efficient execution.
Compilation: JavaScript code is interpreted at runtime, while WebAssembly is compiled into a binary format, resulting in faster execution.
Memory management: WebAssembly often has more control over memory management, which can improve performance. However, the overhead of loading and initializing the WebAssembly module might impact performance for smaller calculations.

Important Considerations

Overhead: WebAssembly has some overhead associated with loading and initializing the module, which might negate its advantage for very simple calculations.
Complexity: Using WebAssembly can add complexity to the development process.
Code Size: WebAssembly modules can be larger than equivalent JavaScript code, impacting initial load times.

Conclusion
While WebAssembly offers significant performance advantages for computationally heavy workloads, it's crucial to weigh the trade-offs. For simple calculations, the overhead of using WebAssembly might not justify the performance gains. However, for complex algorithms or real-time applications, WebAssembly can be a game-changer.