Generative AI

0 / 230 XP

Presentation Transcript
If you prefer text to video, check out the transcript of the presentation above

Slide 1 ----------- Part 1: Let's start the AI revolution with a joke! "Why was your AI cold?" "Because you left the windows open!". Funny! And now is the time to explore how AI will shape the future of Full-Stack development. Slide 2 ----------- Part 1: There is a revolution going on! The AI revolution! Let's talk about the opportunities and challenges that the use of AI and particularly Generative AI brings to full-stack development. Part 2: Generative AI automates many development tasks, from writing frontend components to configuring CI/CD pipelines. Part 3: While AI can generate code, it lacks true understanding of business logic, scalability, and security concerns. Part 4: AI-generated code is only as good as the input prompt and requires human oversight for optimisation and security. Part 5: The first AI-generated output is often incomplete or incorrect, making human expertise crucial. Slide 3 ----------- Part 1: So, how can you use AI to build full-stack systems? Part 2: Tools like ChatGPT and GitHub Copilot can create React, Vue, Express.js, and Django components. Part 3: AI can assist in writing SQL and NoSQL queries, though human validation is required. Part 4: AI can automate deployments using GitHub Actions or Jenkins, improving workflow efficiency. So, considering what we learned about full-stack development, AI can cover pretty much everything. Does that mean that hoomanz are no longer needed? Part 5: We think otherwise! Consider this AI-generated React component. While it provides an essential starting point, it needs styling, state management, and business logic. Without engineering or domain-specific knowledge, we would not know how to prompt AI systems to add such functionality. Slide 4 ----------- Part 1: Let's dive into problems you may encounter when using generative systems to create your code. Part 2: One of the main problems is security. AI may generate insecure code, such as missing input validation or hardcoded credentials. Part 3: Please take a look at this simplistic example. Did you spot the error? Yes, this login API is insecure because it hardcodes credentials and lacks password hashing. Part 4: AI also often produces inefficient database queries or architectures that don't scale well. Moreover, AI struggles with large code bases, having a sluggish performance or providing unrelated code changes or feedback. Part 5: Last, AI doesn't understand specific company needs, goals or strategies; it generates "generic" solutions. While it is possible to encode such requirements into a prompt, maintaining it introduces unreasonable effort. Slide 5 ----------- Part 1: Let's take a look at some feedback from developers who tried to use AI to develop production-ready systems. Part 2: Mayo is a senior developer who has spent over 1000 hours working with Cursor AI. That is about 125 days of work. He identified three major issues when using AI. Part 3: First, the generated output often contains bugs that could cost you a ton of time and money As a result, a lot of time can be wasted reviewing and refactoring Al generated code. Slide 6 ----------- Part 1: Second, the output generated by AI is largely inconsistent. If you provide the same prompt several times to the chatbot, you may end up with drastically different solutions to the problem. In addition, if you ask the Al any questions that contain suggestions or alternative solutions, it will apologize and refactor the entire code again. Slide 7 ----------- Part 1: Last, AI can significantly increase technical debt. Even when the Al generates a "good" code block solution, it doesn't consider the entire software design and architecture of the application. Due to the lack of a holistic perspective, problems emerge, including inconsistent error handling, modularity, and data modelling across the app. As a result, the short term quick fix often leads to scalability, performance, and maintenance issues over the long run. Once your codebase has grown to a large, complex web of messy components, refactoring will be a long, painful and costly process. Slide 8 ----------- Part 1: The Cursor AI (or AI coding in general) is a useful autocompletion tool that can boost your development productivity in the short run, but in the long run, it can waste significant time and energy IF you don't thoroughly review generated outputs. Cursor AI is best used as a "junior developer" who often makes mistakes, and you must review their work carefully to guide them correctly. If you simply "trust" the AI outputs due to lack of knowledge, skill, or willingness to review results, the long-term damage will outweigh the initial productivity gains you got so hyped about. Slide 9 ----------- Part 1: Where are humans needed when using AI coding systems? Part 2: Developers must manually check AI-generated code for vulnerabilities. Part 3: AI-generated code is generic; human developers tailor it to real-world needs. Part 4: AI makes mistakes—developers ensure efficiency, correctness, and maintainability. Slide 10 ----------- Part 1: Check out this list of amazing tools that enable AI-powered coding. Please explore them in your own time and reflect on how much effort it takes to build genuine, fully featured, secure systems and not just toy examples these systems come with. Slide 11 ----------- Part 1: In your own time, please pause this presentation and watch the video, where two experienced engineers enthusiastic about AI technologies use cutting edge AI technology to build a service for upscaling images. When watching, ask yourself the following questions: First, could AI alone build the app, or did developers need to intervene? Second, is the process straightforward and intuitive, or is engineering knowledge still required? Last, Could you solve their challenges? Slide 12 ----------- Part 1: Let's summarise what we've learnt Part 2: Generative AI is a powerful tool, but human developers ensure correctness, security, and scalability. Part 3: Never trust AI-generated code blindly—manual checks are essential. Part 4: However, developers who master AI-assisted coding while understanding full-stack principles will be in high demand as they will be efficient in their code production while maintaining the high quality of their work.

Description
All the extra information about this section

