Chotu - Custom Link Shortner

Chotu - Appwrite Hashnode Hackathon

Project Details

• Project Name: Chotu
• Made by:
• Vaibhav Kumar Singh - Vaibhav sisodiya

Description

Chotu is a custom link shortener built using React and powered by Appwrite. It provides users with the ability to shorten long URLs into concise, easy-to-share links. The application offers a simple and intuitive user interface for generating custom short links and redirecting users to their desired destinations.

Why Chotu?

We chose to build Chotu to address the need for an efficient and customizable link-shortening solution. Traditional URL shorteners often generate generic links that do not reflect the user's branding or content. Chotu offers the flexibility to create personalized short links, making it ideal for individuals, businesses, and marketers who want to enhance their online presence and improve link-sharing experiences.

Tech Stack

• Frontend: React, Tailwind, DaisyUI
• Backend: Appwrite(https://appwrite.io)

How Appwrite Helped?

Appwrite played a critical role in the development of Chotu. Here's how we utilized Appwrite's features to build our custom link shortener:

1. Appwrite Endpoint Configuration: We integrated Appwrite by setting the API endpoint to https://cloud.appwrite.io/v1 using the setEndpoint method provided by the Appwrite JavaScript SDK. This ensured that our frontend client communicated with the correct Appwrite server.
2. Appwrite Project Configuration: We configured the Appwrite project ID in our application using the setProject method. This step ensured that all interactions with Appwrite were associated with our specific project.
3. Database Operations: With Appwrite's database module, we were able to store and manage our custom link data. We used the Databases class and its methods to list existing documents, create new documents, and perform queries.
4. Document Creation and Retrieval: When a user creates a custom short link, we utilized the createDocument method to add a new document to the Appwrite database. We stored the original URL and the associated slug in the document. Additionally, we used the listDocuments method and query capabilities to retrieve the URL associated with a specific slug during redirection.
5. Client-Side Redirection: To redirect users from the shortened link to the original URL, we used the location.href property. Appwrite facilitated the retrieval of the original URL based on the provided slug, allowing for a seamless redirection experience.

Appwrite simplified our backend operations, providing robust database management and authentication capabilities. It allowed us to focus on creating a smooth user experience for Chotu.

Challenges Faced

During the development process, we encountered a few challenges, such as handling duplicate slugs and ensuring the security and reliability of the shortened links. To overcome these challenges, we implemented the following solutions:

• For duplicate slugs, we utilized the query functionality provided by Appwrite to check if a slug already existed before creating a new short link. This ensured unique slugs for each URL and prevented conflicts.
• To ensure the security and reliability of the shortened links, we followed the best practices recommended by Appwrite for authentication and data encryption. Appwrite's built-in security features helped us maintain the integrity and confidentiality of user data.

Code Repository

The source code for Chotu can be found on our GitHub repository: Chotu GitHub Repository

Project Link

The project has been deployed on vercel with custom domain: chotu.vaib.live

Demo Recording

Please watch the demo of Chotu in action: Chotu Demo

We hope

you enjoy exploring Chotu and witnessing how Appwrite enables us to build powerful applications with ease. Thank you for considering our project for the Appwrite Hackathon!

#Appwrite #AppwriteHackathon

‍