DEV Community: Karam Mannai

EchoVault AI: The Ghost in Your Machine That Remembers for You

Karam Mannai — Thu, 29 Oct 2026 19:41:32 +0000

EchoVault AI: An Open-Source Digital Memory That Never Forgets

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine

What I Built

EchoVault AI: Give Your Digital Memories a Voice

EchoVault AI is an open-source AI memory assistant that lets users revisit their own notes, journal entries, and personal documents through natural conversations.

The inspiration comes from a strange idea: what if the things we write could answer us years later?

Instead of searching through hundreds of old files, users can ask questions about their saved memories, discover forgotten details, and revisit past experiences through an AI that retrieves information from their own archive.

The AI doesn't create memories out of nowhere. It searches the user's stored material and generates answers grounded in those sources, making it clear when information is missing or uncertain.

The result is a personal archive that feels a little like talking to a ghost in your own machine: familiar words, forgotten moments, and fragments of the past brought back to the present.

Demo

A working demo will be added once the application is implemented and deployed.

Code

The public GitHub repository will be linked here when the initial implementation is ready.

How I Built It

EchoVault AI is designed around open-source AI components and user-controlled data.

Frontend: React and TypeScript for a conversational interface.
Backend: Python and FastAPI for document ingestion and retrieval.
AI model: An open-weight language model for generating answers from retrieved memories.
Semantic search: An embedding model and vector database to find relevant passages from stored documents.
Retrieval-augmented generation (RAG): Answers are generated using retrieved source material rather than relying entirely on the model's pretrained knowledge.
Privacy: The architecture is designed to support local storage and local inference where practical.

The main challenge is making the assistant feel natural without allowing it to invent details about someone's past. Source references, retrieval quality, and clear uncertainty handling are central to the design.

Why Does Open Innovation Matter?

Personal memories are deeply private. Building a tool around them should not require sending every journal entry or personal document to a proprietary AI service.

Open-weight models and open-source infrastructure provide more control over where data is processed, how the system behaves, and which models are used.

They also make experimentation possible. Developers can improve retrieval, test different embedding models, add support for new document formats, and adapt the project without depending on a single vendor.

Open innovation makes the idea of a private, customizable digital memory more accessible to people who want control over both their data and their tools.

My Agent Session

A development session will be linked here once a real agent session has been recorded.

The Spirit of It

There is something unsettling about finding a forgotten note you wrote years ago and realizing that the person who wrote it feels almost like a stranger.

EchoVault AI explores that feeling without pretending that a machine can bring someone back or perfectly preserve a human life.

It gives forgotten words a way to be heard again. The memories remain yours; the AI simply helps you find them.

Sometimes, the ghost in the machine is just a part of yourself you haven't visited in a while.

Prize Categories

Open-source AI and personal knowledge management, subject to the challenge's official eligibility criteria.

SlowSync AI: Automate the Boring Stuff, Keep the Easy Life

Karam Mannai — Tue, 20 Oct 2026 17:45:51 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady

What I Built

SlowSync AI: Your Open-Source Personal Automation Assistant

SlowSync AI is an open-source AI assistant that turns repetitive daily tasks into simple automated workflows.

The idea is straightforward: instead of repeatedly doing the same small tasks, users describe what they want once, and SlowSync helps organize the work into a repeatable process.

For example, a user can give it a folder of documents and ask it to:

Rename files using a consistent naming scheme
Organize documents into folders
Extract important information
Summarize long documents
Create structured notes
Convert unorganized information into CSV or JSON
Generate a short daily or weekly summary

The project is aimed at developers, freelancers, students, and small teams who spend too much time doing repetitive computer work.

The goal isn't to replace people. It's to remove the boring five-minute tasks that somehow consume an entire afternoon.

Demo

A working demo will be added with the initial release.

The demo will show a user providing a folder of unorganized documents and SlowSync automatically processing, categorizing, and summarizing them.

Code

The project will be released as an open-source GitHub repository with installation instructions, configuration examples, and documentation for running the AI locally.

How I Built It

SlowSync AI is built around an open-weight language model rather than relying entirely on a proprietary AI API.

