Code Snippets Builder

Start Building Beautiful Code Snippets Today!

With our drag-and-drop code snippet builder, you can effortlessly showcase your code in a visually appealing and professional manner.

Build Beautiful Code Snippets

Create stunning code snippets for different programming languages with ease. Customize the appearance, choose from various templates, and enhance your code documentation.

Playground Link and Demo Credentials

Website: Demo Link

Email: demo@codesnippetbuilder.com

Password: demo@123

Features

Drag and Drop Interface

Easily drag and drop code elements to create your desired snippet structure.

Customize Appearance

Choose from a wide range of themes, fonts, and color schemes to make your snippets visually appealing.

Multi-Language Support

Create snippets for various programming languages, including JavaScript, Python, Java, and more.

Tech Stack

• ReactJs: Empowering the creation of UI components with its component-based architecture.

• TypeScript: Enabling type safety and preventing runtime errors in the development process.

• Netlify: Facilitating the seamless deployment of the project.

• React Flow: React component for building node-based editors and interactive diagrams.

• ChakraUI: A simple, modular and accessible component library

• Appwrite Cloud

  • Auth: Streamlining authentication and authorization management.

  • Email/Password

    • Google

    • Github

  • Database: Serving as a reliable storage solution for the snippets of data.

  • Storage: Providing a secure and efficient repository for storing the snapshot images of code snippets.

🍴 Fork and Clone the Repo

First, you need to fork the Code Snippet Builder repo. You can do this by clicking the Fork button on the top right corner of the repo. If you are new to forking, please watch this YouTube Guide to get started.

Once forked, you can clone the repo by clicking the Clone or Download button on the top right corner of the forked repo.

Please change the directory after cloning the repository using the cd <folder-name> command.

Note For Development we recommend using the yarn

npm install --global yarn

⬇️ Install Dependencies

Next, install the dependencies by running the following command in the Code Snippet Builder repo:

yarn install

🦄 Start the Development Mode

Use the following command to start the app in development mode:

yarn start

It runs the app in development mode. Open http://localhost:3001 to view it in your browser.

🧱 Build the App for Production

Use the following command to build the app for production:

yarn build

It builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.

🛡️ License

Your Code Snippet Builder is licensed under the MIT License - see the LICENSE file for details.

Contributors

We ❤️ all contributions, big and small! Check out our CONTRIBUTING guide to get started and let us know how we can help.

Don't want to miss anything? Give the project a ⭐ 🚀

A HUGE THANK YOU to all our supporters!

Stargazers

Forkers

Contributors