Web application for learning programming

Our goal was to create an educational tool that is not only engaging, but also scalable and easy to use - for both users and administrators. By integrating with ChatGPT's API, our application automatically generates educational content, which greatly speeds up the production of materials and increases their variety.

Challenge

The goal of the project was to create a scalable platform that:

• Allows creation of educational programming kits.
• Automates content generation using artificial intelligence.
• Provides a responsive and intuitive user interface.
• Allows progress analysis and identification of areas requiring further learning.

The biggest challenge was to integrate AI technology in such a way that content would be generated in bulk, automatically, and at the same time of appropriate content quality.

Solution

The Boring Owl team designed and implemented a fully functional educational application using a technology stack:

• Frontend: React.js with Next.js framework, providing a dynamic and responsive interface. Styling based on styled-components.
• Backend: Node.js + Express.js along with Strapi CMS, acting as a content management system and application engine.
• Database: GraphQL-based solution for efficient data exchange between frontend and backend.
• AI integration: ChatGPT API to enable automatic generation of educational content (questions and quizzes) from the admin panel.
• Hosting and CI/CD: Vercel for fast and seamless deployments.

Key Features

• Creation of fiche sets with questions and answers.
• Automatic content generation by ChatGPT based on selected tags.
• Test mode with immediate feedback and analysis of results.
• Registration/logging in via email or social media.
• Responsive interface allowing learning on any device.

Results

• Cost reduction by automating the content generation process
• Significant time reduction in creating and updating educational materials through integration with ChatGPT.
• High responsiveness and application accessibility on various devices.

Summary

A web-based platform for learning programming is a great example of a modern educational tool that combines user-friendly design with powerful AI-driven features. With smart content generation and an intuitive interface, it enables users to effectively build their coding skills anytime, anywhere.