The architecture consists of:

Frontend: A lightweight web interface for creating and monitoring automation tasks.
Backend: Python-based task processing and workflow execution.
AI: An open-weight language model used for classification, extraction, summarization, and task planning.
File processing: Local document processing for common formats such as TXT, Markdown, CSV, and PDF.
Structured output: JSON schemas to make AI-generated results predictable and easier to validate.
Local inference: Support for running the model locally where hardware allows it.

One of the main design goals is to keep the system predictable. AI decides what should happen, but deterministic code performs the actual file operations and validates the results.

Why Does Open Innovation Matter?

Automation tools often become expensive once users start processing large amounts of data.

Using open-source AI makes it possible to experiment with different models, run inference locally, and build workflows without being locked into a single commercial API.

It also makes the system easier for developers to customize.

A developer can replace the model, add a new document processor, create a custom workflow, or adapt the system for a specific industry without waiting for a closed platform to support the feature.

For a project focused on automation, that flexibility is important. The tool should adapt to the user's workflow, not force the user to adapt to the tool.

My Agent Session

An agent session will be shared once the development workflow has been completed and a session recording is available.

The Lazy Payoff

The main payoff is eliminating repetitive work.

A task that normally takes 10–15 minutes manually can become a single automated workflow.

Even saving a few minutes per task adds up quickly when the same work is repeated dozens of times every week.

The real test is simple:

If the software works correctly, the user should have less work to do.

That is a surprisingly ambitious feature in the software industry.

Prize Categories

Open-source AI, developer productivity, and practical AI automation, subject to the challenge's official eligibility criteria.

InvoicePilot AI: An Open-Source AI Expense Assistant for Freelancers

Karam Mannai — Wed, 14 Oct 2026 20:00:50 +0000

InvoicePilot AI: Turn Messy Receipts Into Organized Expenses

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

InvoicePilot AI is an AI-powered expense organizer designed for freelancers, independent developers, and small businesses that are tired of manually entering receipt details into spreadsheets.

The idea is simple: upload a receipt or invoice, extract the important information, and turn it into structured expense data that can be reviewed and exported.

Instead of spending hours organizing paperwork at the end of the month, users can process documents as they receive them.

The target customers are freelancers and small business owners who want a simpler way to track expenses without paying for a full accounting platform.

Business model: A free tier for occasional use, with a paid plan for users who need bulk processing, exports, and larger document limits.

Demo

A live demo will be added after the MVP is implemented and deployed.

Code

The public GitHub repository will be linked here once the initial implementation is ready.

How I Built It

The planned stack focuses on open-source tools and keeping operating costs manageable.

Frontend: React and TypeScript for a responsive document-upload interface.
Backend: Node.js and Express for document processing and API endpoints.
AI: An open-weight language model for extracting and structuring invoice information.
Data validation: Schema validation to ensure extracted totals, dates, currencies, and merchant names follow a predictable format.
Export: CSV output so users can move their expenses into spreadsheets or existing bookkeeping workflows.

The key technical challenge is reliability. AI-generated data cannot simply be trusted because it looks convincing. The application needs validation, clear handling of missing fields, and a review step before users rely on extracted information.

Why Does Open Innovation Matter?

Small businesses should not need expensive AI infrastructure just to organize their receipts.

Open-weight models give developers the freedom to compare alternatives, experiment with local inference, and choose a deployment strategy that fits their budget and privacy requirements.

Open-source components also make the project easier to extend. Contributors could add support for different invoice formats, improve multilingual extraction, or build integrations with accounting tools.

The goal is to make practical document automation accessible to people who cannot justify the cost of enterprise software.

My Agent Session

A development session will be linked here once a real agent session has been recorded.

Prize Categories

Open-source AI and practical business productivity, subject to the challenge's official eligibility criteria.

TouchGrass AI: An Open-Source AI That Gets You Outside

Karam Mannai — Sun, 11 Oct 2026 11:33:51 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

What I Built

TouchGrass AI: An Open-Source Outdoor Activity Planner

TouchGrass AI is an AI-powered outdoor activity planner designed to help people spend less time scrolling and more time exploring the world around them.

