Skip to content

The-Enthusiast-404/text-bin-frontend

Repository files navigation

TextBin Frontend 🖥️

Next.js React TypeScript Tailwind CSS

TextBin Frontend is a modern, responsive web application built with Next.js and Tailwind CSS. It provides a user-friendly interface for creating, managing, and sharing text snippets with powerful features like syntax highlighting and expiration settings.

🌟 Features

Implemented ✅

  • 📝 Create and manage text snippets
  • 🎨 Syntax highlighting for various programming languages
  • ⏱️ Set expiration times for texts
  • 🌓 Dark/Light mode toggle
  • 📋 One-click content copying
  • 👤 User authentication (sign up, sign in, sign out)
  • 💾 Private and public text options
  • 👍 Like system for snippets
  • 💬 Commenting system
  • 📱 Responsive design for mobile and desktop

Planned Enhancements 🚀

  • 🔍 Full-text search functionality
  • 📊 User dashboard with usage statistics
  • 🔗 Share snippets via short URLs
  • 🔄 Version history for snippets
  • 🏷️ Tagging system for better organization
  • 👥 Collaborative editing features
  • 🔐 Two-factor authentication (2FA) integration
  • 🌐 Multi-language support (i18n)
  • 📁 Folder organization for snippets
  • 📤 Export snippets in various formats
  • 🔌 Integration with popular code editors
  • 📊 Advanced snippet analytics

🛠️ Technology Stack

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript 4
  • Styling: Tailwind CSS 3
  • State Management: React Context API & Hooks
  • HTTP Client: Axios
  • Form Handling: React Hook Form
  • Validation: Zod
  • Syntax Highlighting: react-syntax-highlighter
  • Icons: react-icons

🚀 Getting Started

Prerequisites

  • Node.js 18.x or later
  • npm or yarn

Installation

  1. Clone the repository:
    git clone https://github.com/your-username/textbin-frontend.git
    cd textbin-frontend
  2. Install dependencies:
    npm install
    # or
    yarn
  3. Start the development server:
     npm run dev
     # or
     yarn dev
  4. Open http://localhost:3000 in your browser.

🤝 Contributing

Contributions, issues, and feature requests are welcome!

📝 License

This project is open source and available under the MIT License.

📧 Contact

For any queries, reach out to me at [ [email](mailto: issahil404@gmail.com) ].

Acknowledgements