DEV Community

Cover image for πŸš€ Build a Secure Text Sharing App Using MERN Stack β€” TextVault πŸ›‘οΈ
ADESH MISHRA
ADESH MISHRA

Posted on

πŸš€ Build a Secure Text Sharing App Using MERN Stack β€” TextVault πŸ›‘οΈ

✨ Introduction

Hey everyone! I’m excited to share my latest project β€” TextVault, a secure, minimal text-sharing platform built using the MERN stack (MongoDB, Express.js, React.js, Node.js).

Unlike typical note apps, TextVault lets users post short messages with password protection and delete them anytime, making it ideal for quick, temporary communication.

🧩 Tech Stack
β€’ Frontend: React.js, Tailwind CSS, Axios, React Toastify
β€’ Backend: Node.js, Express.js, MongoDB
β€’ Deployment: Render (Backend) & Vercel/Netlify (Frontend)

πŸ” Key Features
β€’ Post text with password-based access
β€’ Fetch all posts securely
β€’ Delete posts with a confirmation dialog
β€’ Beautiful, responsive UI with smooth animations
β€’ Toast notifications for user feedback

πŸ’» Demo

πŸ”— https://adeshmishra-textvault.vercel.app/
πŸ’Ύ https://github.com/adesh9201/textvault

βš™οΈ Backend API Overview (Node + Express)

  1. Post Text
    POST /api/posts
    Body: {
    "text": "Hello world!",
    "password": "secret123"
    }
    Validates the password, stores the text securely in MongoDB.

  2. Get All Posts
    GET /api/posts
    Returns all posted texts with timestamps.

  3. Delete Post
    DELETE /api/posts/:id
    Deletes the post by ID (secured with a backend check).

🎨 Frontend Overview (React + Tailwind CSS)
β€’ App.js handles UI logic, fetches, and posts data.
β€’ React Toastify is used for real-time user feedback.
β€’ Password modal appears on posting to verify credentials.
β€’ Posts are shown in a neat clean with delete confirmation.

Sample Component (Post Button)
<button
className="bg-green-600 text-white px-6 py-2.5 rounded-xl hover:bg-green-700 transition"
onClick={handlePost}

πŸš€ Post

🌍 Deployment Notes
β€’ Backend deployed using Render
β€’ Frontend deployed on Vercel
β€’ .env is used to separate API URLs

πŸ”’ Why Password-Protected Posts?

This adds a basic layer of security without full authentication. Ideal for:
β€’ Sharing a message with a known group
β€’ Avoiding spam and unwanted posting
β€’ Lightweight alternative to logins

πŸ“˜ What I Learned
β€’ Structuring MERN stack apps for modularity
β€’ Handling frontend modal interactions cleanly
β€’ Giving better user feedback with toast messages
β€’ Deploying full-stack apps with CI/CD tools

πŸ›  Future Improvements
β€’ Full authentication system (JWT or OAuth)
β€’ Post expiry timer (auto-delete)
β€’ Edit post feature
β€’ Markdown support for rich-text formatting

Image description
Image description
πŸ™Œ Final Thoughts

Building TextVault was an incredible learning experience. If you found this helpful or want to collaborate on something, drop a comment or connect with me on GitHub or LinkedIn.

Let’s keep building! πŸ’ͺ

πŸ”— Connect With Me
β€’ GitHub: https://github.com/adesh9201
β€’ LinkedIn: https://www.linkedin.com/in/adesh-mishra-221816297/

Top comments (0)