Learn how to use React 19 and AI LLMs to code an AI-powered Code Explainer App from scratch.
We’ll design the app, configure an Express.js backend, set up a REST endpoint that talks to an LLM, and then integrate everything into a modern React 19 app (with Vite + TailwindCSS).
Course developed by @tapasadhikary
⭐️ Resources ⭐️
- Code: https://github.com/tapascript/codesplain
- Join Tapas's Discord: https://discord.gg/ux9BchWEW3
- Nebius AI Studio: https://studio.nebius.com/
- Open AI API: https://platform.openai.com/docs/overview
- React 19 & TailwindCSS: https://github.com/atapas/code-in-react-19
❤️ Try interactive React courses we love, right in your browser: https://scrimba.com/freeCodeCamp-React (Made possible by a grant from our friends at Scrimba)
⭐️ Chapters ⭐️
- 0:00:00 Building With AI
- 0:01:51 What are We Building?
- 0:03:06 App Design
- 0:04:22 Configure AI LLMs
- 0:09:24 Configure Express.js Server
- 0:18:29 Create Explain Code REST Endpoint
- 0:25:01 Integrating LLM with API
- 0:35:15 Test API with Postman
- 0:39:04 React with Vite
- 0:42:24 Component Architecture
- 0:45:01 Heading
- 0:46:40 Explain Form
- 0:51:07 React 19 useActionState & Server Action
- 1:00:37 Code Explanation & Error
- 1:01:41 Formatting Output
- 1:03:46 Tasks & Bonus
? Thanks to our Champion and Sponsor supporters:
? Drake Milly
? Ulises Moralez
? Goddard Tan
? David MG
? Matthew Springman
? Claudio
? Oscar R.
? jedi-or-sith
? Nattira Maneerat
? Justin Hual
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news