Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sachin-chaurasiya/code-snippets-builder
Drag and drop code snippet builder, effortlessly showcase your code in a visually appealing and professional manner.
https://github.com/sachin-chaurasiya/code-snippets-builder
appwrite appwrite-auth appwrite-database appwrite-hackathon chakraui code-snippet-builder code-snippets netlify reactjs typescript
Last synced: 3 months ago
JSON representation
Drag and drop code snippet builder, effortlessly showcase your code in a visually appealing and professional manner.
- Host: GitHub
- URL: https://github.com/sachin-chaurasiya/code-snippets-builder
- Owner: Sachin-chaurasiya
- License: mit
- Created: 2023-05-13T18:06:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-31T09:13:43.000Z (4 months ago)
- Last Synced: 2024-10-12T17:41:19.039Z (3 months ago)
- Topics: appwrite, appwrite-auth, appwrite-database, appwrite-hackathon, chakraui, code-snippet-builder, code-snippets, netlify, reactjs, typescript
- Language: TypeScript
- Homepage: https://snippetbuilder.com
- Size: 4.06 MB
- Stars: 24
- Watchers: 1
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
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.
## 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](https://www.youtube.com/watch?v=h8suY-Osn8Q) 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 ` command.
> **Note** For Development we recommend using the `yarn`
```shell
npm install --global yarn
```
### ⬇️ Install Dependencies
Next, install the dependencies by running the following command in the `Code Snippet Builder` repo:
```bash
yarn install
```
### 🦄 Start the Development Mode
Use the following command to start the app in development mode:
```bash
yarn start
```
It runs the app in development mode. Open [http://localhost:3001](http://localhost:3001) to view it in your browser.
### 🧱 Build the App for Production
Use the following command to build the app for production:
```bash
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](https://github.com/Sachin-chaurasiya/Code-Snippets-Builder/blob/main/LICENSE) file for details.
## Contributors
We ❤️ all contributions, big and small! Check out our [CONTRIBUTING](./CONTRIBUTING.md) 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
[](https://github.com/Sachin-chaurasiya/Code-Snippets-Builder/stargazers)
### Contributors
