My daytona sample is a React project called Mindsnap-prosemaster-daytona. It is a very simple beginner friendly Application developed using React, Node and AI following the MVC Architecture
In our fast paced world, no one wants to spend their time configuring stuff, the developers out there want to just get on with it and code it down. Sounds like you? Then, Cheers! you have come to the right place.
But, wait, we all know that's not how development works. Sadly, Even for the simplest of projects you need to have configuration tools, packages to install, ports to forward, sometimes vpn setup and more. This is where Daytona comes in with its simple yet ground-breaking solution for developers.
Starting to feel curious, huh?
In this post, I’ll take you through my journey of building MindSnap ProseMaster—a super beginner-friendly application designed to transform long texts into quick summaries, key insights, and fun mnemonics.
Let's start with a short intro on how I built this application. I think this was my first application that I built using react and node. It was fairly simple. Now assuming you know how api calls are made this will be fairly easy!
First, This is a single page application with one Input box where users can enter any text and now using this text and passing a prompt i send it to the gemini api. The response from gemini api is displayed back to the screen.
So, how did I, a developer who doesn’t know about containers or anything of that sort come to know of daytona?
Well we will need to thank Quira for this one. Quira’s Quest 023 featured Daytona with a huge pool prize of 6000 USD. As soon as I got to know of it I started skimming through my projects to make submission for the quest!
I distinctly remember thinking that I should choose a simple project, as a complex one might make it harder to set up a DevContainer for my workspace. But, oh God, I couldn’t have been more wrong.
I know some of the readers are not familiar with dev container, workspace. But, fret not! I have covered them all in this blog so just keep reading and slowly it’ll all come to you.
In fact let's get started with these terms:
Dev Container: A pre-configured environment that contains all the tools and settings needed for development.
Workspace: This is a digital space where we can store and organize all the files, code and respective projects we are working on.
Port: Let's think of this like a door through which data flows between our development environment and other services or devices.
PostCreateCommand: An important command of devcontainer.json that runs automatically after setting up the development environment. I think this is used to finalize setup tasks.
Using Daytona, I discovered how easy it is to set up and manage development environments, no matter your skill level. Stick around to learn from my experience, and see how Daytona can make your next project smoother and more efficient!
Let's dive in on how I got started
I am more of a visual learner! This means rather than reading through long bulky text I like to see videos or images of implementation. So as usual, I did not read the instructions which were really simple and easy to follow.
Here I'll need to thank the open source community quira is creating. One of my dear friends whom I met in the community, K OM, offered help. We hoped on a call where he explained 3 simple steps of getting started:
- First navigate to the project and set up a file called ‘.devcontainer/devcontainer.json’
- Generate a devcontainer using dev container generator
- Edit readme to make the users aware and done!
Is it really that simple? Well the short answer is YES. But there’s more to this, I like to believe that testing the workspace is a greater part of learning and using daytona.
What actually motivated me? And What was the most frustrating part in this journey?
The 100 first valid submissions would receive 50 USD each! If this is not a motivating factor for you then I don't know what is.
Daytona has this featuring saying:
But this was the most frustrating part for me. The application was working on my machine but not in the reviewers machine which momentarily led me to the question: Is Daytona Really worth it?
Haha, now that I think of it. Sounds really funny. I was the one doing wrong configurations and blaming daytona thinking its making false claims.
Yes, I admit I came for the reward but in all honesty, I stayed for the technology. I endured all those frustrations because I saw what daytona is really capable of.
*Hence coming to the question, What specific problems did I face? *
The first problem that came to me was that the container I generated using AI was throwing a fatal error when trying to create the daytona workspace.
After I solved that issue, the next one which came to me was that my project was created using vite and it turns out that when this is the case nothing is displayed on the screen. It’ll come as a white blank page. This was a client problem.
Later, when I fixed that client problem, now my server was not responding.
When both my client and server started working then I got this CORS issue.
Finally, I removed the server and directly called the api but then I got an error message while creating the workspace but it’d still open the IDE. Turns out that I had to change my devcontainer.json to match the changes I made in my code.
Solutions and how did I get to them?
Honestly, all of the problems had very simple solutions tied to it. Maybe I would never have figured them out if it hadn't been for the help of the Daytona team, especially Jafa, who patiently reviewed and suggested the necessary changes. He helped me learn more about Daytona, how it works, and why it's the best.
Some solutions that you might need are:
If your project is using Vite then In your package.json you need to specify vite with a host flag. It should look something like this:
If you have both frontend and backend requirements then you must add the server port as a forwarded port. Should look something like this:
And a final solution to all problems that you may encounter is: ASK. Go join daytona’s slack and tell them about your problem. I am pretty sure you’ll get the help you are looking for. Slack link
My Suggestions, Why use Daytona?
I’d rather ask why not daytona? It's super simple to use and easy to manage. It ensures you no longer have to go through the complexity of setting up development environments
With Daytona, you can focus on what’s really important rather than worrying about any of the setup.
Some of the best features that I feel make Daytona an attractive option for developers are:
Single Command:
Launch your entire development environment with just one command. No need to manually set things up—everything’s ready to go instantly.Runs Everywhere:
Whether you’re on your laptop, a remote server, or in the cloud, your development environment works anywhere. It’s completely flexible, so you can work from any machine.IDE Support:
Seamlessly integrate with popular tools like VS Code and JetBrains. Plus, there’s a built-in web IDE so you can start coding without any setup.Security:
Automatically connects you to your development environment via a secure VPN. This keeps your data safe and ensures you can work securely, even remotely.
These features save time, boost flexibility, and keep the development process smooth and secure. Hey, What more can a developer ask for? It's perfect for developers of all levels.
Honest Feedback!
Well, arguing that it's perfect might be a little too far-fetched. Though I feel it is one of the best in the business, there are certain changes that could actually make user experience better.
- Prebuilt Framework-Specific Templates Yes, I mean Templates, not samples. What's so different between them? I know daytona is collecting samples so that developers can refer to those samples and work on spinning daytona workspace.
But, if daytona provides ready-to-use-templates for some of the popular tech stacks including a pre configured devcontainer.json file. Something like an interactive setup wizard supporting some templates.
- One-Click Environment Sharing I think Daytona can add a feature to share development environments instantly. Developers can send a link to teammates for collaboration.
Something like daytona share that will generate a secure link to the environment, accessible via the built-in Web IDE. We can even have live collaboration here like in Google docs.
- Maybe an AI powered Troubleshooter I thought of this because many projects were stuck on very simple things like misconfigured ports, dependency mismatches, etc.
Again, these are my thoughts on what could make it better!
Takeaway:
The simple saying; don't judge a book by its cover. Daytona is way more than what I described and you’ll never find out unless you try. So what are you waiting for? Try now!
And one last thing before I see you off: I’d like to extend my deepest gratitude to the entire Quira and Daytona team for coming up with this. Kudos!
Github link to my project
Github link of daytona
Link to Daytona Quest
The above is the detailed content of Daytona-Sample-React: Text AI. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The following points should be noted when processing dates and time in JavaScript: 1. There are many ways to create Date objects. It is recommended to use ISO format strings to ensure compatibility; 2. Get and set time information can be obtained and set methods, and note that the month starts from 0; 3. Manually formatting dates requires strings, and third-party libraries can also be used; 4. It is recommended to use libraries that support time zones, such as Luxon. Mastering these key points can effectively avoid common mistakes.

PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl

Event capture and bubble are two stages of event propagation in DOM. Capture is from the top layer to the target element, and bubble is from the target element to the top layer. 1. Event capture is implemented by setting the useCapture parameter of addEventListener to true; 2. Event bubble is the default behavior, useCapture is set to false or omitted; 3. Event propagation can be used to prevent event propagation; 4. Event bubbling supports event delegation to improve dynamic content processing efficiency; 5. Capture can be used to intercept events in advance, such as logging or error processing. Understanding these two phases helps to accurately control the timing and how JavaScript responds to user operations.

If JavaScript applications load slowly and have poor performance, the problem is that the payload is too large. Solutions include: 1. Use code splitting (CodeSplitting), split the large bundle into multiple small files through React.lazy() or build tools, and load it as needed to reduce the first download; 2. Remove unused code (TreeShaking), use the ES6 module mechanism to clear "dead code" to ensure that the introduced libraries support this feature; 3. Compress and merge resource files, enable Gzip/Brotli and Terser to compress JS, reasonably merge files and optimize static resources; 4. Replace heavy-duty dependencies and choose lightweight libraries such as day.js and fetch

The main difference between ES module and CommonJS is the loading method and usage scenario. 1.CommonJS is synchronously loaded, suitable for Node.js server-side environment; 2.ES module is asynchronously loaded, suitable for network environments such as browsers; 3. Syntax, ES module uses import/export and must be located in the top-level scope, while CommonJS uses require/module.exports, which can be called dynamically at runtime; 4.CommonJS is widely used in old versions of Node.js and libraries that rely on it such as Express, while ES modules are suitable for modern front-end frameworks and Node.jsv14; 5. Although it can be mixed, it can easily cause problems.

There are three common ways to initiate HTTP requests in Node.js: use built-in modules, axios, and node-fetch. 1. Use the built-in http/https module without dependencies, which is suitable for basic scenarios, but requires manual processing of data stitching and error monitoring, such as using https.get() to obtain data or send POST requests through .write(); 2.axios is a third-party library based on Promise. It has concise syntax and powerful functions, supports async/await, automatic JSON conversion, interceptor, etc. It is recommended to simplify asynchronous request operations; 3.node-fetch provides a style similar to browser fetch, based on Promise and simple syntax

To write clean and maintainable JavaScript code, the following four points should be followed: 1. Use clear and consistent naming specifications, variable names are used with nouns such as count, function names are started with verbs such as fetchData(), and class names are used with PascalCase such as UserProfile; 2. Avoid excessively long functions and side effects, each function only does one thing, such as splitting update user information into formatUser, saveUser and renderUser; 3. Use modularity and componentization reasonably, such as splitting the page into UserProfile, UserStats and other widgets in React; 4. Write comments and documents until the time, focusing on explaining the key logic and algorithm selection

JavaScript's garbage collection mechanism automatically manages memory through a tag-clearing algorithm to reduce the risk of memory leakage. The engine traverses and marks the active object from the root object, and unmarked is treated as garbage and cleared. For example, when the object is no longer referenced (such as setting the variable to null), it will be released in the next round of recycling. Common causes of memory leaks include: ① Uncleared timers or event listeners; ② References to external variables in closures; ③ Global variables continue to hold a large amount of data. The V8 engine optimizes recycling efficiency through strategies such as generational recycling, incremental marking, parallel/concurrent recycling, and reduces the main thread blocking time. During development, unnecessary global references should be avoided and object associations should be promptly decorated to improve performance and stability.