Instead of recommending another app to spend hours on, the goal is to use AI to help people find simple, achievable activities outside their homes based on their available time, interests, energy level, and budget.

The idea is simple: tell the app how much free time you have and what you feel like doing, and it generates practical suggestions such as going for a walk, exploring a new neighborhood, visiting a nearby park, or trying a photography challenge.

The project is designed around accessibility, privacy, and real-world action rather than maximizing screen time.

The goal isn't to build another addictive app. It's to build an app that gives you a reason to close it.

Demo

A working demo will be added once the application is implemented and deployed.

Code

The source code and setup instructions will be published in a public GitHub repository once the initial implementation is ready.

How I Built It

The project is planned around an open-source AI model, with the model responsible for turning a user's preferences into structured outdoor activity suggestions.

The proposed architecture includes:

AI: An open-weight language model for generating personalized activity ideas.
Backend: A lightweight API to manage prompts and validate generated suggestions.
Frontend: A simple, mobile-friendly interface focused on getting users to take action.
Privacy: Minimal collection of user data, with the option to support local inference depending on the chosen model and deployment environment.

The main technical challenge is making the suggestions useful, affordable, and actionable instead of returning generic advice such as “go outside and enjoy nature.”

Why Does Open Innovation Matter?

An open-source AI project makes it possible to experiment with different models, inspect their limitations, customize their behavior, and potentially run inference locally.

This matters because a project focused on everyday habits shouldn't need an expensive proprietary API or require users to hand over unnecessary personal information.

Open innovation also makes the project easier for contributors to improve. Developers can experiment with alternative models, add localization, improve activity recommendations, and adapt the experience to different communities.

The long-term goal is to make useful AI accessible without turning every interaction into a dependency on a closed platform.

My Agent Session

An agent session will be shared once the development workflow has been completed and a session recording is available.

Prize Categories

Open-source AI and real-world utility, subject to the challenge's official eligibility criteria.

Reverse Proxy, API Gateway, and Load Balancer: Essential Tools for Modern Web Applications

Karam Mannai — Sun, 16 Jul 2023 13:19:47 +0000

Introduction

In the fast-paced world of modern web applications, managing the constant buzz of traffic and communication can be quite challenging. Thankfully, there are three powerful tools at our disposal: Reverse Proxy, API Gateway, and Load Balancer. Each of these superheroes plays a unique role in ensuring the security, efficiency, and reliability of our digital kingdom. In this blog, we will delve into the characteristics and applications of these tools to help you understand how they contribute to the smooth functioning of your web ecosystem.

Reverse Proxy: Changing Identity for Enhanced Security Imagine having a discreet agent that fetches data secretly and keeps your servers hidden from prying eyes. That’s precisely the role of a Reverse Proxy. This superhero sits between the client and the web servers, acting as an intermediary that forwards client requests to the appropriate backend servers. However, it does so without revealing the identity or location of the actual servers, effectively shielding them from potential cyber-attacks and malicious threats.

Key Features:

Increased Security: By hiding the real servers, a reverse proxy protects against direct attacks, providing an added layer of security for sensitive websites.
Load Distribution: It can evenly distribute incoming requests among multiple backend servers, preventing any single server from being overwhelmed.
Caching: Reverse proxies can cache frequently requested content, reducing response time and server load.

When to Use a Reverse Proxy:

To protect sensitive applications or websites from direct access and potential attacks.
When you need to balance loads across multiple backend servers.
To enhance performance by caching frequently accessed content.

2. API Gateway: The Postman for Web Services

Managing numerous intercommunicating services within a bustling web application can quickly become chaotic. This is where the API Gateway swoops in to save the day. Just like a Postman, an API Gateway acts as a central entry point for all API requests. It routes incoming requests to the appropriate microservices while also providing essential functionalities like request/response transformation, protocol translation, and authentication.

Key Features:

Centralized Management: API Gateway offers a centralized location to manage and organize various APIs, making it easier to monitor and control access.
Microservices Orchestration: It ensures that client requests are directed to the relevant microservices responsible for handling those requests.
Security and Authentication: API Gateway can handle authentication and authorization, adding an extra layer of security to your APIs.

