DEV Community: Sneha Das

Notion Brain

Sneha Das — Sun, 29 Mar 2026 04:53:06 +0000

Notion Brain 🧠 — Visualize Your Thoughts in a 3D Cosmic Universe

This is a submission for the Notion MCP Challenge

What I Built

Notion Brain is a high-performance 3D Knowledge Graph explorer designed to turn your static Notion database into a living, breathing digital "brain." It visualizes every page as a node in a celestial system, mapping relationships and grouping content into thematic clusters based on internal page-to-page mentions.

Unlike standard linear search, Notion Brain allows you to literally "fly" through your workspace, identify forgotten connections between distant concepts, and interact with an AI-driven summary layer without ever leaving the 3D environment.

New Dual-Mode Access: To make the app incredibly frictionless to test, I built a secondary "Easy Mode" connection flow. Users who don't want to create an integration token can simply paste a public Notion Page URL. The application will dynamically extract the page ID, mathematically crawl the document tree recursively, and build a bespoke 3D graph out of just that document's sub-pages!

Video Demo

WATCH THE LIVE DEMO HERE

Show us the code

The project is built with a FastAPI backend and a React-Three-Fiber frontend, fully optimized for Vercel deployment and low-latency interaction.

👉 GitHub Repository: https://github.com/Snehadas2005/Notion-Brain

How I Used Notion MCP

I integrated the Notion SDK into an asynchronous Python backend to act as the "nervous system" of the application, bridging the gap between raw data and 3D visualization.

Dual-Mode Relational Discovery: Using the Notion SDK, the backend either performs a flat workspace-wide search (via API Token) or a recursive top-down tree search (via Public Link). It hunts for child_page references and page_mentions inside blocks, mapping them into spatial nodes and edges.
Multithreaded & Optimized Block Retrieval: To keep the interface fluid and prevent timeouts on massively nested Notion pages, I implemented a ThreadPoolExecutor that safely fetches nested child block content in parallel. I also added recursion constraints to the internal Markdown parser to guarantee high speeds regardless of document depth.
AI Oracle Summary Layer: Once a node is targeted, the backend fetches the raw content, transforms Notion blocks into customized Markdown, and passes it to Google Gemini. This provides a structural summary (Overview, Key Points, Category) directly inside the 3D HUD, making massive docs instantly readable.

🎨 Design & Tech Stack

The application uses a Brutalist / Manga-inspired aesthetic to create a focused, high-contrast atmosphere:

3D Space: Built with @react-three/fiber and @react-three/drei.
Animations: Orchestrated with Framer Motion and GSAP.
Backend: FastAPI with httpx for non-blocking AI requests.
Deployment: Fully serverless mono-repo deployment on Vercel.

Developed by: Sneha Das

Good luck to everyone in the challenge! 🚀

🚀 Solution Challenge 2026 India – Build with AI is Here!

Sneha Das — Mon, 09 Mar 2026 03:29:26 +0000

Exciting opportunity for student developers across India!
The Solution Challenge 2026 invites you to build impactful solutions to real-world problems using Google technologies and AI.

If you're passionate about innovation, problem-solving, and building meaningful tech, this is your chance to showcase your skills and compete at a national level.

💡 What is the Solution Challenge?

A national-level challenge where students design and build solutions that address real-world issues using Google technologies.

👥 Team Formation Guidelines

• Participants must be 18+ and enrolled in a college/university in India
• Register individually first, then form a team of 1–4 members
• Your project must include at least one Google technology

🏆 Prizes & Recognition

🥇 Winner: ₹4,00,000
🥈 1st Runner-Up: ₹3,00,000
🥉 2nd Runner-Up: ₹2,00,000
🎖 Special Category Prizes: ₹50,000 each

⚠️ Important

Please register using the referral code, otherwise the registration will not be counted.

🔑 Registration Code: QZU6HH

🔗 Register Here

promptwars.in

📋 After Registering

Please fill out this form as well:

Google Solution Challenge <> GDG on Campus

docs.google.com

💻 Build with AI. Solve real-world problems. Make an impact.

If you’re interested in participating or looking for teammates, feel free to connect!

🚀 I Built ShopVerse – A Complete E-Commerce Website from Scratch!

Sneha Das — Tue, 17 Jun 2025 15:25:19 +0000

Hey devs!
After 5 intense days of pushing code, battling bugs, and refusing to let my back pain or caffeine withdrawal win 😤—I’m super excited to finally share my latest project:

🎯 ShopVerse – Live Demo

🧠 What is ShopVerse?

ShopVerse is a responsive front-end e-commerce site that mimics real-world online shopping platforms. It’s designed to not just display products but to offer a complete and dynamic user experience — from browsing to checkout, all on the front end.

