TEXT-RETRIVER

🏛️ TextVault - Secure Text File Storage

A modern, full-stack web application for securely storing and managing encrypted text files in the cloud.

---

📌 Important Notice

👉 For the latest version and active development, please visit:

TEXT-RETRIVER Repository 🔗

This repository (Gupta/TextVault) has been superseded. Please use the link above for the most up-to-date version.

---

---

📋 Table of Contents

• Features
• Tech Stack
• Project Architecture
• Getting Started
• Workflow
• API Endpoints
• Project Structure
• Contributing

---

✨ Features

• 🔐 Password-Protected Files - Secure your text files with bcrypt encryption
• 📁 File Management - Create, view, and manage multiple text files
• ☁️ Cloud Storage - Store files securely on MongoDB Atlas
• 🎨 Modern UI - Beautiful, responsive interface with Framer Motion animations
• ⚡ Real-time Updates - Instant file synchronization
• 🎯 Fast Performance - Optimized with Next.js and React 19
• 📱 Mobile Responsive - Works seamlessly on all devices

---

🛠️ Tech Stack

Frontend

• Framework: Next.js 15.0.3
• UI Library: React 19.0 RC
• Styling: Tailwind CSS + TailwindCSS Animate
• Animations: Framer Motion
• Components: Radix UI
• Icons: Lucide React + React Icons
• Notifications: React Toastify

Backend

• Runtime: Node.js
• Database: MongoDB Atlas
• Authentication: Bcrypt
• ORM: Mongoose

Development Tools

• Package Manager: npm
• Code Editor: VS Code (recommended)
• Build Tool: Next.js Built-in

---

🏗️ Project Architecture

┌─────────────────────────────────────────────────────────────┐
│                    TEXTVAULT APPLICATION                    │
└─────────────────────────────────────────────────────────────┘
                              │
                ┌─────────────┴─────────────┐
                │                           │
          ┌─────▼──────┐            ┌──────▼──────┐
          │  Frontend   │            │   Backend   │
          │  (Next.js)  │            │  (Node.js)  │
          └─────┬──────┘            └──────┬──────┘
                │                          │
    ┌───────────┼──────────────┐          │
    │           │              │          │
┌───▼───┐  ┌───▼────┐  ┌─────▼────┐    │
│ Pages │  │ Comp.  │  │  Actions │    │
│ (JSX) │  │ (UI)   │  │(Server)  │    │
└───────┘  └────────┘  └────┬─────┘    │
                             │          │
                        ┌────▼──────────▼────┐
                        │   Mongoose ORM     │
                        └────┬───────────────┘
                             │
                        ┌────▼──────────────┐
                        │  MongoDB Atlas    │
                        │   (Cloud DB)      │
                        └───────────────────┘

---

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• MongoDB Atlas Account
• Git

Installation

1. Clone the repository

   git clone https://github.com/Gupta-02/TEXT-RETRIVER.git
   cd TextVault

2. Install dependencies

   npm install --legacy-peer-deps

3. Set up environment variables

   • Create a .env.local file in the root directory
   • Add your MongoDB Atlas URI:

   MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/textvault?retryWrites=true&w=majority

4. Start the development server

   npm run dev

5. Open in browser

   • Navigate to http://localhost:3000

MongoDB Atlas Setup

Quick Setup Guide:

1. Visit mongodb.com/cloud/atlas
2. Create a free account
3. Create a cluster (M0 free tier)
4. Create a database user with username & password
5. Allow network access (allow all IPs for development)
6. Copy the connection string and add it to .env.local

---

📊 Workflow

User Journey Flow

┌──────────────────────────────────────────────────────────────┐
│                    USER INTERACTION FLOW                     │
└──────────────────────────────────────────────────────────────┘

     ┌────────────────┐
     │   User Opens   │
     │   Application  │
     └────────┬───────┘
              │
              ▼
     ┌────────────────┐
     │  Homepage /    │
     │   Dashboard    │
     └────────┬───────┘
              │
       ┌──────┴──────┐
       │             │
       ▼             ▼
  ┌─────────┐  ┌──────────────┐
  │ Create  │  │ View/Access  │
  │ File    │  │ Existing     │
  │ (Drop)  │  │ Files        │
  └────┬────┘  └──────┬───────┘
       │               │
       ▼               ▼
  ┌──────────────┐  ┌─────────────────┐
  │ Input File   │  │ Enter Password  │
  │ Content &    │  │ & View Content  │
  │ Set Password │  │                 │
  └────┬─────────┘  └─────────┬───────┘
       │                      │
       ▼                      ▼
  ┌──────────────┐  ┌──────────────────┐
  │ Encrypt with │  │ Decrypt Content  │
  │ Bcrypt       │  │ Using Password   │
  └────┬─────────┘  └──────────┬───────┘
       │                       │
       ▼                       ▼
  ┌──────────────┐  ┌──────────────────┐
  │ Save to      │  │ Display File     │
  │ MongoDB      │  │ Content          │
  │ Atlas        │  │                  │
  └──────────────┘  └──────────────────┘

