How to Create a Web Application in an (Almost) Autonomous Way Using Clean Coder

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Bookmark
Rate this content

Imagine replacing yourself with a multi-agent AI programmer to develop your production web application. That's exactly what we did at my startup takzyli.pl. To achieve this, we designed and used the Clean Coder - AI agent framework for autonomous code writing (https://github.com/GregorD1A1/Clean-Coder-AI), which is hopefully open-source project. If it worked for us, why shouldn't it work for you?

In this workshop, I'll show you how to create an entire web application in an (almost) autonomous way and drastically reduce the time you or your employees spend on writing code.

This workshop has been presented at Productivity Conf for Devs and Tech Leaders, check out the latest edition of this Tech Conference.

FAQ

Yes, Clean Coder can be integrated with existing projects. You can connect it to any ongoing or new application development to automate and speed up the coding process.

If the AI makes coding errors, provide clear feedback to guide corrections. Clean Coder is designed to iteratively improve and can adjust based on user input and feedback.

The cost of using Clean Coder depends on the size of the project and the number of API calls. While it may run up to $100 per month for regular use, the cost is justified by the reduction in human programming labor.

The Clean Coder framework is intended to offload programmers from most programming tasks by operating as an autonomous programmer. It aims to replace human programmers with AI, allowing it to manage and create entire applications autonomously with minimal human supervision.

Unlike other AI coding tools that assist with generating code snippets, Clean Coder focuses on the entire application development process. It allows AI to take the main role of a programmer, planning and implementing whole applications autonomously, with humans supervising the AI's performance.

The Clean Coder framework includes features like a two-step planner agent for planning and implementing tasks, a front-end feedback agent for visual feedback on the application, and a manager agent that integrates with Todoist to manage tasks efficiently.

To set up the Clean Coder framework, clone the repository from Grigori Dudnik’s GitHub (cleancoder.ai), create a Python virtual environment, and install the required libraries using pip. Ensure you have Python 3.10 or newer.

Clean Coder can be used for various programming languages and frameworks, including Python, JavaScript, Go, C, and C#. It is demonstrated with Next.js but can be adapted to other applications as well.

If you encounter errors, check the environment setup and library installations. For further assistance, you can report issues on the Clean Coder GitHub repository or contact Grigori Dudnik directly.

Clean Coder uses a document indexing feature that allows semantic searching through large codebases, helping the AI to efficiently locate and work on relevant files without manually navigating through every folder.

Grigorij Dudnik
Grigorij Dudnik
95 min
24 Mar, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Today, we will use the clean coder framework to write a simple web application. Clean coder is a framework that aims to replace human programmers with AI by offloading most programming tasks. It is designed to be an autonomous programmer that can build applications overnight. It includes intelligent agents, such as a two-step planner agent and a front-end feedback agent. To configure CleanCoder, provide the Antropic API key, OpenAI API key, project folder path, and Todoist API key. CleanCoder can be used with Next.js and other applications. We can automate coding tasks, create projects, and set code and product rules. CleanCoder also has debugging and code control features. It allows for semantic search and enhances the coding process. CleanCoder is compatible with Next.js, FastAPI, Vue.js, and potentially C-Sharp. Future updates will include an improved manager agent and regular application updates.
Video transcription and chapters available for users with access.

Watch more workshops on topic

Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
Build a Universal Reactive Data Library with Starbeam
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
Build Web3 apps with React
React Summit 2022React Summit 2022
51 min
Build Web3 apps with React
Workshop
Shain Dholakiya
Shain Dholakiya
The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”
Learn more about the Hyperverse here.
We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.
Test, Code, Repeat: Mastering AI-Assisted Development
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
53 min
Test, Code, Repeat: Mastering AI-Assisted Development
Workshop
Marco Pierobon
Marco Pierobon
"Test, Code, Repeat: Master AI-Assisted Development" introduces developers to a transformative way of coding with AI as a collaborative partner. This workshop focuses on how iterative workflows, such as the ping pong pairing technique, enable an enhanced interaction between human creativity and AI efficiency. 

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

AI and Web Development: Hype or Reality
JSNation 2023JSNation 2023
24 min
AI and Web Development: Hype or Reality
Top Content
This talk explores the use of AI in web development, including tools like GitHub Copilot and Fig for CLI commands. AI can generate boilerplate code, provide context-aware solutions, and generate dummy data. It can also assist with CSS selectors and regexes, and be integrated into applications. AI is used to enhance the podcast experience by transcribing episodes and providing JSON data. The talk also discusses formatting AI output, crafting requests, and analyzing embeddings for similarity.
Domain Driven Design with Vue Applications
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Top Content
Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.
Forget Bad Code, Focus on the System
React Summit US 2023React Summit US 2023
27 min
Forget Bad Code, Focus on the System
Top Content
Watch video: Forget Bad Code, Focus on the System
Setting up the system and separating concerns are important in software development. Modular construction and prefab units are a new trend that makes construction quicker and easier. Architectural complexity can lead to a drop in productivity and an increase in defects. Measuring architectural complexity can help identify natural modules in the code. Best practices for avoiding architectural complexity include organizing code by business domain and using prop drilling. Atomic design and organizing a monorepo are recommended approaches for managing architectural complexity.
Confessions from an Impostor
JSNation 2022JSNation 2022
46 min
Confessions from an Impostor
Top Content
The Talk discusses imposter syndrome and reframes it as being a professional imposter. It emphasizes the importance of sharing and starting, embracing imposterism, and building inclusively for the web. The speaker shares personal experiences of being an imposter in various technical disciplines and highlights the significance of accessibility. The Talk concludes with the idea of building a collective RPG game to remove excuses for not making things accessible.
Improving Developer Happiness with AI
React Summit 2023React Summit 2023
29 min
Improving Developer Happiness with AI
Watch video: Improving Developer Happiness with AI
GitHub Copilot is an auto-completion tool that provides suggestions based on context. Research has shown that developers using Copilot feel less frustrated, spend less time searching externally, and experience less mental effort on repetitive tasks. Copilot can generate code for various tasks, including adding modals, testing, and refactoring. It is a useful tool for improving productivity and saving time, especially for junior developers and those working in unfamiliar domains. Security concerns have been addressed with optional data sharing and different versions for individuals and businesses.
Maximize Productivity with AI Agents
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
25 min
Maximize Productivity with AI Agents
I'm Tejas Kumar, a software developer with over 20 years of experience. AI agents are defined as entities that act on behalf of users or groups to produce specific effects. Agents consist of an orchestration layer, a language model, and tools represented as JSON functions. Langflow is an open-source tool that allows users to build their own AI agents by connecting language models and tools. Composio is a tool that enhances agent capabilities by offering integrations and apps, such as Google Calendar integration. MCP (Model Context Protocol) is a way to share context with models and extend their capabilities. It allows functions to be made available to models over standard input/output or an HTTP endpoint. MCP can be used with GitHub to perform various tasks like searching and fixing code issues. The Talk covered the basics of AI agents, building agents with Langflow and enhancing them with Composio, and using MCP with GitHub. The speaker encouraged audience questions and exploration of these concepts.