DEV Community: Devika Harshey

Case Study - PyBot (AI Powered Python Learning Companion)

Devika Harshey — Thu, 17 Sep 2026 19:07:06 +0000

Overview

PyBot is an AI-powered learning companion that I built to help users learn Python, prepare for DSA interviews and improve their resumes through interactive AI-powered conversations.

PyBot started as a simple CLI-based chatbot for learning Python. As I continued working on it, it evolved into a web application with more features and different ways for users to interact with it.

The idea was to bring learning, interview preparation, resume analysis and progress tracking together in one platform instead of making users switch between different tools for each task. PyBot supports both text and voice interactions, allowing users to learn, practice and get feedback in a more interactive way.

My Role: UI/UX Design & Development

Tech Stack: Next.js, Flask, Appwrite, Google Gemini, Vapi

Live App: https://pybot-ecru.vercel.app/

Demo Video: https://www.youtube.com/watch?v=QFDiq8dHv9g

The Problem

While learning Python and preparing for interviews, there are different things a learner needs to work on. Learning concepts, practising DSA questions, preparing for interviews, improving a resume and keeping track of progress can all require different tools and ways of learning.

I wanted to bring these parts together in one place with the help of AI. Instead of limiting PyBot to a simple text-based chatbot, I wanted users to be able to interact with it through both text and voice, practice interviews, take quizzes, analyze their resumes and keep track of their progress.

The main challenge was to design an experience that could bring all these features together without making the platform feel complicated to use.

Existing Solutions & Comparison

Before designing PyBot, I looked at existing platforms that already solve different parts of the same problem.

Codecademy focuses on structured programming learning. Its Python courses include lessons, projects, quizzes and AI-assisted learning.

HackerRank focuses more on coding practice and technical interview preparation. It provides coding challenges and AI-powered mock interviews for areas such as algorithms and data structures.

Jobscan focuses on resume analysis. It compares a resume with a job description and provides information about missing keywords, formatting and other areas that can be improved.

Platform	Main Focus	What It Offers
Codecademy	Learning	Python learning, projects, quizzes and AI assistance
HackerRank	Coding & Interviews	Coding practice and AI-powered technical mock interviews
Jobscan	Resume Improvement	Resume scanning, keyword matching and ATS-related feedback
PyBot	Learning + Interview + Resume	Python learning through chat/voice, DSA interview practice, quizzes, resume analysis and progress tracking

Looking at these solutions helped me define what I wanted PyBot to do. Instead of designing it around only one of these areas, I wanted to combine Python learning, interview preparation, resume analysis and progress tracking in the same product.

This also meant that the main design challenge was not just creating individual screens. I had to think about how all these features would fit together and how a user would move between them without getting confused.

Designing The Experience

Once I had the main features planned, I started thinking about how users would actually navigate through PyBot.

The main parts I wanted to bring together were:

Learning Python through AI conversations
Practising DSA and technical interviews
Interacting through text or voice
Taking quizzes
Analysing resumes
Tracking progress through a personalized dashboard

I planned the page structure around these different activities so that each feature had its own place while still feeling like part of the same product.

The conversational experience was an important part of PyBot. Since users could interact through both text and voice, I designed the flow around starting a conversation, choosing the interaction mode and receiving AI-generated responses.

I also wanted the dashboard to give users a quick view of their activity and progress instead of making them go through different sections to understand how they were doing.

As more features were added, I kept updating the structure and UI. The project went through several iterations, including the addition of the personalized dashboard, quizzes, resume analyzer, verification flow and different UI fixes.

The goal throughout these changes was to make the different parts of PyBot easy to understand and use without making the interface unnecessarily complicated.

UI & Iterations

Once the main flow was decided, I started building and refining the interface. Since PyBot had multiple features, I wanted the UI to stay simple while still making each feature easy to find.

I started with the main chat interface and then added the voice interaction, personalized dashboard, quiz and progress section, and resume analyzer.

As I worked on the project, I made several UI changes based on how the different features were coming together. I also added smaller interactions such as confirmation modals, download options and verification-related flows.