Data Flow Diagram

Frontend Request
       │
       ▼
┌──────────────────────┐
│  Next.js Server      │
│  Action Handler      │
└──────┬───────────────┘
       │
       ▼
┌──────────────────────┐
│  Mongoose Models     │
│  (TextFile Schema)   │
└──────┬───────────────┘
       │
       ▼
┌──────────────────────┐
│  Bcrypt Hashing      │
│  (Password Security) │
└──────┬───────────────┘
       │
       ▼
┌──────────────────────┐
│  MongoDB Query       │
│  (CRUD Operations)   │
└──────┬───────────────┘
       │
       ▼
┌──────────────────────┐
│  Database Response   │
└──────┬───────────────┘
       │
       ▼
┌──────────────────────┐
│  JSON Response       │
└──────┬───────────────┘
       │
       ▼
Frontend UI Update

---

🔌 API Endpoints

Server Actions (Next.js)

Create File

addTextFile(text, textName, password)
- Parameters: File content, filename, password
- Returns: Success status with message
- Security: Password is hashed with bcrypt

View File

getTextFile(filename, password)
- Parameters: Filename, password
- Returns: File content if password matches
- Security: Uses bcrypt comparison

List Files

getAllTextFiles()
- Returns: Array of all filenames (without content)

Delete File

deleteTextFile(filename)
- Parameters: Filename to delete
- Returns: Success status

---

📁 Project Structure

TextVault/
├── public/                      # Static assets
├── src/
│   ├── app/
│   │   ├── layout.js           # Root layout component
│   │   ├── page.js             # Home page
│   │   ├── globals.css         # Global styles
│   │   ├── drop/
│   │   │   └── page.jsx        # File upload page
│   │   └── view/
│   │       └── page.jsx        # File view page
│   ├── components/
│   │   └── ui/
│   │       ├── button.jsx      # Button component
│   │       ├── input.jsx       # Input component
│   │       ├── dialog.jsx      # Modal component
│   │       ├── blur-in.jsx     # Blur animation
│   │       ├── shimmer-button.jsx  # Shimmer effect
│   │       └── ...             # Other UI components
│   ├── actions/
│   │   └── index.js            # Server actions (CRUD)
│   ├── lib/
│   │   ├── connectDb.js        # MongoDB connection
│   │   └── utils.js            # Utility functions
│   └── Models/
│       └── TextFile.js         # MongoDB schema
├── .env.local                   # Environment variables (git ignored)
├── .gitignore                   # Git ignore rules
├── package.json                 # Dependencies
├── tailwind.config.js           # Tailwind configuration
├── next.config.mjs              # Next.js configuration
└── README.md                    # This file

---

🎯 Key Features Explained

🔐 Password Security

• Passwords are hashed using bcrypt (not stored as plain text)
• Each file can have a unique password
• Secure comparison prevents timing attacks

📦 State Management

• Uses Next.js Server Actions for backend logic
• React hooks for frontend state
• MongoDB for persistent storage

🎨 UI/UX

• Responsive Design: Works on mobile, tablet, desktop
• Animations: Smooth transitions with Framer Motion
• Accessible Components: Built with Radix UI

---

📝 Available Scripts

# Start development server
npm run dev

# Build for production
npm build

# Start production server
npm start

# Run linting
npm lint

---

🌍 Environment Variables

Create a .env.local file:

# MongoDB Atlas Connection
MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/textvault?retryWrites=true&w=majority

Never commit .env.local to git! It's already in .gitignore

---

📚 Dependencies

• next: 15.0.3 - React framework
• react: 19.0.0-rc - UI library
• mongodb: Cloud database
• mongoose: ODM for MongoDB
• bcrypt: Password hashing
• tailwindcss: Utility-first CSS
• framer-motion: Animation library
• radix-ui: Accessible components
• react-toastify: Notifications

---

🚀 Deployment

Deploy on Vercel (Recommended)

1. Push your code to GitHub
2. Visit vercel.com
3. Import your repository
4. Add environment variables
5. Click Deploy

Deploy on Other Platforms

• Netlify
• Railway
• Heroku
• AWS

---

🤝 Contributing

Contributions are welcome!

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add AmazingFeature')
4. Push to branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👨‍💻 Author

Gupta - GitHub Profile

---

🙏 Acknowledgments

• Next.js team for the amazing framework
• MongoDB for cloud database
• Tailwind CSS for beautiful styling
• All open-source contributors

---

📞 Support

If you have any questions or issues:

1. Check existing Issues
2. Create a new Issue with detailed information
3. Contact the maintainer

---

Made with ❤️ by Gupta

⭐ Star this repo if you found it helpful!