Introduction#
As part of my work with AI applications, I used an AI code agent to help create a React quiz website about meditation. The goal of the site was to let users answer questions from a set of meditation worksheets. The quiz does not require login, but it still saves the user’s answers locally in the browser so they can return later and review what they answered.
For this project, I used Codex, an AI coding agent, to support the development process. Instead of only asking for general advice, I used the agent as a practical development partner that could inspect the project folder, create files, write React code, install dependencies, test the build, and help solve issues during the workflow.
Workflow#
The workflow started with sharing images of the meditation questions. Each question had answer options, and the correct answers were marked with a red X. The first step was therefore not just coding, but also interpreting the content from the images and turning it into structured quiz data.
After that, Codex checked the project folder and found that it was empty. Based on that, it created a new React project using Vite. The site was built as a client-side React application, with all quiz questions stored directly in the React code. Each question included the question text, answer options, and the correct answer.
The main features created were:
- A quiz flow where users can answer one question at a time
- Navigation between questions and sections
- Immediate feedback after answering
- A review page where users can see their saved answers
- A score overview showing how many answers are correct
- Local storage so answers are saved without needing an account
- A reset option to clear answers and start again
After the first version was created, Codex also helped test the project. There were some issues with running npm in PowerShell because scripts were disabled on the system. Codex solved this by using npm.cmd instead. There was also a Vite build issue caused by a Windows permission problem, which was fixed by running the build with the needed permissions.
Finally, Codex started a local development server so the site could be tested in the browser.
What I Learned#
This project taught me a lot about how AI code agents can be used in a realistic development workflow. Some of the main things I learned were:
- How an AI code agent can help turn an idea into a working React application
- How image-based content can be transformed into structured data for a quiz
- How local storage can be used to save user progress without a backend
- How React components can be organized around quiz logic, review screens, and user interaction
- How AI can help with both writing code and solving development environment problems
- How important it is to still review the result, because the AI may need corrections or clarification
One of the most useful parts of using Codex was that it did not only generate code in isolation. It worked directly inside the project folder, created the needed files, installed packages, ran the build, and checked whether the local server responded correctly. This made the workflow feel closer to working with a development assistant than just using a chatbot.
Challenges I Faced#
Even though using Codex made the development process faster, there were still some challenges.
The first challenge was reading the questions from the images. Some parts of the photos were slightly blurry or difficult to read, so there was a risk that small text details could be interpreted incorrectly. This means that even when AI helps with transcription, the final content still needs to be checked manually.
Another challenge was making sure the correct answers were transferred properly. Since the red X marks represented the correct answers, the quiz logic depended on interpreting those markings accurately. A small mistake in this step could make the quiz give wrong feedback to users.
There were also technical challenges. PowerShell blocked the normal npm command because of script execution restrictions. This is a common issue on Windows, and it showed that AI-assisted development still requires understanding the local environment. The Vite build also needed permission handling before it worked correctly.
A larger challenge is that using an AI code agent can make development feel very fast, but it can also hide some of the complexity. It is important not to just accept the generated code blindly. I still need to understand how the React components work, how the state is saved, and how the application could be improved later.
What Could Be Better#
The site works as a basic quiz application, but there are several things that could be improved.
First, the questions could be moved out of the main React file and into a separate data file. This would make the project easier to maintain, especially if more questions are added later.
Second, the site could include a better final results screen. Right now, users can review their answers, but a dedicated completion page could give a clearer summary when the quiz is finished.
Third, the design could be improved further with more animations, better mobile refinements, and maybe a calmer visual style that fits the meditation theme even more.
Another improvement would be adding the option to export results or save multiple quiz attempts. Currently, the site saves only the latest answers locally. If users wanted to track progress over time, the app would need a more advanced storage structure.
Finally, the image-to-question workflow could be improved by first writing all questions into a separate document and checking them carefully before coding. That would reduce the risk of small transcription mistakes.
Why This Project Matters#
This project was valuable because it combined React development with AI-assisted coding. Instead of only learning about AI tools in theory, I used one to build something practical.
It also showed that AI code agents can be useful for more than just generating snippets. Codex helped with project setup, implementation, debugging, testing, and running the application locally. This made the development process faster and more interactive.
At the same time, the project also showed that AI does not remove the need for human judgment. I still had to define the goal, provide the content, check the result, and think about what would make the site useful for real users.
Conclusion#
Overall, using Codex to build a React meditation quiz site was a useful learning experience. It helped me move from an idea and a set of photographed questions to a working web application with saved answers and a review function.
The workflow showed me how powerful AI code agents can be when they are used as development partners. They can speed up repetitive tasks, help solve errors, and create a strong first version of an application. However, the developer still needs to guide the process, check the content, and understand the code.
This project gave me more confidence in using AI as part of a real development workflow. It also helped me see both the strengths and limitations of AI-assisted coding, which is important when building more advanced applications in the future.