Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/The-Enthusiast-404/text-bin-frontend

Frontend For TextBin (Open Source Alternative to PasteBin)
https://github.com/The-Enthusiast-404/text-bin-frontend

nextjs opensource pastebin reactjs

Last synced: about 1 month ago
JSON representation

Frontend For TextBin (Open Source Alternative to PasteBin)

Host: GitHub
URL: https://github.com/The-Enthusiast-404/text-bin-frontend
Owner: The-Enthusiast-404
License: mit
Created: 2024-07-02T01:38:32.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-08-12T12:56:02.000Z (about 1 month ago)
Last Synced: 2024-08-12T14:42:16.881Z (about 1 month ago)
Topics: nextjs, opensource, pastebin, reactjs
Language: TypeScript
Homepage: https://app.textbin.theenthusiast.dev/
Size: 294 KB
Stars: 31
Watchers: 0
Forks: 3
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# TextBin Frontend 🖥️

![Next.js](https://img.shields.io/badge/Next.js-14-black?style=for-the-badge&logo=next.js)
![React](https://img.shields.io/badge/React-18-61DAFB?style=for-the-badge&logo=react)
![TypeScript](https://img.shields.io/badge/TypeScript-4-3178C6?style=for-the-badge&logo=typescript)
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3-38B2AC?style=for-the-badge&logo=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:
```bash
git clone https://github.com/your-username/textbin-frontend.git
cd textbin-frontend
```
2. Install dependencies:
```bash
npm install
# or
yarn
```
3. Start the development server:
```bash
npm run dev
# or
yarn dev
```
4. Open [http://localhost:3000](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](LICENSE).

## 📧 Contact

For any queries, reach out to me at [ [email](mailto: [email protected]) ].

## Acknowledgements

- [Next.js](https://nextjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [monaco-editor](https://microsoft.github.io/monaco-editor/)