DEV Community: Mayank Mohapatra

Integrate DAYTONA and let the magic begin....

Mayank Mohapatra — Mon, 09 Dec 2024 08:57:39 +0000

Daytona: Simplifying Development for Amazon Sambhav

Daytona is a secure and open-source development environment manager that simplifies your workflow. Imagine starting development on a Next.js app without the usual setup hassle. On average, developers lose 56% of their time setting up environments. Tools like Daytona eliminate that wasted time, allowing you to focus directly on innovation and building impactful solutions.

Live Demo

GitHub Repository

Why Use Daytona?

Daytona simplifies the development process by seamlessly integrating with:

Any Git platform: GitHub, GitLab, Bitbucket
Any IDE: Vim, VS Code, JetBrains IDEs
Anywhere: Localhost, AWS, Azure, GCP, Digital Ocean

The biggest advantage?

A fully functional, pre-configured environment ready in seconds.

Just run:

daytona create https://github.com/Mayank77maruti/amazon_asambhav.git

That's it! Your environment is set up, so you can focus on building features, resolving issues, and creating impact.

Using Daytona for Amazon Sambhav
1️⃣ Install Daytona
Follow the official installation guide.

2️⃣ Configure Daytona
Step 1: Connect Daytona to Your Git Repositories
To manage your project with version control, connect Daytona to your Git provider:

daytona git-providers add

Step 2: Install a Cloud Provider
Set up your cloud environment (AWS for Sambhav) with this command:

daytona provider install

Step 3: Set a Target
Choose where your development environment will run (Docker for local development or AWS for cloud-based solutions):

daytona target set

Step 4: Choose Your IDE
Set up your favorite IDE (e.g., VS Code) for a seamless coding experience:

daytona ide

3️⃣ Add devcontainer.json to the Repository
Daytona uses devcontainer.json to define your environment.

Here’s an example you can use for Amazon Sambhav:

json

