This time I created something new, first, here’s the picture! kaiyi teaches me to be a Qwerty Learner, look how happy we are.
Hello, I can't see the content in the picture, what’s in it? The image shows two men, on the left is kaiyi, and on the right is the author Xin Bao, sitting side by side at a table, each with a computer covered in stickers in front of them, both smiling happily. The image also has text, "kaiyi teaches me to be a Qwerty Learner," with a subtitle in small text, "15K Star open-source project, MarsCode takes me flying."
Original video link: Kaiyi & MarsCode teach me to be a Qwerty Learner - Programmer MVP01
Initial Thoughts: Programmer MVP#
What comes to mind when you mention MVP?
In the internet field, MVP stands for Minimum Viable Product, which refers to validating a demand with minimal investment. The product itself is a simple prototype, lacking many details, usually used to quickly validate user feedback and market feasibility. For example, if we want to create an MVP for an online mall in a certain field, clearly at the prototype stage, we don’t need to consider login risk control, infinite waterfall flows, or product coupons; the core demands are product display and product purchase.
In the NBA arena, MVP stands for Most Valuable Player, representing outstanding overall performance and excellent statistics, embodying an indisputable honor.
Today, I’m trying to start a new food show format: "Programmer MVP." As the name suggests, it refers to MVPs in the programmer field, a double entendre, indicating both the creation of minimum viable products by programmers and outstanding individuals among programmers. I hope to work with them to create simple products, validate each other's ideas, and help more people fall in love with a certain field or product, uncovering more ideas.
This Time's Programmer: kaiyi#
kaiyi is the host of the Web Worker podcast, working at a well-known international company. He has a 15k star open-source project, which is also a user product, Qwerty Learner. His code is well-written, user experience is good, and his development thinking is very clear, a prominent programmer MVP.
This time I invited him to teach me how to create an MVP version of his proud work.
About Qwerty Learner#
What is this strange word? It looks like a word typed out by sweeping the keyboard. I asked kaiyi, and he said it’s a proprietary term, meaning keyboard layout or keyboard.
This idea originated from kaiyi's school days, practicing English through typing. The product itself has a very large audience, and many people enjoy it. He has also added a lot of functional features: pronunciation, vocabulary, typing speed, customization, etc. It has already become a very complete product.
AI Tool: MarsCode#
A product that has become popular both domestically and internationally, MarsCode has a product matrix that includes a VSCode plugin similar to Copilot and an online IDE version that runs in containers.
By accessing a browser page, online coding can be achieved, regardless of Node, Python, or front-end environments; it can even run and be accessed on a HarmonyOS tablet.
It’s quite interesting; who says an iPad can’t be used for work? This has been realized, and it’s still compliant in a domestic barrier-free environment. The tools chosen here are not exclusive options; any of them can be used.
Let’s Debug the Code Together#
While it’s called debugging, it’s more about having kaiyi collaborate with MarsCode to implement a simple demo.
Quickly Start a Project#
In MarsCode, select the JS framework React to quickly start a project template. A few seconds later, the page loads, and the dependencies are installed. Clicking the top Run will run the default rsbuild react project.
You can communicate with AI at any time, essentially making it an AI IDE.
This step has already eliminated many disagreements. What framework should I choose? How to set up the template? How to set the running method? In an instant, the answer is given: rsbuild + react + npm run dev. While others are still choosing project templates, I’ve already got mine running.
What Does the MVP of Qwerty Learner Need?#
The complete version of Qwerty Learner has many features; which ones does this MVP need to implement?
- Do I need to prepare a dictionary for the vocabulary? Do I need pronunciation and Chinese translation? No, it’s not important.
- Do I need to prepare design styles for the page? Not important; beautification can be done separately.
- Do I need to prepare animations? No, that can be done separately.
- Do I need to add typing statistics? No, it’s a minor feature.
By stripping away these extra features, the functionality of the MVP version is already clear:
Input a word on the page; if the user inputs it correctly, it shows green; if incorrect, it shows red. After inputting a word, it automatically displays the next word.
The rest are additional features.
How to Take the First Step#
Now that we have AI, many things have become simpler. Just ask MarsCode:
- Generate some words for me, including English and Chinese, generate 10. OK, the words are ready.
- Prepare an app for typing, displaying a word on the page, listening to user input, judging user input, and showing red and green.
- If all inputs are correct, automatically jump to the next word.
If the data returned by AI meets expectations, just click insert to add it to the current page.
If any small problems arise, you can ask AI to modify it at any time, and you can also have it generate comments and unit tests. Because this feature isn’t complicated, it can be quickly implemented.
When is it Best to Beautify the Styles?#
By default, the page is very rudimentary in its original style. I’m a bit eager to beautify the page, but kaiyi says there’s no rush; the core functionality is not the top priority for the page.
Through the previous rounds of communication, the logic displayed in the code has gradually stabilized. At this point, a new conversation can be started to let AI try to beautify the page.
Here’s a small knowledge point: AI’s multi-turn dialogue has its limitations, and a lot of mixed code can quickly consume the context tokens.
A very suitable solution is: after completing a requirement, start a new dialogue and actively end the historical dialogue. In this MVP project, once we have perfected the logic for handling user input, we can then focus on styles; the two are not closely related.
Here is the design style for the first version of this MVP by MarsCode.
The effect is quite simple, but usable and easy to use. It’s not unpleasant at first glance.
Trying to Share#
Collecting user feedback is very important. Thanks to MarsCode’s complete network functionality, you can easily send preview links to others for quick feedback.
Avoid getting lost in technical details and losing control of the overall picture; this is something that always needs to be kept in mind by technical people.
Later, we added a feature that kaiyi is proud of: keyboard feedback, playing a crisp keyboard sound with each keystroke, which is a great effect!
Exploring Other Features#
With AI assistance, you can quickly read code, add comments, extract functions, and supplement unit tests.
Summary Statement#
Kaiyi spent a long time from the initial idea to the birth of the first version, partly because he didn’t know what the final product would look like, and partly due to unfamiliarity with front-end skills, needing to learn and then practice.
Now, with front-end skills and AI assistance, in just a few minutes, we’ve got this MVP version of Qwerty Learner up and running, which brings us joy and more thoughts.
- MarsCode’s online IDE allows you to write code anytime and start a new project at any time.
- AI assistance acts like a teacher, allowing you to read and learn from others' code, add comments, and supplement unit tests, leading to a deeper understanding of knowledge.
- On the other hand, quickly validating ideas and rapidly iterating is crucial; a product in your mind won’t generate value, and taking the first step is very important to avoid perfectionism that hinders progress.
- Make friends with AI, learn from it, understand its strengths, and recognize its weaknesses to bring your ideas to fruition faster.
This concludes the first episode of Programmer MVP. In this session, we chatted and coded, and we had a great time, feeling relaxed and not tired, quite enjoyable.
We have more topics planned for the future, so stay tuned.