🔍 Features Overview

🛒 Core Shopping Experience

Product listing with images, prices, and star ratings
Interactive cart system with quantity selection (1–3)
Checkout page with live delivery price and summary calculations
Dynamic order tracking page showing animated shipment status

✨ UI & UX Enhancements

3D particle background using Three.js
Smooth scroll/hover animations for product cards
LocalStorage support for cart/order persistence across sessions
Friendly UI prompts (Empty cart states, order confirmations)

🧱 Tech Stack

HTML5 + CSS3
JavaScript (ES6 Modules)
Three.js – 3D particle background
Day.js – Delivery date calculations
LocalStorage API – Cart/order persistence

Project structure includes modular scripts like:

products.js, cart.js, deliveryOptions.js
Separate JS files for each page: checkout.js, tracking.js, etc.
Organized styling across global & page-specific folders

📸 Preview

🛠 What I Learned

Modularizing JavaScript logic for better readability & reusability
Handling client-side state (cart/orders) using LocalStorage effectively
Integrating visual libraries (Three.js) in vanilla JS projects
UI/UX fine-tuning: user flows, edge case handling, mobile-first design

😅 The Grind Behind It

Let’s be honest: it looks like a basic store on the surface, right?

But trust me, it was so much more than a clone —
I rebuilt components, animated states, and gave it a soul of its own.

💤 4 sleepless nights
💢 5 days of coding + back pain
💧 Only water (no caffeine!)
🎧 Podcasts + pure grit

Shoutout to SuperSimpleDev for a clear foundational path and the motivation to keep going!

📈 What’s Next?

✅ Add user authentication
✅ Wishlist & product filtering
✅ Add backend or integrate Firebase
✅ Real payment gateway integration
✅ Move to full-stack with Node.js or Django

📬 Check it Out!

GitHub Repo

Would love your feedback!
Let me know what you think, how I can improve, or what you’d add to make it even better!

🧠 Let’s connect and build together. Drop your thoughts, and show me your e-commerce builds too!

QueerStation - A Digital Pride Zine Revolution

Sneha Das — Sat, 07 Jun 2025 07:33:46 +0000

This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Update

This project was a winner in the Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Inspiration

In a world where visibility is resistance, QueerStation was born out of the desire to create a vibrant, interactive space that celebrates queer joy, resistance, and community. Inspired by punk zines, Pride protests, and chosen family, this CSS art project is a digital manifestation of love, rebellion, and identity.

Our vision was to translate the feel of a handcrafted zine into a browser experience—with glitchy headers, animated rainbow backgrounds, and floating symbols of celebration. Every element is meant to be loud, chaotic, and beautifully queer.

For the question of why only this project? I wanted to prove that front-end development can be beautiful and bold. That CSS art can tell stories. That a webpage can feel like home. I’ve always believed that tech isn’t just for solving corporate problems—it’s also a powerful medium for representation, empathy, and change.

Demo

🔗 Live Demo: https://brilliant-hamster-1e022f.netlify.app/
💾 GitHub Repo: https://github.com/Snehadas2005/QueerStation
📸 Preview Image:

Journey

This project was built with pure HTML, CSS, and JavaScript—no frameworks, no dependencies (aside from EmailJS for sending anonymous love notes). Here's what we learned:

CSS Art can be expressive and political. Animations like @keyframes glitchEffect and layered shadows let us simulate the punk zine aesthetic.
Interactivity without complexity is possible with minimal JS—hover states, keyboard accessibility, and click effects make the zine feel alive.
We took care to make content inclusive and culturally relevant, focusing on Indian LGBTQ+ resources and Pride movements.

Features

🌈 CSS-based Pride flag animations (Rainbow, Trans, Bi)
📰 Zine-style article cards with punk-inspired borders and shadows
💖 “Spread the Love” form that sends anonymous messages via EmailJS
📚 Resources page with mental health, safety, and advocacy links for the LGBTQ+ community in India
📢 “Tell Your Story” feature for sharing personal experiences using LocalStorage
🎉 Floating shapes and glitch animations for maximum zine energy

Things We're Proud Of

A design that feels handmade, defiant, and hopeful
Full accessibility via keyboard navigation on interactive elements
Creative use of emojis, CSS gradients, and custom fonts to give a voice to every page

Team Credits

Solo project by @sneha_2004
Special thanks to @axrisi for generously contributing a beautiful draft piece to the zine 💌
EmailJS template credits and flag design inspiration from contributors across CodePen and the LGBTQ+ dev community.

📄 License
MIT – Feel free to fork and remix with pride.