DEV Community: Devika Harshey

Case Study - Appwrite AI Duplicates Detector (AADD)

Devika Harshey — Wed, 16 Sep 2026 09:30:37 +0000

Introduction

Managing data across Appwrite projects can become difficult when duplicate files and documents take up storage and make data harder to manage.

This is why I built Appwrite AI Duplicates Detector (AADD), a full-stack web application that detects, visualizes and manages duplicates across Appwrite databases and storage using AI-powered algorithms and perceptual hashing.

The goal was to make the entire process simple, from connecting an Appwrite project and scanning data to understanding results and managing duplicates through filtering, sorting and bulk actions.

I also introduced AI Garden, a gamified data-health system that lets users track their cleaning progress through a dynamic garden and interact with an AI Gardener.

My Role: UI/UX Design, Frontend Development, Backend Development

Tech Stack: Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion, Flask, Appwrite, Google Gemini API

Live App: https://appwrite-ai-duplicates-detector-aadd.appwrite.network/

The Problem

Managing duplicates manually across Appwrite projects can be time-consuming, especially when data is spread across multiple databases and storage buckets.

Different types of files also require different ways of identifying duplicates. Simply checking file names or exact matches is not enough to detect files that may have been renamed, compressed or slightly modified.

AADD was built to simplify this process by bringing duplicate detection, result visualization and duplicate management into one place.

Existing Solutions & Gap

Before building AADD, I looked at the problem from two sides.

Appwrite provides the tools to manage databases, collections, documents and storage, including querying, indexing and file management. However, duplicate detection itself is not presented as a dedicated workflow within these core features.

There are also dedicated duplicate-file tools such as dupeGuru, Duplicate Cleaner, AllDup and Czkawka. These focus mainly on finding duplicate files across local storage using methods such as hashing, content comparison and similar-image detection.

The gap I wanted to explore was bringing this idea specifically to Appwrite projects.

AADD combines duplicate detection for both Appwrite Storage and Databases with similarity-based analysis, visual results, filtering, bulk management and direct cleanup of detected duplicates.

This became the foundation for the product I designed and built.

My Approach

Before starting the development, I planned the user flows and page architecture to understand how the different parts of AADD would fit together.

The main focus was to keep the duplicate detection process simple for the user, while still providing enough information to understand and manage the results.

I structured the experience around three main stages:

Connect: Connect an Appwrite project and choose what needs to be scanned.

Detect: Run the scan and present the detected duplicates with relevant information such as similarity scores and visualizations.

Manage: Review, filter and sort the results, then select and manage duplicates through bulk actions.

Alongside this core workflow, I also designed supporting experiences such as scheduled scans, activity tracking, profile management and the AI Garden.

Information Architecture

AADD is structured around managing connected Appwrite projects, scanning their databases and storage buckets, viewing duplicate results and managing detected duplicates.

The main sections of the application include:

Dashboard

Connected Projects
Quick Stats
Automated Scan Reminders
Recent Activities

Project Overview

Storage
Database
Collections
Scan

Scan Results

Detected Duplicates
Similarity Scores
Search
Filtering
Sorting
Circle Packing Visualizations
View in Console / Open in Appwrite
Bulk Operations

AI Garden

Data Health Visualization
Cleaning Statistics
AI Gardener

Profile Management

Update Name and Email
Profile Picture
Delete Account

Activity Log

Project Connections
Scan Operations
Deletion Activities
Configuration Changes

This structure brings project management, duplicate detection, visualization and cleanup into a single application.

Connecting an Appwrite Project

To start using AADD, users first need to connect the Appwrite project they want to scan.

The Connect Project page requires three details:

Project ID
API Endpoint
API Key

Once connected, the project becomes available on the dashboard, where users can view their connected projects and initiate scans.

For security, the API keys provided by users are encrypted using Fernet symmetric encryption before being stored in the AADD Appwrite Database.

Scanning & Selecting Data

After connecting an Appwrite project, users can choose what they want AADD to scan.

For Storage, users can scan all available buckets.

For Database, users can enter a Database ID, load its collections, and choose whether to scan specific collections or the entire database.

Once the scan target is selected, clicking the Scan button automatically triggers the scan and takes the user to the results page.

A loading state is displayed while the scan is in progress, giving users feedback while the system processes their data.

Viewing & Understanding Results

Once the scan is complete, AADD displays the detected duplicates along with their similarity scores.

The results page also provides different ways to explore the detected duplicates. Users can search for specific results, filter and sort them based on similarity, date or file size and view the duplicate distribution through different visualizations.

Each result also provides options to view the corresponding file or document in the Appwrite Console.

Managing Duplicates

After reviewing the scan results, users can select individual duplicates or use Select All and Deselect All for bulk operations.

The Delete Selected option provides two ways to manage the selected duplicates:

Delete from source: Removes the actual files or documents from the connected Appwrite project.
Remove from list: Removes the duplicates only from AADD's tracking without deleting them from the source project.

Users can then confirm the selected action before it is carried out.

AI Garden & Gamification

To make the data-cleaning experience more engaging, AADD includes the AI Garden, a gamified data-health system.

The page provides a visual representation of data health through dynamic plant visualizations and tracks cleaning progress through statistics.

It also includes an AI Gardener, powered by Google Gemini, which provides tips and encouragement based on the user's progress.

From Design to Development

After planning the user flows and page architecture, I moved into development and translated the planned experience into the actual product.

The frontend was built using Next.js, React, TypeScript, Tailwind CSS and shadcn/ui, with Framer Motion used for animations and interactions.

The backend was developed using Flask, handling API requests, Appwrite operations and the duplicate detection logic.

