[Example] Build a Production-Grade Todo App (React + TypeScript + SDK)

[Shivkumardhakad]

📌 Overview

SnapGrid is a premium AI-generated image gallery and prompt-sharing platform. Unlike a standard Todo list, SnapGrid focuses on Public Discovery + Private Ownership, showcasing urBackend's ability to handle media storage, social authentication, and complex Row-Level Security (RLS) configurations.

The goal is to build a platform where users can "Showcase" their AI art while maintaining full control over their own creations.

🛠 Tech Stack

• Frontend: React (Vite) + TypeScript
• Styling: Tailwind CSS + Shadcn UI (for components)
• Animations: Framer Motion (for smooth transitions/modals)
• Backend: Official @urbackend/sdk
• Auth: urBackend Social Auth (Google/GitHub)

🚀 urBackend Integration Points

1. Authentication & Profiling

• Social Auth: Users must be able to sign up/in using Google or GitHub.
• Profile Management: A dedicated "My Gallery" page where users see only their uploads.

2. Data Modeling & RLS

• Collection: posts
  • imageUrl (String)
  • prompt (String)
  • category (String: e.g., 'Abstract', 'Portrait', 'Landscape')
  • ownerId (Managed by urBackend)
• RLS Policy:
  • Read: public-read (Anyone can see the feed).
  • Write: private (Only the creator can edit/delete their posts).

3. Media Storage

• All AI images must be uploaded to the urBackend project storage bucket.
• Implementation must handle upload progress states and error handling.

✨ Key Features (Scope)

• Global Discovery Feed: A masonry grid layout (like Pinterest) showing all public posts.
• Smart Filtering: Filter posts by category or search by keywords in the prompt.
• Interactive Modals: Clicking an image opens a detailed view showing the full prompt, with a "Copy Prompt" button.
• Creator Dashboard: A private section where users manage their own posts (CRUD).
• Responsive Aesthetics: Full Dark/Light mode support with a "Glassmorphism" theme for cards.

🎨 UI/UX Expectations

• Star Quality: Use high-quality typography (Inter/Outfit) and subtle micro-animations.
• Empty States: Beautiful illustrations or skeletons when no posts are available.
• Toasts: Real-time feedback for likes (if implemented), uploads, and auth changes.

📖 Contributor Checklist

• Initialize a fresh Vite + TS project.
• Setup @urbackend/sdk and environment variables.
• Document the urBackend collection schema in the README.
• Implement the masonry gallery with lazy-loading.
• Ensure 100% type safety for API responses.

---

Link this spec to your issue so students know exactly what "High Quality" means!

[Priyanka0205-CSE]

@yash-pouranik
Hi
I went through the requirements and this looks really interesting.
I’d like to work on this issue.

I have experience with React, TypeScript, and integrating APIs, and I’m comfortable building features like authentication, dashboards, and responsive UI.

I’ll make sure to follow the guidelines and build a clean, production-quality implementation.

Could you please assign this to me?

Thank you!

[yash-pouranik]

Hey @Priyanka0205-CSE , thanks for showing interest! I'm assigning this issue to you.

Just to clarify the scope of this task: Since you mentioned having experience building authentication and dashboards, please note that you don't need to build the backend or authentication system from scratch.

The entire backend, database (RLS), and Social Auth (Google/GitHub) will be handled by our official @urbackend/sdk and here's the docs from where u should refer on which method of sdk to use. Your task is purely on the frontend: building the UI and integrating it with the SDK methods.

To help you understand how the SDK integrates with a React/Vite app, please refer to the examples/sdk-kanban directory in this repository. It serves as a great blueprint.

A few tips for SnapGrid:

• Needs: you will need urbackend/sdk, live keys available at urbackend.bitbros.in by creating a project Please refer this - to see Onboarding.
• Project Location: Initialize the new project in the examples/sdk-snapgrid folder.
• Auth & Storage: Check the SDK documentation for triggering Social Auth flows and uploading media to the Storage Bucket.
• Schema & RLS: Document the required posts collection schema and RLS configuration in your project's README.md so others know how to configure their urBackend dashboard to run your app.
• Feel free to ask questions, or Lets me know if things didn't work as expected?
• if you get stuck with any SDK methods. Looking forward to seeing what you build... lets go.

[Priyanka0205-CSE]

@yash-pouranik
Yes, got it 🙂 I understand the scope. I’ll focus on the frontend and integrate it with the SDK. Starting the setup now.

[Priyanka0205-CSE]

@yash-pouranik
I have completed the SnapGrid frontend integration.

Google login is working
Upload button and file picker is working
SDK is connected

Upload is currently failing because my Pro access is still pending approval.

Please review my work and let me know if any changes are needed.

Thank you!

[yash-pouranik]

@Priyanka0205-CSE
Thank you
Just approved the pro, you can check now.

[Priyanka0205-CSE]

@yash-pouranik
This PR is ready for review. I have implemented image upload, gallery display, and persistence.

I noticed CI checks are failing. I will fix them shortly. Please let me know if any changes are required. Thank you!