1. INTRODUCTION: THE AI REVOLUTION IN FULL-STACK DEVELOPMENT Generative AI has transformed full-stack development by automating code generation, optimising workflows, and even setting up CI/CD pipelines. Tools like GitHub Copilot, ChatGPT, and other AI-driven platforms can write backend APIs, design frontend interfaces, and configure DevOps tasks. But does this mean developers are becoming obsolete? Not at all! It's more important than ever to understand how full-stack systems work. Why? * AI can generate code, but it doesn’t understand business logic or user needs. * AI-generated code is only as smart as the requirements you specify in the query. * AI struggles with large code bases and integral, complex functionality * AI can create CI/CD pipelines, but security vulnerabilities must still be manually reviewed. * AI is great for rapid prototyping, but human developers ensure scalability and performance. * You still need engineering mind! First output is usually garbage 🗑️ This lecture will explore how generative AI assists full-stack development, its limitations, and why human expertise remains irreplaceable. ⚠️ 🧠 ⚠️ In this course, you are welcome to use any Generative AI systems. Still, you will have to explain all the generated code to your assessors, making sure you fully grasp the generated functionality and potential challenges and drawbacks of that generated code.  -------------------------------------------------------------------------------- 2. GENERATIVE AI IN FULL-STACK DEVELOPMENT  2.1 HOW AI CAN BUILD FULL-STACK SYSTEMS AI-powered tools can: * Generate frontend components: AI tools like ChatGPT and Copilot can create React, Angular, or Vue components. * Write backend APIs: AI can generate Express.js, Django, or Spring Boot APIs with REST or GraphQL. * Optimize database queries: AI helps in writing SQL queries and structuring NoSQL databases. * Configure CI/CD pipelines: AI can write GitHub Actions or Jenkins pipelines for automated deployment. 2.2 WHERE AI STRUGGLES IN FULL-STACK DEVELOPMENT AI will most likely generate the most basic, sometimes non-functional result that omits important factors such as: * Security Issues: AI-generated code can introduce vulnerabilities (e.g., missing input validation). * Scalability Problems: AI might generate inefficient database queries or non-scalable architectures. * Business Logic Understanding: AI doesn’t know company-specific needs; it generates "generalized" code. Example: Insecure AI-generated API app.post("/login", (req, res) => { const { username, password } = req.body; if (username === "admin" && password === "password") { res.send("Logged in!"); } }); Problem: Hardcoded passwords and lack of hashing make this insecure. -------------------------------------------------------------------------------- 3. THE IMPORTANCE OF STUDYING FULL-STACK DEVELOPMENT DESPITE AI While AI speeds up development, human expertise is essential for: ✅ Security Audits – Ensuring AI-generated code follows best security practices. ✅ Business Logic Implementation – Customizing AI-generated solutions to real-world needs. ✅ Debugging & Optimization – AI code often contains inefficiencies that need human refinement. 3.1 CASE STUDIES: COMMERCIAL AND NON-COMMERCIAL AI IN FULL-STACK DEVELOPMENT ToolUse CaseLimitationsGitHub CopilotAssists with code suggestionsCan generate incorrect or insecure codeChatGPTGenerates API and frontend codeLacks understanding of complex business needsAWS CodeWhispererHelps in cloud-based full-stack developmentNeeds human oversight for optimizationsv0v0.dev, developed by Vercel, is an AI-powered tool designed to streamline the web development process by generating user interfaces (UIs) from simple text prompts or images. It produces React code compatible with Shadcn UI and Tailwind CSS, enabling rapid prototyping and development.Lot of manual refinements, ugly components.bolt.newBolt.new, developed by StackBlitz, is an AI-powered web development platform that enables users to build, edit, run, and deploy full-stack applications directly from their browsers without requiring local setups. Sluggish performance, limited UI design capabilities, challenges with complex functionalityCursorCursor is an AI-powered code editor designed to enhance developer productivity by integrating advanced AI capabilities directly into the coding environment. Built as a fork of Visual Studio Code, it offers a familiar interface augmented with features like intelligent code completion, natural language editing, and codebase understanding.Does not handle complex projects well, performance issues, limited integration options. Watch the following video and think: * How much knowledge the developers needed to build that application? * How difficult it was to build that simple app? * Would you be able to resolve the issues they had? -------------------------------------------------------------------------------- 4. CONCLUSION: AI AS A HELPER, NOT A REPLACEMENT KEY TAKEAWAYS ✅ AI can assist with frontend, backend, and DevOps. ✅ AI-generated code still requires manual review for security, performance, and business alignment. ✅ AI is best used as a co-pilot, not a replacement for full-stack developers. Future Outlook: AI tools will improve, but developers who deeply understand full-stack concepts will remain in demand. Learning full-stack development ensures you leverage AI effectively while avoiding its pitfalls.
Maggie

Discuss with Maggie
Use the power of generative AI to interact with course content

Maggie is a generative AI that can help you understand the course content better. You can ask her questions about the lecture, and she will try to answer them. You can also see the questions asked by other students and her responses.

Discuss with Others
Ask questions, share your thoughts, and discuss with other learners

Join the discussion to ask questions, share your thoughts, and discuss with other learners
Setup
React Fundamentals
10 points
Next.js
10 points
Advanced React
Databases
10 points
React Hooks
Authentication and Authorisation
10 points
APIs
CI/CD and DevOps
Testing React
Advanced Topics