Skip to content

Conversation

@ShuvoMondal
Copy link

@ShuvoMondal ShuvoMondal commented Jan 23, 2026

Summary

Introduces Yo Lingo, a full-stack demo application showcasing high-performance, backend-driven multi-language translation using the Lingo.dev SDK.

Live Demo: https://yo-lingo.vercel.app/

Changes

  • Full-Stack Demo Architecture: Implemented a "thin client" React frontend and a "heavy lifting" Hono/Bun backend that handles all translation logic, ensuring zero-latency language switching for the end-user.
  • Lingo.dev SDK Integration: Backend uses the @lingo.dev/sdk to translate dynamic content (jokes, quotes) on-the-fly into 7 different languages (ES, FR, DE, HI, JP, RU, ZH).
  • Premium UI/UX: Developed a modern React frontend featuring glassmorphism, Framer Motion animations, Tailwind CSS 4, and TanStack Router/Query for a seamless state management experience.
  • Global Usage Tracking: Integrated Neon PostgreSQL to track and display real-time global usage statistics via a persistent stats service.
  • Developer Experience: Provided detailed READMEs, environment templates, and standardized ESM configurations for both frontend and backend sub-projects.

Testing

Business logic tests cases:

  • Verified successful integration with external content APIs (JokeAPI and Quotable).
  • Validated backend translation bundle structure to ensure all 8 languages (including English) are returned in a single request.
  • Tested real-time stats incrementing logic via Neon PG connection.
  • Confirmed responsive design and instant language switching across mobile and desktop breakpoints.
  • All tests pass locally

Visuals

image

Required for UI/UX changes:

  • Before/after screenshots attached
  • Video demo for interactions (< 30s)

Checklist

  • Changeset added (if version bump needed)
  • Tests cover business logic (manual verification of translation payloads and DB persistence)
  • No breaking changes (new feature/demo)

Closes #1761

ShuvoMondal and others added 8 commits January 23, 2026 00:13
…dling

- Migrated manual state-based fetching to @tanstack/react-query's `useQuery`
- Implemented a robust fallback system for both jokes and quotes
- Added `FALLBACK_QUOTES` to ensure content availability during API outages
- Encapsulated service logic within a centralized [fetchContent](cci:1://file:///mnt/Utility/lingo.dev/community/yo-lingo/src/routes/index.tsx:36:4-47:6) wrapper
- Optimized [JokeCard](cci:1://file:///mnt/Utility/lingo.dev/community/yo-lingo/src/components/JokeCard.tsx:12:0-99:1) rendering to utilize query loading and refetching states
- Cleaned up redundant `useState` and `useEffect` logic in the main layout
- Implement Lingo.dev SDK integration for real-time translation
- Add  with eager translation strategy
- Introduce interactive language selector dropdown in [JokeCard](cci:1://file:///mnt/Utility/lingo.dev/community/yo-lingo/src/components/JokeCard.tsx:31:0-174:1)
- Add Hindi ('hi') to supported languages
- Update [manifest.json](cci:7://file:///mnt/Utility/lingo.dev/community/yo-lingo/public/manifest.json:0:0-0:0) with correct app name and theme settings
- Clean up  by removing unused devtools
- Polish UI with Lucide icons and premium styling
…content

- Implement automatic translation for jokes and quotes into 7 languages (es, fr, de, hi, ja, ru, zh) using Lingo.dev.
- Add fallback jokes and quotes with error handling to ensure service availability.
- Fix TypeScript unknown type assignment errors in fetch services.
- Update Lingo service to support batch localization and return locale-keyed objects.
- Configure server to use port 3001 to avoid conflicts and added  watch script.
…e stats

- Remove @lingo.dev/compiler and sdk from frontend
- Implement local locale state management
- Add usage stats service and endpoint in backend
- Add real-time stats display in JokeCard
- Enable CORS in server
- Improve translation quality for author/category fields
- Centralize API config with environment variables
…and docs

- Remove @lingo.dev/compiler and sdk from frontend
- Implement local locale state management in React
- Add persistent usage stats service in backend and display in UI
- Enable CORS and fix author translation quality in backend
- Centralize API config with environment variables
- Add detailed README documentation for both projects
- Migrate stats storage from local file to Neon Postgres
- Fix async bug in stats endpoint (missing await)
- Disable infinite caching in React app to force refresh on load
- Automatically refetch stats in UI when new content is generated
- Transition environment variable access from  to .
- Add  to devDependencies.
- Append  extensions to internal imports for ESM compatibility.
- Update documentation with the missing  environment variable.
@ShuvoMondal ShuvoMondal changed the title Lingo 1761 community build demo apps integrations - yo-lingo feat(community): Lingo #1761 community build demo apps integrations (yo-lingo) Jan 23, 2026
@sumitsaurabh927 sumitsaurabh927 self-requested a review January 23, 2026 12:17
@sumitsaurabh927
Copy link
Contributor

hi @ShuvoMondal your PR is missing changeset. Please add the changeset by following instructions here. Make sure you've joined our discord to see this message. If you haven't you need to:

  1. Join our discord here
  2. Go through the instructions to add changeset and add it to your PR

Please also sign your commits

Also, in the demo link, your backend is failing (see attached SS)
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Build Demo Apps, Integrations etc & Win Exclusive Lingo.dev Swag!

2 participants