CodeSnip

A real-time code snippet sharing platform where you can save, organize, and collaborate on code snippets with others.

What is CodeSnip?

CodeSnip is a simple web app built for developers who want a quick way to store, share, and version-control their code snippets. Whether you're collecting useful functions, API responses, or quick reference code, CodeSnip makes it easy to keep everything in one place.

Features

• Save & Organize — Store your code snippets with descriptions and tags
• Real-Time Sync — Changes appear instantly across all your sessions
• Version History — Track changes and revert to previous versions of your snippets
• Authentication — Secure login to keep your snippets private
• Code Editor — Clean, familiar interface for writing and viewing code
• Dark/Light Mode — Comfortable viewing any time of day

Tech Stack

Frontend:

• Next.js 16 — React framework with great DX
• React 19 — UI components
• TypeScript — Type safety
• Tailwind CSS — Styling
• Socket.io — Real-time updates
• Axios — HTTP requests

Backend:

• Express.js — Server framework
• Node.js — Runtime
• MySQL — Database
• Redis — Caching and session management
• JWT — Secure authentication
• Socket.io — Real-time communication

Quick Setup

Prerequisites

• Node.js (v18 or higher)
• MySQL server running
• npm or yarn

Installation

1. Clone and install

cd client
npm install

cd ../server
npm install

2. Environment Setup

Create .env.local in the /client folder:

NEXT_PUBLIC_API_URL=http://localhost:3001

Create .env in the /server folder:

PORT=3001
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=codelab
JWT_SECRET=your_secret_key
REDIS_URL=redis://localhost:6379

3. Start the application

Terminal 1 (Frontend):

cd client
npm run dev

Terminal 2 (Backend):

cd server
npm start

Visit http://localhost:3000 in your browser.

Project Structure

codelab/
├── client/                 # Next.js frontend
│   ├── app/               # Pages and routes
│   ├── components/        # Reusable React components
│   ├── hooks/             # Custom React hooks
│   ├── lib/               # Utilities and helpers
│   ├── services/          # API calls
│   └── package.json
│
├── server/                # Express backend
│   ├── controllers/       # Business logic
│   ├── routes/            # API endpoints
│   ├── middleware/        # Auth, logging, etc.
│   ├── db.js              # Database connection
│   ├── index.js           # Server entry point
│   └── package.json
│
└── readme.md              # This file

How to Use

1. Create an Account — Sign up with your email
2. Add a Snippet — Click the + button and paste your code
3. View History — Check previous versions using the version history panel
4. Share — Copy the snippet ID and share with teammates
5. Search — Find snippets by name or tags

Common Commands

Frontend:

npm run dev      # Start dev server
npm run build    # Build for production
npm run lint     # Check code style

Backend:

npm start        # Start server
npm test         # Run tests (not yet set up)

Troubleshooting

Can't connect to server?

• Make sure your MySQL server is running
• Check that PORT 3001 is not in use
• Verify .env variables are correct

Real-time updates not working?

• Check Redis is running
• Verify Socket.io connection in browser console
• Restart both client and server

Authentication issues?

• Clear browser cookies and try again
• Check JWT_SECRET is set in .env

What's Next?

• Collaborative editing with multiple users
• Code syntax highlighting improvements
• Advanced search and filtering
• Export snippets as files
• Team workspaces

Contributing

Found a bug? Have an idea? Feel free to open an issue or submit a pull request.

License

ISC