https://github.com/rishabhraikwar98/sinppet.code

A fully functional Ray.so clone (a powerful tool for sharing code snippets) with additional features. Share beautiful screenshots of your code on your social media platforms.
https://github.com/rishabhraikwar98/sinppet.code

nextjs react shadcn-ui tailwindcss ui-design vercel vite

Last synced: 2 days ago
JSON representation

A fully functional Ray.so clone (a powerful tool for sharing code snippets) with additional features. Share beautiful screenshots of your code on your social media platforms.

• Host: GitHub
• URL: https://github.com/rishabhraikwar98/sinppet.code
• Owner: rishabhraikwar98
• Created: 2024-03-19T08:11:17.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-03T08:03:35.000Z (9 months ago)
• Last Synced: 2024-04-03T09:26:22.813Z (9 months ago)
• Topics: nextjs, react, shadcn-ui, tailwindcss, ui-design, vercel, vite
• Language: JavaScript
• Homepage: https://sinppet-code.vercel.app
• Size: 135 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Snppiet.Code

A fully functional Ray.so clone (a powerful tool for sharing code snippets) with additional features. Share beautiful screenshots of your code on your social media platforms.

## Demo

Link: https://sinppet-code.vercel.app/

## Screenshots

![App Screenshot](https://res.cloudinary.com/dbdqc0uzq/image/upload/v1710918840/Screenshots/wvcrxxkiycfijrbdojig.jpg)

## Features

- 10+ elegant themes (light + dark theme included).

- 12+ font styles (popular monospace fonts).

- Support for all popular languages with auto-detection and syntax highlighting.

- Multiple export options: save as SVG/PNG, copy to clipboard and copy link.

- Other customization options like: font size, padding, background etc.

## Technologies used

- [React](https://es.reactjs.org/) - Front-End JavaScript library.

- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework.

- [ShadCN UI](https://ui.shadcn.com) - Re-usable components built using Radix UI and Tailwind CSS.

- [Zustand](https://zustand-demo.pmnd.rs/) - Bear necessities for state management in React.

- [Highlight.js](https://highlightjs.org/) - Syntax highlighter.

- [React Simple Code Editor](https://www.npmjs.com/package/react-simple-code-editor) - Browser based code editor.

- [HTML to Image](https://www.npmjs.com/package/html-to-image) - Generates an image from a DOM node using HTML5 canvas and SVG.

- [React Hot Toast](https://react-hot-toast.com/) - Toast notifications for React.

- [React Hotkeys Hook](https://www.npmjs.com/package/react-hotkeys-hook) - A React hook for using keyboard shortcuts in components in a declarative way.

- [Resizable](https://www.npmjs.com/package/re-resizable) - A resizable component for React.

- [Vite](https://vitejs.dev/) - Frontend Tooling

## Run Locally

Clone the project

```bash

  git clone https://github.com/rishabhraikwar98/sinppet.code

```

Go to the project directory

```bash

  cd snippet.code

```

Install dependencies

```bash

  npm install

```

Start the server

```bash

  npm run dev

```