A modern, minimalist web application for sharing text snippets with unique URLs. Built with Next.js, TypeScript, and MongoDB.
- Simple Text Sharing: Share any text content with a single click
- Unique URLs: Each shared text gets a unique 6-character alphanumeric ID
Visit the application: Share Text
- Frontend: Next.js 15, React 19, TypeScript
- Styling: Tailwind CSS 4, Glassmorphism effects
- Backend: Next.js API Routes
- Database: MongoDB with Mongoose ODM
- UI Components: Radix UI, Lucide React icons
- HTTP Client: Axios
- Development: ESLint, Prettier
-
Clone the repository
git clone https://github.com/theamrendram/share-text.git cd share-text -
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables Create a
.env.localfile in the root directory:MONGODB_URI=your_mongodb_connection_string
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000
src/
├── app/
│ ├── api/
│ │ └── post/
│ │ ├── route.ts # POST endpoint for creating text shares
│ │ └── [id]/
│ │ └── route.ts # GET endpoint for retrieving text shares
│ ├── c/
│ │ └── [id]/
│ │ └── page.tsx # Text viewing page
│ ├── layout.tsx # Root layout with navbar and footer
│ └── page.tsx # Home page with text form
├── components/
│ ├── ui/ # Reusable UI components
│ ├── navbar.tsx # Navigation component
│ ├── footer.tsx # Footer component
│ ├── text-form.tsx # Text input form
│ └── show-id.tsx # Display shared text ID
├── lib/
│ ├── dbConnect.ts # MongoDB connection utility
│ ├── generateAlphanumeric.ts # ID generation utility
│ └── utils.ts # General utilities
└── schemas/
└── text.modal.ts # MongoDB schema definition
Creates a new text share.
Request Body:
{
"text": "Your text content here"
}Response:
{
"message": "Text saved successfully",
"id": "abc123",
"url": "https://sharetext.amrendram.me/c/abc123"
}Retrieves a text share by ID.
Response:
{
"text": "Your shared text content",
"id": "abc123",
"accessCount": 5,
"createdAt": "2024-01-01T00:00:00.000Z"
}The application uses Tailwind CSS with custom glassmorphism effects. You can customize the appearance by modifying:
src/app/globals.css- Global styles- Component-specific classes in each component file
- Color schemes and gradients in the main page
Modify src/schemas/text.modal.ts to add new fields or change the data structure.
We welcome contributions! Please follow these guidelines:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature-name - Make your changes
- Run tests and linting:
npm run lint npm run build
- Commit your changes:
git commit -m 'Add: your feature description' - Push to the branch:
git push origin feature/your-feature-name - Submit a Pull Request
- Use TypeScript for all new code
- Follow the existing code formatting (Prettier + ESLint)
- Write meaningful commit messages
- Add comments for complex logic
- Use descriptive variable and function names
- Provide a clear description of the changes
- Include screenshots for UI changes
- Ensure all tests pass
- Update documentation if needed
- Keep PRs focused and small
- Use GitHub Issues to suggest new features
- Provide detailed descriptions of the desired functionality
- Include use cases and examples
- Use GitHub Issues to report bugs
- Include steps to reproduce the issue
- Provide browser/device information
- Include error messages and console logs
This project is licensed under the MIT License - see the LICENSE file for details.
- GitHub Issues: Report bugs or request features
Made with ❤️ by Kumar Amrendram