CodeSnap

<div align="center"> <img height="70px" src="https://github.com/user-attachments/assets/89a292d5-674e-41de-b0de-6af88c2042b3" alt="CodeSnap favicon"> <h1>CodeSnap – Create, Run & Share Code Snippets</h1> <a href="https://codesnap.pro/">View Demo</a> · <a href="https://github.com/RanitManik/CodeSnap/issues/new?assignees=&labels=&projects=&template=bug_report.yml&title=">Report Bug</a> · <a href="https://github.com/RanitManik/CodeSnap/issues/new?assignees=&labels=&projects=&template=feature_request.yml&title=">Request Feature</a> <br/> <br/>

</div>

Welcome to CodeSnap, a lightweight app for creating, sharing, running, and viewing code snippets with ease. Built to simplify code sharing, CodeSnap enables users to generate a shareable link for any snippet, making collaboration more efficient and accessible.

Table of Contents

• Overview
  • Why CodeSnap?
  • Technologies Used
  • Features
• Getting Started
  • Prerequisites
  • Installation
  • Running the Development Server
  • Building for Production
  • Linting and Formatting
• Contributing
• Links
• Contact
• Acknowledgments

Overview

Why CodeSnap?

CodeSnap was created to provide an easy-to-use solution for sharing code snippets, making collaboration faster and more intuitive. The platform supports syntax highlighting, code editing, and live code execution, so you can showcase and test code within seconds.

Technologies Used

<p> <img src="https://img.shields.io/badge/next.js-%23000000.svg?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js" height="30px"> <img src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB" alt="React" height="30px"> <img src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" height="30px"> <img src="https://img.shields.io/badge/postgresql-%23336791.svg?style=for-the-badge&logo=postgresql&logoColor=white" alt="PostgreSQL" height="30px"> <img src="https://img.shields.io/badge/Prisma-3982CE?style=for-the-badge&logo=Prisma&logoColor=white" alt="Prisma" height="30px"> <img src="https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="TailwindCSS" height="30px"> <img src="https://img.shields.io/badge/monaco-%23007ACC.svg?style=for-the-badge&logo=microsoft&logoColor=white" alt="Monaco Editor" height="30px"> <img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript" height="30px"> <img src="https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white" alt="ESLint" height="30px"> <img src="https://img.shields.io/badge/Prettier-F7B93E.svg?style=for-the-badge&logo=Prettier&logoColor=black" alt="Prettier" height="30px"> </p>

Features

• Real-time Code Editor: Built with Monaco, the editor offers syntax highlighting, code completion, and error handling.
• Live Code Execution: Test code snippets in real-time.
• Firebase Integration: Reliable backend for storing, retrieving, and managing snippets.
• Responsive Design: Optimized for both desktop and mobile.
• Sharing Made Easy: Generate and share links with a single click.

Getting Started

Prerequisites

• Node.js (>= 20.0.0)
• npm (>= 10.0.0) or yarn (>= 1.22.0)

Installation

1. Clone the repository:

   git clone https://github.com/RanitManik/CodeSnap.git
   cd CodeSnap
   

2. Install dependencies:

   npm install
   

   or

   yarn install
   

Running the Development Server

To start the development server, run:

npm run dev

or

yarn dev

Open your browser and navigate to http://localhost:5173 to interact with CodeSnap.

Building for Production

To build the application for production, run:

npm run build

or

yarn build

The built files will be located in the dist directory.

Linting and Formatting

To lint your code, run:

npm run lint

or

yarn lint

To format your code, run:

npm run format

or

yarn format

Contributing

Contributions to CodeSnap are welcome! To contribute:

1. Fork the repository.

2. Create a new branch for your feature or bug fix:

   git checkout -b feature-name
   

3. Make your changes and commit them with clear, descriptive messages.

4. Push your changes to your fork:

   git push origin feature-name
   

5. Open a pull request, detailing the changes and improvements you’ve made.

Links

| Environment | Link | | ------------------ | ---------------------------------------------- | | Development Server | beta.codesnap.pro | | Production Server | codesnap.pro |

Contact

<table> <tr> <th></th> <th>Social Media</th> <th>Username</th> <th>Link</th> </tr> <tr> <td><img src="https://cdn4.iconfinder.com/data/icons/social-media-logos-6/512/112-gmail_email_mail-512.png" width="20" /></td> <td>Email</td> <td><code>ranitmanik.dev@gmail.com</code></td> <td><a href="mailto:ranitmanik.dev@gmail.com" target="_blank">Email</a></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LinkedIn_logo_initials.png/480px-LinkedIn_logo_initials.png" width="20" /></td> <td>LinkedIn</td> <td><code>Ranit Manik</code></td> <td><a href="https://www.linkedin.com/in/ranit-manik/" target="_blank">LinkedIn</a></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/600px-Instagram_icon.png" width="20" /></td> <td>Instagram</td> <td><code>ranit_manik_</code></td> <td><a href="https://www.instagram.com/ranit_manik_/" target="_blank">Instagram</a></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/6/6c/Facebook_Logo_2023.png" width="20" /></td> <td>Facebook</td> <td><code>RanitKumarManik</code></td> <td><a href="https://www.facebook.com/RanitKumarManik/" target="_blank">Facebook</a></td> </tr> </table>

Feel free to reach out if you have questions or just want to chat about web adventures!

Acknowledgments

This project wouldn't be possible without the collaboration and resources of the developer community. Thanks to the community and tools like React and Nextjs. Special appreciation goes to friends and family. I hope it inspires further learning.

---

<p align="center"> Thank you for using <strong>CodeSnap</strong>! Happy coding! 👨‍💻 </p>