One thing I focused on was keeping the text and voice experiences connected. Users could switch between the two modes without having to leave the main interaction area.

The dashboard was also updated to bring the user's DSA questions, resources and analysis into one place, while the quiz section made progress visible through the quiz results.

The interface went through multiple small fixes and iterations rather than being designed perfectly in one go. This helped me improve the screens as new features were added to PyBot.

From Design to Product

Once the UI structure was in place, I moved from designing the screens to connecting them with the actual functionality.

I built the frontend using Next.js and connected it with a Flask backend and Appwrite for authentication and data storage. Google Gemini handled the text-based AI interactions, while Vapi was used for the voice-based interview experience.

The main challenge here was making sure the different parts of the interface actually worked together. The chat needed to communicate with the AI, the voice interaction needed to handle the conversation, and features like quizzes, resume analysis and the dashboard needed to work with the user's data.

I worked on these features incrementally, adding and refining them as the project developed. This included authentication and email verification, the personalized dashboard, quiz and progress tracking, resume analysis, and the different chat interactions.

This was where the initial UI decisions had to work with the actual product functionality, rather than just looking good as individual screens.

Outcome & Learnings

Building PyBot helped me understand that designing a product with multiple AI-powered features is not just about making individual screens look good. The different parts of the product need to work together and still be easy to understand.

One of the biggest things I learned was how important it is to keep refining the UI as the product grows. Features like the dashboard, quiz, resume analyzer and voice interaction were added over time, so the interface also had to evolve with them.

I also learned more about designing around AI interactions. Text and voice interactions behave differently, so the interface needs to make it clear what the user can do and what kind of response they can expect.

Working on both the design and development side also helped me understand how design decisions translate into actual product functionality.

PyBot started as a simple CLI-based chatbot and gradually evolved into the product it is today. Seeing that progression helped me understand that a product can keep growing and improving through continuous iterations.

Overall, PyBot gave me the opportunity to work on the complete process i.e. from planning the user experience and designing the interface to building and connecting the different features into a working product.

Thanks for reading!😊🤍

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
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 is a creative, interactive showcase of my work as a developer, designer and writer. It brings together my projects, technical skills, certificates, achievements, published books, designs and a glimpse into my learning journey within a single platform.

I wanted to build something that felt more personal than a traditional portfolio, so I experimented with 3D elements, smooth animations, interactive components and a black, white and purple visual style to create an engaging browsing experience.

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

Project Details


Role	Designer & Developer
Type	Personal Portfolio
Timeline	1+ year
Frontend	Next.js, React, TypeScript
Styling	Tailwind CSS
Animation	GSAP, Framer Motion
3D	Three.js, React Three Fiber, Drei
Deployment	Vercel

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

The Goal

The goal of this project was to create a portfolio that showcases my work while also reflecting my personality through an engaging and intuitive user experience.

I wanted the portfolio to feel more personal and interactive than a traditional portfolio while still making it easy for visitors to explore my work, skills, achievements and other content.

Since the portfolio brings together different types of content, I also wanted the experience to feel visually consistent, responsive and easy to navigate across different devices.

Rather than treating the portfolio as a one-time project, I wanted to keep improving it over time by experimenting with new ideas, adding new features and refining the existing experience.

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

Design Direction

I wanted the visual style of the portfolio to feel bold, interactive and personal rather than following a traditional portfolio layout.

I built the visual identity around a black, white and purple color palette, using contrast to create a strong visual hierarchy across different sections.

The interface combines 3D elements, animations, glowing details, grid backgrounds and interactive components to make the experience more engaging while keeping the content easy to explore.

I also focused on keeping the visual style consistent across the different sections, while making sure the layouts remain responsive across screen sizes.

Visual Direction

Black — Main background and overall base of the interface
White — Headings, text and important content
Purple — Accents, text, highlights and interactive elements
3D Elements — Used to add depth and personality
Animations — Used throughout the interface to make interactions feel more dynamic
Responsive Layouts — Designed to work across different screen sizes

The goal was not to make every section look the same, but to make the different parts of the portfolio feel like they belong to the same experience.

