FastAPI Todo App with Full Stack Integration and Security

🚀 Exploring Modern Data Fetching in React with TanStack React Query In my recent work with React applications, I’ve been diving deeper into TanStack React Query and how it simplifies server-state management. 🔍Why TanStack React Query? Managing API data in React using traditional methods (useEffect + useState) can quickly become complex especially when dealing with caching, loading states, retries, and background updates. TanStack React Query solves these problems by: ✅ Automatic Caching – Reduces unnecessary API calls and improves performance ✅ Background Refetching – Keeps data fresh without manual intervention ✅ Built-in Loading & Error Handling – Cleaner and more maintainable code ✅ Pagination & Infinite Queries – Efficient handling of large datasets ✅ DevTools Support – Easy debugging and monitoring 💡 Key Advantage: It separates server state from UI state, making applications more scalable and easier to manage. 📌 Example Use Case: Instead of manually calling APIs in useEffect, we can simply use: useQuery({ queryKey: ['users'], queryFn: fetchUsers }) This approach reduces boilerplate code and improves overall developer experience. 🔥 Conclusion: If you are building modern React applications, integrating TanStack React Query can significantly enhance performance, maintainability, and user experience. #ReactJS #TanStack #ReactQuery #WebDevelopment #FrontendDevelopment #JavaScript #SoftwareDevelopment

Day 12/30 of Consistency Challenge 🚀 🎯Project 2: MERN Expense Tracker Almost done with the backend! 📌 Today’s Progress: - Defined Mongoose schema for both Income and expense. - Completed APIs for income and expense along with the endpoint to generate .xlsx files for download. https://lnkd.in/dpJFjDcT ➡️ Next Steps: Build Dashboard API. Move into frontend integration. #BuildInPublic #MERNStack #NodeJS #WebDevelopment #CodingChallenge #BackendDevelopment

𝗢𝗻𝗲 𝗺𝗶𝘀𝘁𝗮𝗸𝗲 𝗜 𝗸𝗲𝗲𝗽 𝘀𝗲𝗲𝗶𝗻𝗴 𝗶𝗻 𝗡𝗼𝗱𝗲.𝗷𝘀 𝗔𝗣𝗜𝘀: Everything is “async”… but the app is still slow. Here’s the reality: **async ≠ parallel** ```js for (const id of ids) {  await fetchData(id); } ``` Looks clean. Feels correct. But it runs 𝗼𝗻𝗲 𝗯𝘆 𝗼𝗻𝗲. 10 requests → 10x time. --- Now look at this: await Promise.all(ids.map(fetchData)); Same logic. Different execution. Now it runs 𝗶𝗻 𝗽𝗮𝗿𝗮𝗹𝗹𝗲𝗹. --- Think of it like this: You have 10 API calls. • First approach → like one worker doing tasks one after another • Second approach → like 10 workers doing tasks at the same time Same work. Massive difference in speed. --- Most performance issues are not about: ❌ bad algorithms ❌ complex logic They’re about: ✅ how you execute async code --- Before adding caching, queues, or scaling infra… Check this first. You might fix your entire performance problem with one line. #NodeJS #BackendEngineering #AsyncProgramming #PerformanceOptimization #JavaScript

Excited to announce Typedrift v1.0.0! 🎉 A new kind of React data-fetching library that eliminates the most painful part of modern full-stack development: “type drift “ between your frontend components and backend queries. What’s New in v1.0.0 - Props = Query: Define your component’s data needs via TypeScript interfaces, everything else is derived automatically. - Zero boilerplate resolvers with ‘view()’, ‘batch.one()’, ‘batch.many()’ - First-class mutations using ‘action()’ with Zod validation, guards, and built-in redirects - Production-ready: middleware, caching, OpenTelemetry, rate limiting, audit logs - Full React 19 + RSC compatibility - No codegen, no separate query hooks, no manual data wiring Why Typedrift? Because the biggest source of bugs in React/Next.js apps isn’t bad code, it’s “out-of-sync types” between what your component expects and what the server actually returns. Typedrift makes the component prop shape the “single source of truth”. The server must conform. Type safety becomes structural. If you’re tired of maintaining query files, fighting stale types, or dealing with the boilerplate of TanStack Query + Zod + manual wiring… this one’s for you. Check it out: https://lnkd.in/e5HRgUgA Would love your feedback, stars, or contributions! #React #TypeScript #NextJS #FullStack #DeveloperTools

Coming in typedrift v1.1.0 Exactly one week ago, I shipped the first version of Typedrift because I got tired of the same old headaches in data fetching for React-driven frameworks. Data fetching has always felt broken. You define exactly what data a component needs in its props… then duplicate that logic in a separate query. Over time, they drift. You only discover the mismatch at runtime. Typedrift fixes that. Instead of writing queries, you define a typed view from your model. That view becomes the single source of truth for both fetching on the server and the props your component receives. No more duplication. No drift. What’s new in v1.1.0: - TanStack Adapter: seamless integration with TanStack Start - Next.js Adapter: first-class support for App Router and Server Components Clean, type-safe data fetching with zero boilerplate and zero codegen. If you’ve felt the pain of maintaining queries that drift away from your components (especially if you’ve used Relay, tRPC, or TanStack Query), I’d love your feedback. Check it out: - NPM: https://lnkd.in/drSZji_9 - GitHub: https://lnkd.in/e5HRgUgA What do you think — does this approach solve a real problem for you? #React #TypeScript #DataFetching #WebDev #NextJS #TanStack