{
  "name": "Amazon Asambhav App Dev Container",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
  "features": {
    "docker-in-docker": {}
  },
  "forwardPorts": [3000],
  "customizations": {
    "vscode": {
      "settings": {
        "terminal.integrated.defaultProfile.linux": "bash",
        "files.autoSave": "onWindowChange",
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "extensions": [
        "ms-azuretools.vscode-docker",
        "ms-vscode-remote.remote-containers",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "dsznajder.es7-react-js-snippets",
        "formulahendry.auto-rename-tag",
        "bradlc.vscode-tailwindcss",
        "christian-kohler.path-intellisense",
        "ms-vscode.vscode-typescript-next",
        "amazonwebservices.aws-toolkit-vscode"
      ]
    }
  },
  "postCreateCommand": "docker build -t amazon-asambhav-app . && docker run -p 3000:3000 amazon-asambhav-app"
}

4️⃣ Create Your Workspace and Project
Run this command to set up your Amazon Sambhav project:

daytona create https://github.com/Mayank77maruti/amazon_asambhav.git

5️⃣ Start Development
Launch your application with:

npm run dev

Highlights
Pre-configured environment: Optimized for JavaScript/Node.js development using Microsoft’s devcontainer image.
Post-setup automation: Automatically installs dependencies with npm install.
VS Code productivity: Pre-installed extensions and settings boost productivity.
Cloud-ready: Easily integrates with AWS, enabling scalable deployment.

🚀 How I Built "News Pulse" with CopilotKit 🚀

Mayank Mohapatra — Thu, 31 Oct 2024 13:26:28 +0000

Hey, fellow devs! 👋 This Hacktoberfest, I dove into the world of news aggregation and built News Pulse, an app that leverages AI to bring you topic-based news summaries in real time. Powered by CopilotKit, this project simplifies tracking key news topics or happenings from around the globe, helping users stay updated efficiently. Let's explore how I put this together and the tech stack that powers it!

🛠️ Project Overview
News Pulse is a news aggregator designed to help users quickly get up to speed on specific topics. Whether you’re interested in “AI advancements” or “Climate Change updates,” News Pulse can deliver summaries tailored to your keywords. Built with React, Node.js, and CopilotKit, this app uses a large language model to generate concise summaries and display relevant news in an aesthetically pleasing UI.

🔧 Tech Stack and Tools
Frameworks:

React.js – Frontend framework for an interactive and responsive user experience
Node.js – Backend server to handle API requests and manage data flow
Styling:

Shadcn-UI – For consistent and elegant component styling across the UI
Custom v0 styling – Personalized tweaks for a unique look
Developer Tools:

CopilotKit – AI-powered ecosystem for generating insights and summaries, as well as user assistance
groq-sdk – Used to structure and retrieve real-time data dynamically
🌟 Building the App with CopilotKit
CopilotKit has been integral to creating the user experience for News Pulse. Here’s how I leveraged its capabilities:

Smart Content Summarization: The real magic behind News Pulse lies in its AI-generated summaries. CopilotKit’s ecosystem allowed me to create readable, concise content summaries based on user-provided topics or articles. Each time users input a keyword, CopilotKit generates relevant summaries, ensuring information is always up-to-date.

User Guidance: For those unfamiliar with using news aggregators or looking for assistance in topic selection, CopilotKit’s CopilotPopup feature provides helpful tips and recommendations. It’s a fantastic tool for making the app accessible and user-friendly.

Data Handling and Display: Using groq-sdk, I was able to organize and display data efficiently. This SDK allows structured data querying, so every news topic and summary is well-organized and displayed intuitively within the UI.

✨ Key Features
Topic Search – Users can search for any topic, and News Pulse will retrieve and summarize relevant news.
Responsive UI – Built with Shadcn-UI for seamless mobile and desktop experiences.
Interactive Summaries – Users get AI-generated summaries that are easy to read and understand.
🌐 Try the App!

Live Demo

👋 Who Am I?
I'm Mayank Mohapatra, a developer exploring the potential of AI and automation in app development. My GitHub has more cool projects, and I’d love to connect with you all on Dev.to and GitHub to share ideas and work on innovative projects together!

Recipe Generator Powered by CopilotKit Chatbot

Mayank Mohapatra — Thu, 31 Oct 2024 10:30:22 +0000

In this project, I developed a Recipe Generator and Suggestion App using React for the frontend, Tailwind CSS for styling, and Shadcn UI for enhanced UI components. The CopilotKit Chatbot app allows users to easily add recipes, view them in an interactive UI, and get recipe suggestions based on available ingredients.

Live Website (https://receipe-generator-1zyq.vercel.app/)

Key Features
Recipe Generation:
Users can add a recipe by entering the dish name. The app automatically generates ingredients, instructions, and tips using an internal logic (or AI-based integration).

Recipe Suggestions:
Users can input available ingredients, and the app will suggest recipes based on matching ingredients using predefined logic.

CopilotKit Chatbot
It is very simple and easy to add CopilotKit Chatbot in your any website.

Weather App with Tolgee

Mayank Mohapatra — Thu, 31 Oct 2024 07:53:02 +0000

Hey everyone!

I'm excited to introduce my latest project—a Weather App that brings real-time weather updates to users around the world. Designed with user experience and accessibility in mind, this app provides up-to-date weather forecasts with seamless language support and a modern interface.

🔗 Live Demo (https://weather-alpha-navy.vercel.app/)

Project Overview

This Weather App leverages the power of Tolgee, an open-source localization tool, to enable real-time language switching for a truly global audience. With Tolgee, users can switch languages instantly without refreshing the page, ensuring that weather information is always accessible in their preferred language.

Key Features

Intuitive Interface: A streamlined, user-friendly design that lets users navigate with ease and find information quickly.
Multilingual Support: Real-time language switching for users worldwide, providing weather details in the language of their choice.
Dark and Light Modes: Customize the app's appearance with light and dark modes, adapting to both personal preference and lighting conditions.
Mobile Friendly: Optimized for any device, this responsive app ensures a smooth experience on both mobile and desktop.

Why Tolgee? 🌐

Tolgee is an excellent localization tool for web apps, making real-time language support effortless and empowering developers to manage translations efficiently. Here’s how it enhances this Weather App:

Real-time Language Switching: Instantly update all weather data and content in the user’s selected language.
Easy Translation Management: Tolgee’s interface allows for easy, real-time translation updates, making it simple to add new languages and keep translations accurate.

What This Weather App Offers 🌦️

Real-time Weather Updates: Stay updated with the latest weather conditions, including temperature, humidity, wind speed, and more.
7-Day Forecast: View an extended forecast to plan for the week ahead.
Location-based Weather: Automatically detect the user’s location for a personalized experience or search for weather in any city worldwide.
Interactive Weather Map: Access a map showing weather conditions across different regions for better context.
Theme Customization: Switch between light and dark modes for optimal viewing in any lighting.

This Weather App is your go-to for a personalized and accessible weather forecast experience, no matter where you are.

Creating a Multilingual Expense Tracker with Tolgee

Mayank Mohapatra — Thu, 31 Oct 2024 03:59:47 +0000

Hey everyone!

I’m thrilled to share my latest project—an Expense Tracker app that makes tracking spending easy and accessible for a global audience. With Tolgee integration, this expense tracker supports real-time language switching, so users can instantly change the app's language with just a click—no need to refresh!

🔗 Live Demo

Project Overview

Tolgee, a powerful open-source localization tool, makes it easy to manage translations, enabling real-time, seamless language switching for users worldwide.

Key Features

Elegant UI: A clean and modern design for effortless navigation.
Multilingual Support: Instantly switch between multiple languages, making it easy for users from different regions to track expenses.
Dark Mode and Light Mode: Toggle between themes based on your preference or the time of day.
Mobile Friendly: Optimized for mobile devices with a responsive design, providing a smooth experience on any screen size.

Why Tolgee? 🌐

Tolgee is a developer-friendly tool that simplifies localization in modern web apps. Here’s how Tolgee enhances this expense tracker:

Real-time Language Switching: Switch languages instantly, with all text and content updating automatically.

Easy Translation Management: Tolgee’s interface lets you add and manage translations within the app, making it efficient to keep your app up-to-date in multiple languages.

What This Expense Tracker Does 💰
Track and Categorize Expenses: Easily record expenses, categorize them, and view summaries for better budget management.

Interactive Dashboard: Visualize expenses with charts and graphs to track spending patterns.

Bookmark Frequent Expenses: Quickly save frequent expenses to log them faster next time.

Light and Dark Mode: Switch themes for easier viewing in different lighting conditions.

Mobile Responsive: Enjoy the same functionality and smooth navigation on both mobile and desktop.

PhraseBook With Tolgee

Mayank Mohapatra — Wed, 30 Oct 2024 17:28:33 +0000

Hey everyone!

I’m excited to share my latest project— Phrase Book. This app is a digital version of a phrasebook, where you can flip through various phrases as if you're reading a real book. It’s designed to help users explore and learn phrases in multiple languages with ease.

But what makes this even more special is that the app supports real-time language switching, thanks to Tolgee. With just a click, you can change the entire book’s language without refreshing the page, making it accessible to users from around the globe.

Live Link -> https://phrase-book-five.vercel.app/

Why I Chose Tolgee 🌐
Tolgee is a powerful open-source localization tool that simplifies the process of making multilingual apps. It allows developers to easily manage translations, and with Tolgee integrated into this phrasebook, users can experience a smooth and intuitive way to switch between languages while browsing the phrases.

What the Multilingual Phrasebook Does 📚

Interactive Book of Phrases:
The app presents phrases like an actual book, where you can flip through pages using navigation buttons. As you move forward or backward, a new phrase appears on each page.

Multiple Language Support:
The coolest part is that this book is multilingual! Users can select their preferred language from a dropdown menu, and Tolgee ensures that the entire phrasebook updates in real-time to the chosen language.

Bookmark Feature:
Users can bookmark specific pages for quick access. This feature allows returning to marked phrases instantly. Bookmarked pages will be saved in local storage, enabling persistence even after refreshing or closing the browser. The bookmarked pages can also be displayed in a list view for easy navigation.

Search Functionality:
A built-in search bar allows users to quickly find specific phrases or keywords. As the user types, the app provides instant search results across all phrases and translations in the phrasebook, streamlining navigation within large sets of multilingual content.

Dark Mode and Light Mode:
This make it easy for user to read according to day or night.

Mobile Friendliness:
The layout and UI components are fully responsive, designed to adapt to various screen sizes. Buttons, font sizes, and spacing are optimized for mobile, providing a seamless experience on both smartphones and tablets. Additionally, animations and transitions are performance-optimized to prevent slowdowns on lower-powered devices.

Smooth Navigation:
Just like a real book, users can seamlessly turn to the next or previous page. This allows for easy exploration of phrases without overwhelming the user.

Elegant UI with Page Flip Animation:
To make the experience more engaging, the app includes smooth page-turning animations that feel like flipping through a real book.

How Tolgee Enhances Localization 🛠️

Real-time Language Switching: Users can switch between languages, and the app will automatically update all text and content in the selected language—no need to refresh the page or reload anything.

Easy Translation Management: Tolgee offers a built-in translation tool that made it easy for me to add and manage phrases in different languages, all from within the app.

Developer-friendly Integration: Tolgee integrates perfectly with modern web technologies like React, making the localization process simple and intuitive.

Joke Generator with Tolgee

Mayank Mohapatra — Sat, 26 Oct 2024 09:42:48 +0000

🎉 Introducing the Random Joke Card Generator! 🎉
Hey everyone! I'm thrilled to unveil my latest creation: the Random Joke Card Generator! This delightful little app is here to sprinkle some humor into your day with a collection of random jokes, and there’s a twist — it’s fully equipped with Tolgee for seamless translation and localization. So, no matter where you’re from, you can enjoy a good laugh in your own language!

👉 Check it out live: Random Joke Card Generator

🌍 Why I Chose Tolgee
In the world of app development, localization can often feel like a daunting task. That’s where Tolgee comes in! This open-source gem simplifies the translation process, allowing developers to focus on what they do best: building awesome features. With Tolgee, you can say goodbye to the headaches of managing language files and complex code. It offers a user-friendly interface for managing translations and lets you switch between languages effortlessly and in real time.

When creating the Joke Generator, I wanted to ensure that everyone, everywhere could join in on the fun. Tolgee made that dream a reality!

😂 What Can the Random Joke Card Generator Do?

Generate Random Jokes: With just one click, you can fetch a new random joke from an external API and watch it pop up in a beautifully designed card. Not feeling the current joke? Hit the “New Joke” button to refresh and find a fresh laugh waiting for you!
Language Localization: The real magic happens here! Thanks to Tolgee, this app supports multiple languages. You can easily switch between them, and watch as the entire interface updates in real-time. Whether your friends speak English, Spanish, French, or another language, they can enjoy the same hilarious experience together.
🔧 How Tolgee Makes Localization a Breeze
Tolgee revolutionizes the localization process with its innovative

Features that make it a perfect fit for the Random Joke Card Generator:

Translation Management: With Tolgee's in-app translation tool, managing and editing translations is a walk in the park, even while the app is running.

Dynamic Language Switching: Users can toggle between languages effortlessly, and Tolgee instantly updates the interface without needing to refresh the page.

Ease of Integration: Tolgee’s compatibility with React is a game changer. With just a few lines of code, my app supports multiple languages, making it incredibly easy to implement.

CopilotKit

Mayank Mohapatra — Thu, 03 Oct 2024 19:48:34 +0000

CopilotKit: Simplifying AI Integration
CopilotKit is an open-source framework designed to simplify the integration of AI copilots into applications. It allows developers to create interactive, AI-driven functionalities with ease, enhancing user interaction and automating tasks.

What is CopilotKit?
CopilotKit provides developers with the tools to rapidly integrate AI capabilities into their applications. This framework is particularly beneficial for building apps requiring real-time user input and feedback, enabling the creation of custom AI chatbots, agents, and text areas.

Key Features
Ease of Integration: Implement AI copilots in hours instead of months, ideal for projects with tight deadlines.
Custom Components: Offers components like , , and that integrate seamlessly into existing apps.
Real-Time Data Handling: Grounds the AI copilots in application-specific, real-time data for more relevant and accurate responses.
Open Source: Encourages community collaboration, contributions, and innovation through its open-source model.
**Getting Started with CopilotKit
**To start using CopilotKit in your application, follow these steps:

Installation Install the necessary packages via npm or yarn:

```npm install @copilotkit/react-core




2. Setting Up the Component
Wrap your application (or the specific part where copilot functionality is needed) with the <CopilotKit /> component. This provides context to all other components and hooks within its scope.

import { CopilotKit } from "@copilotkit/react-core";



3. Defining Custom Actions
You can define custom actions for your copilot by using hooks provided by CopilotKit. For example, create functions that process user queries or interact with external APIs.

4. Integrating with APIs
Enhance your copilot's capabilities by integrating it with external APIs (like OpenAI). You can configure backend routes to handle requests and responses based on user interactions.

Example Use Cases
Here are some practical applications you could build using CopilotKit:

**AI-Powered Resume Generator**: Help users generate resumes and cover letters based on their input.
**Social Media Post Scheduler**: Automate social media posting by integrating with platforms like Twitter.
**Interactive To-Do List**: Build a task management app where users interact with an AI copilot to efficiently manage their tasks.

**Conclusion**
CopilotKit offers a powerful framework for developers aiming to integrate AI functionalities swiftly. By leveraging its features, you can create engaging, intelligent user experiences that enhance productivity and interactivity. Whether you're building AI chatbots or automating tasks, CopilotKit provides the tools necessary for seamless AI integration.