When to Use an API Gateway:

When you have a complex web application with multiple microservices that need to communicate.
To streamline API management, versioning, and security.
For handling authentication and access control for APIs.

3. Load Balancer: The Traffic Cop for Even Distribution

Popular websites often face the challenge of heavy traffic and high demand, which can lead to server overloading and bottlenecks. The Load Balancer superhero comes to the rescue by evenly distributing incoming traffic across multiple servers. This even distribution ensures that no single server is overwhelmed, leading to improved performance and availability.

Key Features:

Traffic Distribution: Load Balancers use various algorithms to evenly distribute incoming requests across backend servers, optimizing resource utilization.
Scalability: Adding or removing servers becomes seamless with a Load Balancer, allowing you to scale your application as needed.
High Availability: If a server fails, the Load Balancer reroutes traffic to healthy servers, minimizing downtime.

When to Use a Load Balancer:

For high-traffic websites or applications that require seamless scalability.
To ensure fault tolerance and high availability of services.
When you want to distribute the load across multiple servers for better performance.

Conclusion

In the ever-evolving landscape of modern web applications, having the right tools at your disposal is crucial. Reverse Proxy, API Gateway, and Load Balancer are three superheroes that contribute significantly to the security, efficiency, and reliability of your digital kingdom.

Choose a Reverse Proxy to safeguard sensitive information and protect against cyber-attacks. opt for an API Gateway to manage the complexity of intercommunicating services and ensure smooth interactions. And embrace a Load Balancer to maintain high availability and even traffic distribution.

While each tool brings its unique strengths to the table, combining all three creates a formidable team that fortifies your web infrastructure, making it safe, efficient, and resilient in the face of any challenge. So, equip your digital beehive with these powerful superheroes and watch your web application thrive!

The Importance of Various Screens in Mobile App Design

Karam Mannai — Mon, 24 Apr 2023 03:35:24 +0000

Mobile app design is an essential aspect of creating a successful mobile application. When it comes to designing a mobile app, there are several screens that you need to consider to create a user-friendly and engaging experience. In this article, we’ll discuss the importance of various screens in mobile app design.

Splash Screens:

Splash screens are the first screen that appears when a user launches your app. It provides an opportunity to create a positive first impression of your app. A well-designed splash screen can help set the tone for the user’s experience with the app. Additionally, it can also be used to convey important information about the app, such as the app’s logo, tagline, and loading status. A splash screen can help make the user feel more engaged with your app, even before it fully loads.

Error Screens:

Error screens are another important aspect of mobile app design. They appear when something goes wrong in the app, such as a network error or a server timeout. Error screens should always provide clear and concise information about the error that has occurred. This will help the user to understand what went wrong and how to fix it. Good error screens can also prevent users from becoming frustrated or abandoning the app altogether.

Empty Screens / Placeholders:

Empty screens or placeholders are used when there is no content available to display. They are often used in lists or feeds, such as social media feeds or news apps. When there is no content available, an empty screen or placeholder can help set the user’s expectations and let them know that more content will be available soon. A well-designed empty screen can also provide helpful tips or suggestions for the user to explore the app further.

Onboarding / Placeholders:

Onboarding screens are used to introduce the user to the main features of the app. They are essential to help users understand how to use the app, its functionality, and its key features. Onboarding screens can help prevent confusion and frustration by providing a clear understanding of the app’s functionality. A well-designed onboarding screen can help users quickly understand the app’s features and how to use them.

App Store/ Play Store/App Gallery Images:

When submitting your app to the app store, it’s essential to showcase your app’s features through high-quality images. This is because potential users often rely on the app’s images to determine whether or not they want to download it. Therefore, it’s essential to select the best UI screens that accurately reflect your app’s functionality and features. By doing this, you’ll be able to grab the user’s attention and convince them to download your app.

In conclusion, mobile app design is crucial to creating a user-friendly and engaging experience. The screens we discussed above are essential in designing an app that meets user expectations and helps them navigate your app with ease. A well-designed app can help improve user engagement and drive user retention, ultimately leading to the success of your mobile app.