Structuring The Experience

Since the portfolio brings together different types of content, I wanted to structure it in a way that made everything easy to find without making the experience feel complicated.

I divided the portfolio into different sections based on the type of content being showcased, including About, Experience, Tech Stack, Projects, Achievements, Certificates, Books, Blogs and Designs.

The homepage acts as the main entry point, while dedicated pages and sections allow visitors to explore specific areas in more detail.

I also kept the navigation and content structure simple so visitors can navigate between sections naturally without having to search through too much information.

Portfolio Architecture

Portfolio
│
├── Home
│   ├── Hero
│   ├── About
│   ├── Experience
│   ├── Projects
│   ├── Tech Stack
│   ├── Achievements
│   └── Books
│
├── Projects
├── Certificates
├── Books
├── Blogs
└── Designs

The structure evolved as I continued adding new content and features to the portfolio, so the portfolio architecture was refined alongside the development of the website.

Designing The Interactions

I wanted the portfolio to feel interactive rather than being just a collection of static sections.

I experimented with different interactions and custom components throughout the website, including a music player, draggable sticky notes, developer terminal, interactive tech stack, 3D book models and a book carousel.

I also added interactions to different sections to enhance the user experience while keeping the main content easy to access.

Interactive Elements

Music Player — Playable piano covers while browsing the portfolio.
Developer Terminal — An interactive terminal-style component.
Sticky Notes — Draggable notes that add a more playful element to the interface.
Tech Stack — An interactive visual representation of the technologies I use.
3D Books — 3D book models with an interactive carousel.
Projects, Blogs, Designs & Certificates — Dedicated pages with ways to explore the content more easily.

These interactions became an important part of the portfolio because they allowed me to experiment with different ways of presenting information while making the experience feel more personal.

From Idea To Experience

This portfolio started as a basic Next.js project and gradually evolved into a much larger interactive experience.

Instead of building everything at once, I continued adding new sections, features and improvements over time based on what I wanted the portfolio to showcase.

How It Evolved

Foundation

Started with the initial portfolio setup and gradually built the core sections and components.

Expansion

Added projects, certificates, books, achievements, blogs, designs and other content as the portfolio grew.

Refinement

Improved the UI, animations, layouts and content across different sections.

Optimization

Worked on image optimization, 3D model performance, mobile responsiveness and other performance-related improvements.

Continuous Improvements

Continued updating the portfolio with new content, UI changes, features and improvements as my work and skills evolved.

The portfolio is still an ongoing project, and I continue to refine it as I learn and build new things.

Challenges & Solutions

Building the portfolio over time came with several challenges, especially when combining 3D elements, animations and interactive components in the same experience.

Balancing 3D Models & Animations

One of the biggest challenges was using Three.js and GSAP together while making sure the 3D models and animations worked smoothly without affecting the browsing experience.

I had to experiment with the animations and interactions to make sure they worked well together.

Optimizing for Mobile

Making the portfolio work smoothly across different screen sizes required a lot of testing and improvements.

I optimized the 3D models, animations and layouts to make the experience more responsive and suitable for smaller screens.

Building Custom Components

Another challenge was creating several interactive components from scratch, including the music player, draggable sticky notes, developer terminal, interactive tech stack, 3D book models and book carousel.

Building these components gave me the opportunity to experiment with different interactions while also improving my frontend, UI and 3D development skills.

What I Learned

These challenges taught me that adding visual and interactive elements is only one part of the process. They also need to work smoothly together, remain responsive and still provide a good browsing experience.

Final Experience & Reflection

After continuously working on the portfolio, it has become more than just a place to showcase my work. It has become a space where I can experiment with frontend development, UI design, 3D graphics, animations and interactive experiences.

Working on this project for over a year has taught me that creating a good user experience is an ongoing process. As I continue learning and building new things, I also continue finding new ways to improve and expand the portfolio.

It has given me the opportunity to experiment with new ideas, build custom components and improve my skills across different areas of development and design.

The portfolio is still evolving, and I plan to keep refining it as my work, skills and ideas continue to grow.

Thanks for reading!😊🤍

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.