https://github.com/rahil1202/code-snippet

"Code Snippets" is a web application designed to facilitate the creation and management of code snippets. The application incorporates specialized tools for a versatile code editing experience and implements a user interface that is clean and responsive
https://github.com/rahil1202/code-snippet

code-snippets codegenerator html-css-javascript material material-ui reactjs

Last synced: about 10 hours ago
JSON representation

"Code Snippets" is a web application designed to facilitate the creation and management of code snippets. The application incorporates specialized tools for a versatile code editing experience and implements a user interface that is clean and responsive

• Host: GitHub
• URL: https://github.com/rahil1202/code-snippet
• Owner: rahil1202
• Created: 2023-12-06T06:02:43.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-13T09:53:20.000Z (about 1 year ago)
• Last Synced: 2024-04-24T07:15:22.510Z (9 months ago)
• Topics: code-snippets, codegenerator, html-css-javascript, material, material-ui, reactjs
• Language: JavaScript
• Homepage: https://code-snippet-rahil1202.vercel.app/
• Size: 208 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# Code Snippets 🚀

### Create and manage code snippets in various languages and capture code screenshots.

"Code Snippets" is created using ReactJs, Monaco Editor, and MUI.

## Technologies Used 🛠️

- **ReactJS**: A JavaScript library for building user interfaces.

- **Monaco Editor**: A versatile code editor that powers Visual Studio Code.

- **MUI (Material-UI)**: A React UI framework that implements Google's Material Design.

## Features ✨

- **Code Snippet Management**: Easily create, edit, and organize your code snippets.

- **Monaco Editor Integration**: Enjoy a powerful and customizable code editing experience.

- **Clean and Responsive UI**: User-friendly interface that adapts to various screen sizes.

### Quick Walkthrough 🚶‍♂️

- ##### Create a New Snippet:

  Click on the ➕ button to create a new snippet. Enter the snippet name and description.

  ![New Snippet](https://drive.google.com/uc?id=1QI87QrtK57dDzmXr-izbXeO0OlC9ysTa)

- ##### Write Code:

  Select the language and start writing code in the editor.

  ![Write Code](https://drive.google.com/uc?id=1ifj1qrrwmP6gfSzTGExmKz_5-c6EAiPl)

- ##### Change Theme ✨:

  Personalize your coding experience by changing the theme.

  ![Change Theme](https://drive.google.com/uc?id=1aOZnuaLBOAq92SiFgwY2fXDgDWohCupl)

- ##### Take a Screenshot 🎉:

  Capture a screenshot of your code by clicking on the "Take Screenshot" button.

  ![Take Screenshot](https://drive.google.com/uc?id=1XNzM7y13S4IuEnuYFWXi8olRckTxjdg0)

  Get your screenshot as 📸:

  ![Code Screenshot](https://drive.google.com/uc?id=1RF1kPmWhfJwif_sAlm6sXjWkBlPiIVoa)

- ##### Save for Later:

  Save your code snippet for future reference.

  ![Save Code](https://drive.google.com/uc?id=1qp0PS0V533UYPy3-EYOoTKbtzFIjKuBo)

## Getting Started 🚦

1. Clone the repository:

    ```bash

    git clone https://github.com/your-username/code-snippets.git

    ```

2. Install dependencies:

    ```bash

    npm install

    ```

3. Run the application:

    ```bash

    npm start

    ```

4. Open your browser and navigate to `http://localhost:3000`.

## Contributing 🤝

We welcome contributions! Feel free to open issues and pull requests. Make sure to follow our [contributing guidelines](CONTRIBUTING.md).

## License 📄

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.