Code Snippet Builder: AppwriteHashnode Hackathon

Thanks, Appwrite and Hashnode for giving us this amazing opportunity.

Description of Project

The Code Snippet Builder is an innovative tool designed to help developers and programmers create visually appealing and professional-looking code snippets for various programming languages. With its user-friendly interface and drag-and-drop functionality, the builder simplifies the process of showcasing code in an attractive and customizable manner.

Whether you need to document your code, share examples in tutorials, or enhance your technical documentation, the Code Snippet Builder is the perfect solution. It offers a wide range of customizable options, including various templates and styling features, allowing you to create snippets that align with your branding or project requirements.

The builder's intuitive drag-and-drop functionality enables you to effortlessly arrange code blocks, add syntax highlighting, and format your snippets to make them more visually engaging. You can easily customize the appearance of your code snippets, adjusting font styles, colors, background themes, and more.

The Code Snippet Builder supports multiple programming languages, catering to the diverse needs of developers across different domains. Whether you're working with Python, JavaScript, TypeScript, or any other language, you can rely on the builder to generate beautiful code snippets that effectively communicate your ideas.

Using the Code Snippet Builder, you can elevate your code documentation, making it more accessible and visually appealing to fellow developers, clients, or users. Start building beautiful code snippets today and enhance how you present and share your code.

The desktop version of our website provides the best experience. For optimal usage, please access it from your desktop.

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.

• 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.

Challenges We Faced

During the development process, I encountered some exciting challenges that I had to overcome by reading documentation, collaborating with the Appwrite community, and seeking help from other developers.

These particular aspects proved to be the most difficult for me.

Database relationship

When working with the Appwrite cloud, I encountered a version mismatch. The version I was using, 1.1.x, didn't have support for creating relationships between users and their data. To tackle this challenge, I reached out to the helpful Appwrite community on Discord. They provided me with valuable suggestions and feedback. Ultimately, I decided to associate the user with the snippet data by storing the user ID. This solution allowed me to overcome the limitation and establish the desired relationship between users and their data.

Condition Query

When I was working on listing users' snippets on the dashboard, I came across a challenge. I needed to figure out how to fetch only the snippets belonging to the current user. After reading the documentation, I discovered a solution. Appwrite provides a Query model that allows us to write conditions, which helped me filter and fetch only the snippets associated with the current user.

Query.equal("creator", "creatorId")

Snippet Snapshot image

While working on the dashboard, I encountered a challenge when I wanted to display a visual preview of the snippets created by the user. The problem was how to store the snapshot image data. To tackle this, I referred to the storage documentation and discovered that Appwrite offers a set of methods specifically designed for creating, updating, and deleting files of various types such as PNG, JPG, and more. This enabled me to successfully store and manage the snapshot images associated with the snippets.

Public Code Repo

The Code Snippet Builder welcomes contributions and has a public repository available for collaboration.

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

Demo Link

Website: https://snippetbuilder.sachinchaurasiya.dev/

Email: demo@codesnippetbuilder.com

Password: demo@123

And that’s it for this topic. Thank you for reading.

Connect with me 👋

• LinkedIn

• Twitter