DEV Community: Karam Mannai

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