Learn how to get apps planned, built, and deployed using modern development tools. So, if you have ever struggled with deployment or are new to building apps in general, this is the course for you. Anya Kubow will demonstrate how to take an idea from a single sentence to a working shipped application in the next hour. You will be using Trey IDE to integrate AI into your workflow, utilizing its code completion, planning tools, and Trey Work agent capabilities. By the end of this video, you will have a working habit tracker and covered essential skills like building, running multi-agents, and shipping your app. Thanks to Trey for providing a grant to make this course possible. >> In this video, I'm going to show you how to get apps planned, built, and deployed in the AI age. So, if you ever have struggled with deployment or are new to building apps in general, this is the course for you. My name is Anya Kubow, and I'm a software developer, as well as course creator. And today, in the next hour, we're going to take an idea from a single sentence to a working shipped application. We're going to be doing this in Trey IDE, a coding environment that integrates AI into the development workflow. So, it'll suggest completion and offer to refactor as we go. We are also going to use it to help us plan the build before we touch any code. And if you ever get stuck, you can hand a job over to Trey Work, a coding agent right inside Trey IDE, that you can talk to like a human, and it handles the tasks end-to-end. By the end of this video, you'll have a working habit tracker, as well as covered the following topics: How to get started with Trey IDE, how to plan your app with AI, turning an idea into clear requirements, how to build your app with AI as a collaborator, how to run multi-agents all at once, and how to ship your app. So, what are we waiting for? Let's do it. Okay, so let's get you set up. Head over to the Trey website so we can grab Trey IDE for your operating system. Now, what even is Trey? Well, rather than simply answering coding questions, Trey combines AI with all the tools you'd expect from a professional IDE. It can understand your project, write code, debug issues, review changes, and even complete complex development tasks all without you having to constantly switch between different applications. Think of it as combining the familiarity of a traditional IDE with an AI teammate that's capable of actively participating in the development process. So, let's click on download Trey IDE so we can have a look. Trey is available for all major desktop operating systems and supports both Apple silicon and Intel Macs running on macOS 12 or later, Windows 10 and Windows 11 on 64-bit systems, and Linux both on x64 and arm64 architectures using Debian and RPM packages. Now, if you are using a Mac running an older version of macOS, anything before version 12 essentially, you'll need to install an earlier release of Trey as the latest versions require newer versions of macOS. The first time you launch Trey, you'll be guided through a quick setup process. So, I'm just going to move that over to applications and wait for that to do its thing. Now, let's open it up and let's click on get started. Now, you'll choose your preferred language and theme and if you're already using another editor like VS Code or Cursor, you can import your existing settings so everything feels familiar right away. You also have the option to install helpful command line shortcuts before signing into your Trey account. Once you're in, the first thing you want to do is open a project. You can either open an existing folder from your computer or clone a Git repository directly into Trey. Whether you're starting with an existing codebase or creating something completely new. Now, let's talk about one of Trey's defining features, it's two development modes. At the top left of the interface, you'll notice you can switch between IDE mode and solo mode. IDE mode works much like a traditional editor. You still have your code editor, terminal, debugger, source code, and extensions, and the AI works alongside you by answering questions, generating code, explaining existing code, and helping with edits while you remain in complete control of every change. Solo mode is where things become much more autonomous. Instead of manually completing each development step, you simply describe your goal either by typing or using your voice, and the AI plans the work for you. It understands your requirements, generates code, runs tests, previews the results, summarizes the changes, and can even help prepare your application for deployment. Think of IDE mode as collaborating with an assistant, and think of solo mode as delegating work to an AI developer while you supervise the outcome. Another major part of Trey is its AI agents. Agents are specialized programming assistants that can understand your codebase, search through files, break complex tasks into smaller steps, and complete multi-step workflows automatically. Trey comes with several built-in agents, but you can also create your own. By customizing prompts, tools, and behaviors, you can build agents that are tailored to your own projects and development workflow. Alongside agents is Q, Trey's intelligent programming assistant. Q is designed to make everyday coding faster by providing intelligent code completion, multi-line edits, next edit prediction, edit navigation, automatic imports, and intelligent renaming across your project. Instead of simply suggesting the next word, Q often predicts entire blocks of code, helping reduce repetitive typing, and keeping you focused on solving problems rather than writing boilerplate. Tray also supports something called the Model Context Protocol, or MCP. MCP is an open standard that allows AI models to communicate with external tools and services. Inside Tray, agents can connect to MCP servers, giving them access to custom APIs, databases, documentation, internal company tools, and other resources. As you become more advanced, MCP allows you to extend what your AI agents are capable of far beyond simply generating code. And of course, AI is only one part of the experience. Tray still includes everything you'd expect from a modern professional IDE. You can edit and debug code, work with Git, install extensions, connect to remote development environments, use SSH or WSL, and even use AI to review code changes, generate commit messages, and summarize branch differences before committing your work. It also places a strong emphasis on privacy and security. With privacy mode enabled, your chats, code snippets, and AI-generated responses aren't used for model training or product improvement, while your project files always remain on your local machine. For added safety, AI-generated terminal commands can also be executed in a sandbox environment, helping reduce the risk of accidental or potentially harmful operations. Now that we've covered what Tray is and completed the initial setup, let's start exploring the interface and build our first project. How to plan your app with AI. So, we have Tray installed and ready to go. The first thing we're going to do isn't write code, it's plan our application. One of the biggest mistakes developers make is jumping straight into development with nothing more than an idea in their head. The better your requirements, the better your AI can help you throughout the entire project. The application we're going to build is a full-stack habit tracker. Users will be able to create habit, tick them off every day, build streaks, and view their weekly progress. We'll also add authentication, so every user has their own habit. And by the end of the tutorial, we'll have the application deployed online. Rather than planning all of that ourselves, let's ask Trey to help. I'm going to open the AI panel and describe the application in plain English. So, I'm going to write, "I want to build a modern full-stack habit tracker. Users should be able to register, log in, create habits, mark them as complete each day, view their streaks, and see weekly statistics. Help me turn this into a software specification." And send. And this will prompt you to create a new project. So, let's do it. This project is going to be saved on the Anima Cubo documents tray projects, which is a directory that has been generated for me. And I'm just going to call this habit tracker. And confirm. Within a few seconds, Trey has done far more than simply repeat my prompt back to me. It's identifying the core features, suggesting a technology stack, breaking the project into user stories, designing the database, proposing API endpoints, and even generating a sensible development roadmap. This is a great way to work with AI. You're not asking it to write code immediately, you're asking it to think like a software architect first. Great. So, now you can see it's asking me to review and approve the document. So, let's check it out. Here we go, product requirements document. We have the product overview, the problem statement, the problem vision, and so on, as well as the architecture. So, front end, we're doing React with TypeScript. We're using Tailwind, React Context API. And then for the back end, we're using Node.js with Express, PostgreSQL. This is looking really good. I can, of course, use this time to refine the scope a little bit or change anything I don't want. So, I'm just going to click cancel, and what I'm going to do is talk to it like a human. I'm going to ask it what's realistic for version one. Okay, I'm doing so because I just want a minimal viable product or MVP, and I want to know what it would suggest for that. So, as you can see, it's removing unnecessary complexity and focusing on the features that provide the most value. Great. So, now it's made the changes and asking me to approve the MVP scope. This will include having simple authentication only, a basic habit management tracker, daily tracking, streak tracking, weekly stats, and no back-end needed for now. We're just building something super quick to test with our audience. One other thing I can do is ask it to generate a task list for building this app. First, just so we can see the step-by-step development plan that we can work through one feature at a time. And great, we are no longer staring at a blank project. We have a clear specification, a road map, and a list of tasks. Let's start building. The builder will go through each of these phases. So, phase one will be project initialization. So, initializing the React and Tailwind 5 project setup, configuring Tailwind CSS with a custom theme that we can, of course, edit, setting up project structure, and installing configuring the UI components. Phase two will be all about core infrastructure, and phase three will be the authentication features. So, building the register page and login page, as well as password hashing to make our app secure. Phase four will consist of dashboard and habit management, and phase five will be tracking and streaks. This all looks good to me. And now I am fully informed of what is being built rather than just asking the AI to build something that I completely do not understand. Building your app with AI. Now comes the fun part. We're going to build our habit tracker. But instead of copying code from ChatGPT into our editor, we're going to collaborate directly with Trey. I'm going to ask it to scaffold a modern fabrication using React for the front end, styling with Tailwind, and just local storage for now. As we can see in the updated architecture file. So, let's start building. Now, watch what happens. Trey starts creating folders, generating files, installing dependencies, and setting up the project structure as you will see populated in here. We've already saved ourselves 20 or 30 minutes of boilerplate work. Now, one thing I want to point out is that I'm not letting AI code completely unsupervised. Every suggestion can be reviewed before it's accepted. I can ask questions, reject changes, edit the code myself, or request a completely different implementation. That's one of the biggest strengths of working inside an AI native IDE instead of copying code between browser tabs. If you look in the source directory, you will see the pages being created. So, the login page and register page as well as components. So, the components that visually make up our app. Once everything is created, it's going to also test our app and start the dev server for us so that we can view it. And amazing, 110 tasks have been done. The app is now ready for us to preview in the IDE itself. Okay, and here we go. Look at all these files that have been generated for me. So, we have our three pages. We have three components. This is just a minimal viable product or MVP. It's very basic. It doesn't have a back end. We're just testing that everything works and we can develop it further. So, let's go ahead and sign up. I'm just going to use my name ania@codewithania.com and a password and sign up. And great. So, here's my habit tracker. We can go ahead and add a new habit. So, let's go with read. We can pick a color for it and add the habit. So, one of my habit is read and I have done this for zero days. And if I've completed this habit, I can mark it as done. Okay, very simple minimal viable product and we can develop it from there in whatever way we want. So, rather than building out a whole big app and then going back and changing it, this is a much easier way to work. Now, say we want to change one thing. We don't have to talk to the agent. No, we can simply go to that component, so the habit card, and change it in here. I'm just going to keep these changes as they were just added. Now, I'm simply going to scroll down and then change the text to done, like so. So, I can just interact with the code that is fine or I'm just going to delete that to show you Q can make suggestions for us. Q is Trace's intelligent programming system and it's constantly working in the background. As you can see, it's suggesting code completions, predicting my next edits, automatically importing dependencies, and even helping rename variables across the project. It's one of those features you stop noticing after a while because it simply becomes a part of your workflow and it's super useful. So, I'm just going to add that back in. Okay, great. So, we have our code. We've had a look at the code. We've seen how to edit the code directly by ourselves and with suggestions from Q. Let's have a look at developing this project further. And as I have many things I want to do, this include adding a back end, adding a database, changing the branding of this, it's time to look at running multiple agents at once. Running multiple agents. Up until now, we've been working with a single AI agent, but Trey can actually use specialized agents. Think of agents as members of your development team. Each one has a different role. Rather than asking one AI to do everything, you can delegate different tasks to different specialists. For example, I'm going to ask one agent to improve the front end so it matches my brand identity. While that's happening, I'm going to use another agent to add a back end to our project. Instead of context switching between all of those tasks myself, Trey coordinates the work for me. You can even create your own custom agents. For example, you might build an accessibility expert, a security reviewer, a performance optimizer, or a documentation writer. Each agent can have its own instructions, tools, and even access to external services through MCP, allowing them to specialize in particular workflows. As your project becomes larger, this is where Trey really starts to shine. It begins to feel less like an autocomplete tool and more like working alongside a small development team. So, let's go to settings, click on agents, and I'm just going to create a new agent. At the moment, we have these two built-in agents, which is one to chat by your code base and one for end-to-end execution of development tasks. I'm going to create an agent that is specialized in the front end and knows my brand colors. This agent should be a front-end developer developer that works with my brand colors of green, base navy, accent blue, highlight orange, error red. And I'm specifying that other colors are allowed sparingly when a subject needs them. So, let's generate. Okay, great. So, these have been filled out for me using AI. The name of this agent is brand UI developer. I'm happy with this. Of course, you can edit if you wish. And I'm just going to create and also use it now. Okay, so as you can see, brand UI developer has now been added here and I can chat with it. Okay, great. So, we've just added an agent, but if you want to use multi-agent mode, you're going to have to switch to solo mode. So, let's go ahead and do that. So, now your UI should look like this. So, we can chat to the default agent or we can select the brand UI developer agent that we just created. As mentioned, this agent will act like a front-end developer that already knows my brand colors. So, I can simply write, "Please refine my app so that it fits with my brand colors." and run this command. So, now that will run and at the same time, I want my agents to build a back end for me. So, I'm going to simply add a new task, select the end and execution of development's tasks agent. This one's already inbuilt to tray and then I'm going to ask it to build out my back end in Node.js with a PostgreSQL SQL database. And that will start running, too. So, as you can see, I have two tasks running at the moment, both by two completely different agents. And of course, we can add as many tasks as we want. For this demo, however, I'm just going to let these two run and do their thing. Let's see how they get on. And I've just sped it up and the free code camp colors have been applied to my app. This looks great and I could see that the task for the back end has also been completed. So, my two tasks will run at the same time and of course more could have been added too. Simply by pressing this add new task button right here and selecting the agent that you want to work with. Now, let's check this out. I'm just going to sign up and I'm just going to sign up using my name and my email address of anja@codewithanja.com and pasting in a password. I'm signing up again because previously we were losing local storage and this time we are using a database. So, amazing and let's sign up and great. We see our habit tracker. Everything works. We are now using the full stack version of this app, whereas previously we were just using a front end app using local storage. I love it. This is all looking good. And if we go back to our code, you will see that not only do we have front end code now, but if we scroll up, we will see the back end. So, we see our node modules and we see a server middleware. This looks great. It's now time to ship our app and in order to do that, we need to switch back to solo mode. So, go ahead and do so. How to ship your app. Uh habit tracker is now working locally, but software isn't very useful if nobody else can use it. So, let's get this application ready for production. Rather than manually remembering every deployment step, I'm simply going to use tray to deploy this for me. It checks our environment variables, reviews the project configuration, identifies anything missing and makes sure we're production ready. The only prerequisite is that I've already signed up to Vercel. So, if you haven't, make sure to go through the steps to sign up, and this pop-up should appear. As we are deploying with Vercel, this is what it should look like, and I'm simply going to select my project. And this integration requires the following permission, so read and read and write. I'm happy to give it those permissions, and then I'm just going to install. And great, so now let's deploy again. Now, you could have just as easily Render or another hosting provider. This is just what the apps were not for me, and I was happy to go ahead with it. And amazing, we now have our URL, so let's test it out. I'm simply going to copy this and put it into my browser, and once again, I'm just going to sign in. As I've already signed up in previous steps, it should remember me, so I'm just going to use the email address of ania@codewithania.com and my password and log in. And amazing, we've done it. This is now hosted live, a full-stack secure application that you can share with your friends, future customers, you name it. And that's it. We have now completed a full-stack habit tracker, collaborated with specialized AI agents, and deployed the application online. Hopefully, this video gives you a good overview of how AI fits into real development workflow, and more importantly, how AI can help you spend less time on repetitive tasks and more time building great software.
Generated algorithmically for Search Engine
Indexing.