🚀 Just shipped uEvent — a full-stack event ticketing platform built from scratch as part of a campus challenge. Here's what's under the hood: Backend (NestJS 11 + TypeORM + PostgreSQL) Stripe Connect payments with idempotent webhook handling — every side effect (ticket issuance, stock update, org transaction, email) fires exactly once, even if the webhook retries TOTP two-factor authentication for both user and organization accounts Web Push (VAPID) + transactional email notifications with PDF ticket attachments Localized API responses via Accept-Language (EN / UA) Full OpenAPI/Swagger documentation with concrete response schemas Frontend (React Router v7 SSR + TanStack Query + Tailwind) Feature-Sliced Design architecture Checkout flow with promo codes, real-time price preview, and Stripe Elements Organization dashboard with revenue charts, wallet, payout withdrawal requests PWA-ready with a service worker What I learned the hard way: Race conditions on ticket stock are real. A read–modify–save pattern under concurrent requests will oversell. One conditional SQL UPDATE fixes it. Webhook idempotency isn't optional. Stripe will retry. So every payment side effect needs a persistent "already applied" flag before it runs. SMTP rate limits will hit you exactly when you bulk-send post-payment emails. A serial send queue with inter-message delays is not glamorous — but it works. Stack: NestJS · TypeORM · PostgreSQL · React Router v7 · TanStack Query · Stripe Connect · Nodemailer · Web Push · Docker · Turborepo 🔗 GitHub: https://lnkd.in/dCMBcwAG #webdev #nestjs #react #stripe #typescript #fullstack #opensource

You're consuming a third-party API. Everything works fine. Then one day, a field that was a string is now a number. Or it just disappears. No changelog, no notification — you find out when something silently breaks in production at 2am. So I built a small tool to fix that for myself, and decided to open source it. api-schema-time-machine — an Express middleware that sits between your app and any upstream API, fingerprints every JSON response, and tells you the moment the shape changes. Zero config to get started: app.use(schemaTracker({ target: 'https://api.example.com' })); That's it. It automatically:  • Fingerprints response structures (values → types)  • Diffs the current shape against the last snapshot  • Tracks added, removed, changed, and renamed fields  • Surfaces everything in a built-in dashboard at /schema-tracker  • Supports SQLite out of the box, PostgreSQL optionally No schema files to write. No code generation. No annotations. It just watches. This isn't a complex system — it's a focused tool for a specific pain point. If you're integrating with APIs you don't control, it might save you a production incident. npm: npm install api-schema-time-machine. npm link : https://lnkd.in/gWCvsMs4 Would love feedback from anyone who tries it — especially around edge cases I haven't hit yet. #opensource #nodejs #expressjs #javascript #api #devtools #sde #softwaredevelopment

Today, I optimized my application’s search functionality to handle thousands of records without breaking a sweat. I’ve officially implemented Debouncing. The Performance Gains: Reduced API Traffic: By waiting for the user to finish typing, I’ve cut down unnecessary server requests by over 80%. Smoother UI: No more "typing lag." The search experience feels fluid and professional because the main thread isn't choked by constant network calls. Custom Hook Architecture: I built a reusable useDebounce hook that can be applied to any input, window resize event, or scroll listener in the future. Smart Filtering: Combined with my PostgreSQL backend, the app now provides instant, relevant results only when the user is ready. The Aha! Moment: The secret to a fast app isn't just a fast server; it is Smart Request Management. Learning to control the flow of data between the client and server is a vital skill for any full-stack engineer. Efficiency isn't about doing more; it is about doing only what is necessary. #ReactJS #PerformanceOptimization #JavaScript #100DaysOfCode #WebDevelopment #FrontendEngineering #Day89 #Theadityanandan #Adityanandan

Today I learned about performance optimization and data fetching in React using Code Splitting, Lazy Loading, Suspense, and React Query (TanStack Query). ** Code Splitting Code splitting helps break large bundles into smaller chunks, so the app loads faster and only required code is loaded when needed. ** React.lazy() It allows us to load components dynamically instead of loading everything at once. const Home = React.lazy(() => import("./Home")); ** Suspense & Fallback Suspense is used with lazy loading to show a fallback UI (like a loader) while the component is loading. <Suspense fallback={<h2>Loading...</h2>}> <Home /> </Suspense> ** React Query (TanStack Query) React Query helps in fetching, caching, and managing server data efficiently. It automatically handles API caching, loading states, and background updates. @Devendra Dhote @Ritik Rajput @Mohan Mourya @Suraj Mourya #ReactJS #WebDevelopment #FullStackDeveloper #CodingJourney

I recently upgraded my Trading Journal from a frontend-only project to a full-stack application — and this completely changed how I see development. Earlier, it was just UI. Now, it’s a complete system ⚡ Built with the PERN stack (PostgreSQL, Express, React, Node.js), this version includes: 🔐 Secure authentication (login/register with persistent sessions) 📊 Advanced dashboard with real trading metrics (PnL, win rate, RR, avg profit/loss, etc.) 📈 Interactive charts (yearly PnL with monthly breakdown) 🧠 Fully dynamic trade logging (multiple executions, quantity handling) 🎯 Powerful filtering & sorting (date, PnL, market type, order type, and more) ⚙️ Backend-controlled pagination and calculations 📉 Trade-level insights based on selected filters 🎨 Clean UI with modals, drag interactions, and detailed views One major realization from this upgrade: 👉 Frontend shows data. Backend defines the product. Handling calculations, filters, pagination, and performance on the backend made the app scalable and realistic — closer to how real trading tools actually work. 🚀 Deployed and production-ready: Frontend – Vercel Backend – Render Database – Supabase This project pushed me to think beyond UI and actually understand how systems are built. Still improving, but this is a big step forward. #FullStackDevelopment #PERNStack #React #NodeJS #PostgreSQL #WebDevelopment #Projects