Why React inside a Framework ?

Karam Mannai — Sat, 18 Mar 2023 22:38:24 +0000

Recently, while reading the React documentation, I noticed something interesting in relation to the React app which I’ve been using for my project development…

For the once who don’t know, React is a popular JavaScript library used for building user interfaces. In the new React documentation, developers are advised to use React in popular frameworks like Next.js, Remix, and Gatsby instead of using React alone. The documentation provides several reasons for this, including the fact that even if your application doesn’t initially require routing or data fetching, you’ll need to add some libraries to handle those things.

As a result, adding these libraries will increase the size of your JavaScript (JS) bundle, and adding any feature will also increase the size of your project. This will slow down your application, which is a common problem with other frameworks like Vue or Svelte. In contrast, the current React frameworks solve all these problems without any additional libraries.

Next.js is currently the recommended framework due to its support for all the new React features in the experimental stage. It also provides built-in support for server-side rendering (SSR) and static site generation (SSG), making it easier to create fast-loading, SEO-friendly web pages. Additionally, Next.js supports automatic code splitting, which reduces the size of the JS bundle and speeds up page loading times.

Remix is another popular framework for React developers. It provides a set of conventions and tools that help you build scalable, production-ready web applications. Remix also supports SSR and SSG, and it’s designed to work well with popular serverless platforms like Netlify and Vercel.

Gatsby is a static site generator that uses React as its view layer. It’s designed to help you build fast, static websites that can be deployed to any hosting platform. Gatsby supports SSR and SSG, and it provides a wide range of plugins and themes that can help you add new features and functionality to your site.

React and Bundlers: Vite and Parcel

If you still want to use React alone, the documentation recommends using Vite or Parcel. Vite is a modern build tool that provides fast, lightning-fast build speeds and a modern development experience. It’s designed to be easy to use, and it provides hot module replacement (HMR) out of the box, which makes it easier to develop and test your React applications.

Parcel is another bundler that’s designed to be fast and easy to use. It provides a zero-configuration experience, which means that you don’t have to spend time setting up your development environment. Parcel supports a wide range of file types and provides built-in support for features like code splitting and HMR.

React Native and Expo

In React Native, the documentation recommends using Expo. Expo is a set of tools and services that help you build, deploy, and iterate on your React Native applications. It provides a range of features and APIs that help you build high-quality, performant applications without having to worry about the underlying platform details.

Expo also provides a set of pre-built components and UI kits that help you quickly create common UI elements like buttons, text inputs, and navigation bars. Additionally, Expo provides a range of development and testing tools that make it easier to develop and test your applications.

Conclusion

In summary, the React documentation advises developers to use popular frameworks like Next.js, Remix, and Gatsby instead of using React alone. These frameworks provide built-in support for features like SSR and SSG, which help you create fast-loading, SEO-friendly web pages. Additionally, they support automatic code splitting, which reduces the size of the JS bundle and speeds up page loading times.

If you still want to use React alone, the documentation recommends using Vite or Parcel. In React Native, the documentation recommends using Expo, which provides a range of tools and services that help you build, deploy, and iterate on your applications.

Finally, this does not mean that React cannot be used in internal projects and improved upon. The documentation emphasizes that developers should choose the framework that best fits their project’s requirements and constraints. React can still be used on its own, but it’s important to be aware of the potential drawbacks and to choose the appropriate bundler and additional libraries for your project.

Overall, the new React documentation provides valuable guidance for developers who want to build scalable, performant applications with React. By recommending popular frameworks like Next.js, Remix, and Gatsby, the documentation highlights the benefits of using pre-built solutions that already address common issues like routing, data fetching, and code splitting. Additionally, the documentation emphasizes the importance of choosing the right bundler and libraries for your project, and it provides recommendations for Vite and Parcel as well.

Ultimately, the goal of the React documentation is to help developers build high-quality applications that provide a great user experience. By providing clear, concise guidance on the best tools and practices for building with React, the documentation makes it easier for developers to focus on their core application logic and create great products.

Sources:

React: react.dev/learn/start-a-new-react-project