Case Study: How Locize Deployed a Secure, Real-Time Poll in Minutes with Vaultrice

Yesterday, the team at Locize, the localization management platform for i18next, announced they are gathering user feedback with a new in-app poll. You can read their announcement here.

This poll is a perfect real-world example of how developers can use Vaultrice to quickly and securely add engaging, real-time features to their applications. Let's take a look under the hood.

The Challenge: Building Secure, Engaging In-App Feedback Tools

For any product team, gathering direct user feedback is essential. But building the tools for it presents a challenge.
Do you:

• Redirect users to a third-party service, hurting the user experience?

• Spend valuable engineering cycles building a custom backend with a database, API, and WebSocket server?

• Worry about the security implications of storing user data for a simple poll?

These challenges often lead to feedback tools being delayed or never built at all.

The Solution: A Zero-Backend, Drop-in React Component

The Locize team was able to bypass all of these challenges by using the <Voting /> component from our new @vaultrice/react-components library. It's a pre-built, production-ready solution that provides everything needed out of the box.

The Implementation: A Technical Breakdown

Voting Screenshot of Locize: When unvoted

Voting Screenshot of Locize: When voted

Here is the actual code Locize used to integrate the component. It's a masterclass in building a secure, user-centric feature with minimal code.

<Voting
  id={env('VAULTRICE_VOTING_OBJECT_ID')}
  title='Do you use the Focus View?'
  description='Based on the voting results we might remove the Focus View'
  choices={[
    // ... choices
  ]}
  credentials={{
    projectId: env('VAULTRICE_PROJECT_ID'),
    getAccessToken: api.user.getVaultriceAccessToken
  }}
  choicesInstanceOptions={{
    class: env('VAULTRICE_VOTING_CLASS'),
    ttl: 3 * 30 * 24 * 60 * 60 * 1000, // 3 months
    idSignature: env('VAULTRICE_VOTING_OBJECT_ID_SIGNATURE')
  }}
  userIdForLocalStorage={user.id}
/>

Let's break down the some key props:

• getAccessToken: Locize is using the token-based authentication. Their backend securely generates a short-lived Vaultrice access token for the authenticated user session. This ensures that no long-lived secrets are ever exposed on the client.

• idSignature: This is a powerful security feature. Locize's backend cryptographically signs the poll's id. This signature is passed to Vaultrice on every API call, and Vaultrice verifies it. This means that even if a user's access token were somehow compromised, it could only be used to interact with this specific poll object, not any other data.

• userIdForLocalStorage={user.id}: This is a clever and privacy-preserving way to prevent duplicate votes. Instead of storing a list of user IDs on a server, the component uses this ID to create a unique, anonymous key in the browser's localStorage. This confirms a user has voted on that specific device without sending any personal data to a database.
  Alternatively, you can use the userId prop. If you provide a userId, the voting status for that user is securely stored in Vaultrice rather than in localStorage. This is useful if you want to track votes across devices for authenticated users, while still keeping the voting logic simple and secure. If neither userId nor userIdForLocalStorage is provided, localStorage is used by default.

Build Your Own in Minutes

The Locize integration showcases the power of our pre-built components, but you can also build custom real-time features just as easily with our core React hooks. For example, you could build your own simple "like button" with just a few lines of code:

import { useNonLocalCounter } from '@vaultrice/react';

function LikeButton({ articleId }) {
  const [likeCount, incrementLikes, decrementLikes] = useNonLocalCounter(articleId, 'likes', {
    credentials: { /* ... */ }
  });

  return (
    <button onClick={() => incrementLikes()}>
      ❤️ {likeCount ?? 0}
    </button>
  );
}

Beyond Voting or Liking: Unlock More with Vaultrice

While this case study focuses on real-time voting, Vaultrice is capable of much more. By using our @vaultrice/sdk for example, you can build collaborative editors, live counters, presence-aware apps, offline-first experiences, and secure, real-time features — all with a familiar localStorage-like API.

Want to see what's possible? Check out the SDK documentation and examples.

Conclusion

The Locize integration is a testament to the power of a component-based, zero-backend approach to building real-time features. With a few lines of React, their team deployed a secure, engaging, and scalable feedback tool, allowing them to focus on what matters most: listening to their users and building a great product.

Want to add a real-time poll, rating, or counter to your own app?

Get started with @vaultrice/react-components and launch your feature today!