Daytona-Sample-React: Text AI

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:

1. First navigate to the project and set up a file called ‘.devcontainer/devcontainer.json’
2. Generate a devcontainer using dev container generator
3. 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:

1. 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:
   

2. If you have both frontend and backend requirements then you must add the server port as a forwarded port. Should look something like this:
   

3. 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!