This project is a full-stack CRUD (Create, Read, Update, Delete) snippet-sharing platform built with Next.js, React, Tailwind CSS, and MongoDB. It allows users to create, share, and manage code snippets with ease. The platform provides various features for efficient snippet categorization, searching, and user profile management, making it a useful tool for developers to streamline their coding workflow.
https://snip-x-chi.vercel.app/
Here’s a preview of the homepage:
- Fully responsive interface using Tailwind CSS for seamless usability across devices.
- CRUD functionality: create, read, update, and delete code snippets.
- Copiable code snippets with their respective output code for easy reuse.
- Create, edit, and delete snippets as per your needs.
- Organize snippets with tags for efficient categorization and discovery.
- # and sign out functionality with Google authentication provider.
- Search bar for finding specific users and snippets based on tags.
- Visit other users' profiles and view their shared snippets.
- Each post contains clickable tags; clicking a tag filters all posts with the same tag.
- Randomized feed of posts with new snippets displayed after each page reload.
- Additional authentication providers for greater sign-in flexibility.
- Tag filtering feature for more refined snippet searches.
- Next.js – for server-side rendering and routing.
- React – for building interactive UI components.
- Tailwind CSS – for designing a responsive and modern UI.
- MongoDB – for storing user data and snippets in a NoSQL database.
- Full-stack – backend API to handle user authentication, CRUD operations, and snippet management.
- Clone the repository:
git clone project-link - Navigate to the project folder:
cd snipx - Install dependencies:
npm install - Set up a MongoDB database and add the connection string in your environment variables.
- Run the development server:
npm run dev - Visit
http://localhost:3000to view the app.