The final system connects the frontend, backend, Appwrite services and AI/ML processing into one workflow, allowing users to connect their projects, scan data, view results and manage duplicates from a single application.

Outcome & Learnings

AADD brought duplicate detection, visualization and management into a single application for Appwrite projects.

The system achieved 85-95% similarity accuracy and reduced the manual effort required to review duplicates by approximately 70%.

The project was also selected as a Top 5 Winner in Appwrite X Hacktoberfest 2025.

Building AADD helped me understand how important it is to plan the user flows and page structure before development, especially when a product has multiple features and workflows.

It also gave me hands-on experience in taking an idea from rough sketches to a working full-stack product while continuously refining the interface and functionality during development.

Thanks for reading!😊🤍

Building My Portfolio: Development Journey, Challenges & Lessons Learned

Devika Harshey — Sat, 25 Jul 2026 16:20:56 +0000

Overview

This portfolio showcases my work as a developer, designer and writer via an interactive & visually engaging experience. It brings together my projects, technical skills, certificates, achievements, published books and a glimpse into my learning journey within a unified platform.

Built around a black, white and purple color palette, it combines 3D elements, smooth animations, and responsive layouts to create an engaging browsing experience.

I've been working on this portfolio for the past year and since the beginning, I've continued refining the portfolio through UI improvements, performance optimizations, new features and regular content updates.

Demo Video - https://youtu.be/0SHrim7H4hI

Tech Stack

Category	Technologies
Frontend	Next.js, React, TypeScript
Styling	Tailwind CSS
Animation	GSAP, Framer Motion
3D	Three.js, React Three Fiber, Drei
Deployment	Vercel
Version Control	Git, GitHub

Goal

The goal of this project was to create a portfolio that showcases my work while reflecting my personality through an engaging and intuitive user experience. I wanted the interface to feel visually consistent while remaining responsive, optimized and easy to navigate, allowing visitors to explore my projects, writings & achievements naturally.

Design & Development Journey

Foundation

Established the portfolio's structure, visual identity and core sections, creating a solid foundation for future development.

Expansion

Added new sections for projects, blogs, books, achievements, certificates and other content to showcase different aspects of my work.

Refinement

Improved layouts, animations, typography and overall consistency to create a smoother and more cohesive user experience.

Optimization

Focused on performance and responsiveness by optimizing assets, refining interactions and ensuring a smooth experience across different devices.

Continuous Improvements

The portfolio continues to evolve through new features, content updates, UI refinements and ongoing technical improvements.

Key Challenges

Balancing 3D Models and Animations

One of the biggest challenges was using both Three.js & GSAP on a single-page website. I had to make sure that both the animations and 3D models work smoothly and in coordination. They should look good without affecting the browsing experience.

Optimizing for Mobile (Smaller Screens)

Making the portfolio work well on mobile (smaller screens) took a lot of testing and improvements. I optimized the 3D models, animations and layouts to make sure the website stayed smooth and responsive on different screen sizes.

Building Custom Components

Instead of using pre-built components, I built several custom components from scratch, including the music player, draggable sticky notes, developer terminal, tech icon globe & 3D book models + carousel (most difficult out of all). Building these components helped give the portfolio its own unique feel & my personal touch.

Reflection

This portfolio has been one of my biggest learning experiences. It taught me that creating a good user experience is an ongoing process. It gave me the opportunity to experiment with new ideas, build custom components and improve my skills in frontend development, UI design, 3D graphics and performance optimization. As I continue learning, I'll continue refining and expanding the portfolio✌🏻😊🤍

Next.js: Beginning Of A New Adventure

Devika Harshey — Fri, 31 Jan 2025 20:02:15 +0000

After trying my hands in the basic yet the foundational and most important tech heroes i.e. HTML, CSS and JavaScript, for more than an year, here's to the beginning of my journey of learning the well-known full-stack framework - Next.js🎉.

Let's have a look in what Next.js actually is.

What is Next.js?

Next.js is a framework built on top of popular JavaScript library, React. It helped in addressing the major issues such as inefficient SEO, complexity in managing the component and it's state and processing overhead.

Besides, it also introduced the efficient rendering strategies like Server-Side Rendering (SSR) & Static Site Generation (SSG) which added to the ease in development of SEO friendly and high-performance web applications.

Advantages of Next.js

Being a trending and widely used framework, Next.js has many advantages such as:

1) Seamless file-based routing
2) Efficient code splitting
3) Image & font optimization
4) HMR (Hot Module Replacement)
5) API Routes (backend)
6) Built-in support for Sass (Syntactically Awesome Style Sheets)
7) Data fetching choice
8) Error handling
9) Metadata API (For SEO)

and the list goes on.

Why is Next.js so popular and why most of the developers prefer it over React?

As I already mentioned, Next.js is a React-based framework which not only extended it's capabilities but also reduced the dependencies on number of isolated tools like the ones for server-side handling, databases, routing, etc. And now we've a one-stop solution for the development of full-stack (i.e. both frontend and backend) applications, our very own Next.js.

One of the most interesting feature of Next.js, that I recently learned, is file-based routing i.e. we can define the paths of different pages in our application based on the file & folder structure within our code. It includes concepts like dynamic routing, nested routing, routing groups and many more.

Though React also had it's own routing library called React Router and the React Server Components for server-side handling, Next.js provided everything within a single framework without having the need to rely on external tools and provided us with the choice of deciding which components to render on client-side and which one on the server-side.

Although Next.js facilitates us with comparatively easier way of developing web applications and is mostly seen at the first place, it's not like it has completely replaced React. And it totally depends on one's need and the requirements of the applications or website they're building, which one to choose Next.js or React, as they both have their own benefits.