🚀 Inside the Architecture of SnappShare: Building a Reliable File-Sharing System with Nuxt 3 & .NET

SnappShare isn’t just another file upload app — it’s a secure, chunked, resumable, and production-ready file-sharing platform. In this post, I’ll walk you through how I structured the architecture, the challenges I solved, and why I made certain decisions — from the Nuxt 3 frontend to the robust .NET API.

---

📌 What is SnappShare?

SnappShare is a secure file-sharing system that supports:

• 🔄 Resumable uploads (ideal for poor network conditions)

• 🧱 Chunk-based file transfers with retry logic

• 🔐 SAS-secured download links

• 📦 Azure Blob Storage & Service Bus integration

• 📊 Access tracking, progress, and expiration handling

Live frontend: https://snappshare-web.vercel.app
GitHub: Frontend | Backend

---

🖥️ Frontend Architecture (Nuxt 3 + Pinia + IndexedDB)

🧠 Core Responsibilities

• Chunked uploads with retry

• Persistent resumable jobs via IndexedDB

• File previews, status-based UI, and progress tracking

• Offline resilience

• State management with Pinia

🗂 Folder Structure

SnappShareWeb/
├── components/        # UI components (buttons, skeletons, toasts)
├── composables/       # Logic (upload runner, hash worker, toasts)
├── layouts/           # Nuxt layouts (optional use)
├── pages/             # Route-based views
├── public/            # Static assets
├── server/            # (Unused for now)
├── stores/            # Pinia stores (e.g., file-uploads.ts)
├── tests/             # Placeholder for tests
├── types/             # Global types (e.g., UploadJob)
├── workers/           # Web workers (e.g., hash.worker.ts)
├── services/          # API abstraction layer
└── nuxt.config.ts     # Project config

🧩 Key Layers

🔄 useUploadJobRunner.ts

Encapsulates:

• Chunk slicing

• Retry logic (3 attempts max)

• Progress tracking

• Upload finalization

🧠 file-uploads.ts Store

Handles upload state:

• Start, resume, remove uploads

• List reactive jobs

• Status filtering & sorting

💾 IndexedDB Layer

• Persists jobs locally

• Resumes uploads by file hash

• Uses idb-keyval for simplicity

⚙️ Workers

• SHA hashing offloaded to hash.worker.ts

• Improves performance before upload begins

🖼️ UI Layer

• Lottie animations + skeleton loaders

• Custom components for progress, status, and feedback

---

🧰 Backend Architecture (.NET 8 + EF Core + Azure)

🔧 Core Project Layers

api/
├── Controllers/        # FileEntry endpoints
├── DTOs/               # Input/output contracts
├── Models/             # EF Core entities + Enums
├── Services/           # Core logic
├── Repositories/       # EF Core data layer
├── Configs/            # Azure config bindings
├── Middlewares/        # Global error handling
├── Extensions/         # Service registration
└── Program.cs          # App bootstrap

🧠 Logic Breakdown

☁️ Azure Integrations

• Blob Storage for chunked file uploads (Block Blobs)

• Azure Service Bus to delay deletion messages (post-upload expiry)

• App Service hosting for API

• SAS tokens for secure, temporary file access

🔐 CORS & Security

• Whitelisted frontend origins only

• Supports secure credentials via .AllowCredentials()

• Global error handling via GlobalExceptionHandler for clean ProblemDetails responses

---

📈 Testing & Future-Proofing

✅ Frontend Plans

• Background upload queue (with concurrency control)

• Drag-and-drop support

• Pause/resume upload logic

• Error logs per chunk

✅ Backend Improvements

• Unit & integration tests using mock interfaces

• File lifecycle monitoring

• WebSocket integration for real-time status updates

---

📦 Why This Stack?

• Nuxt 3: SSR-ready, modular, and built for Vue 3 with Vite speed.

• Pinia: Modern, type-safe state management.

• IndexedDB: Offline-friendly resumable uploads.

• .NET + EF Core: Scalable and fast backend with built-in DI, validation, and clean layering.

• Azure Services: Production-grade blob storage and message scheduling out of the box.

---

🔗 Explore the Code

• 🌐 Frontend GitHub: SnappShareWeb

• ⚙️ Backend GitHub: SnappShare

---

✍️ Final Thoughts

SnappShare has been a personal dive into solving real-world file upload problems — poor connections, huge files, and secure access — with a clean, maintainable architecture.
It’s not just a side project — it’s a showcase of practical software engineering with real-world Azure integration and frontend resilience.

Have feedback? Try the live version or check out the code and open an issue. Let’s build better uploads — together.

---

📢 Let’s Connect

Follow my journey building tools like SnappShare, diving deep into .NET, Azure, and full-stack development:

• 🔗 LinkedIn: Freeman

• 🐦 X (Twitter): @Freemancodz

• 📺 YouTube: Freemancodz