Awesome
<h1 align="center">Code Snippets Builder</h1> <p align="center"> <img src="https://cronitor.io/badges/Qiq0jf/production/nuxgbgbH2nKEw_qXQ7AFpRWRH54.svg"/> </p> <h3 align="center">Start Building Beautiful Code Snippets Today!</h3> <p align="center">With our drag-and-drop code snippet builder, you can effortlessly showcase your code in a visually appealing and professional manner.</p>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.
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.
-
🍴 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!