My Self-Taught Web Dev Journey: From Zero to Building an AI app in 1 Week

After spending two months teaching myself how to code and creating MindPal from scratch, I wanted to share my journey and the resources that helped me along the way. If you're curious, try my built-in-one-week AI app here https://www.mindpal.space/ for free. As a student who majored in Vietnamese literature and later pursued a degree in Business Administration, the world of programming always felt like an alien realm to me. I used to shy away from anything coding-related, convincing myself that it was irrelevant to my academic and professional pursuits. That changed when I co-founded my first startup, Mount2 Speak. We had to develop an automatic feedback software for English-speaking users from scratch. Being inexperienced in software development, I found it challenging to communicate and collaborate with the engineering team, as well as to handle business-related tasks such as pricing, finance, and partner negotiations, which were crucial to the product's success. I realized that if I wanted to continue working in the startup world, I needed to upskill myself. Upon reflection, my fear back then wasn't very rational. I wasn't afraid of not being able to do it, but rather afraid of the unknown, as coding was unfamiliar compared to what I typically did. However, looking back, I taught myself design in a similar way, going from a novice to a designer. Additionally, I have some important advantages that will help me learn coding effectively: (1) I previously worked on a web development startup, so I understand the end-to-end process of building a web app, (2) I worked as a UI/UX designer and collaborated with Frontend developers, giving me a solid foundation of knowledge to delve into web programming, (3) I have an excellent mentor, Tuan Mai Quang, who was the CTO of my previous startup. He has real-world experience and has gone through many trials and errors, successfully turning a rough idea into a tangible web app (Mount2 Speak), and most importantly, (4) I have MindPal, a real startup idea that I want to make a reality, and it will provide me with the opportunity to practice coding in a real-world setting. Encouraged by my close friend, I decided to pursue the path of learning to code. Within two months, I was able to code MindPal, my first full-stack product, and I coded 90% of it. Two months may sound like a short time, but if I had studied more intensively, it could have been even shorter. I found that I learned quickly and effectively, partly due to my background and partly due to my mentor's guidance and practical learning path. I believe this is a good learning path for anyone interested in or starting to learn software development, so I will share it below for those who are interested. To provide a general overview, I will not go into too much detail but explain why it is essential to learn and share my personal experience. Before delving into the specifics, it is crucial to understand the basics of how the internet and websites work, as well as the fundamental process of coding a web app, the components involved, and the different roles in a team. I skipped over this part since my experience working on a startup has provided me with this knowledge. Also, it is important to determine your learning goals - whether it is to gain knowledge or to code a web app for a startup like me - as this will shape your mindset and level of effort when learning. (1) First, you need to learn the languages - HTML, CSS, and JavaScript. HTML will help structure the content of your website, CSS will add styling (font, color, shape, size, position, etc.) to enhance the appearance, and JavaScript will help turn your website from static to dynamic and allow users to interact with it. In my experience, this is the longest part of the learning process (taking up 50% of the time - perhaps because it's the beginning and I needed more time to get used to it), but it's not difficult at all. If you're new like me, it might seem overwhelming at first due to the new concepts, but don't worry. My advice for learning these languages is to focus on understanding them and knowing their capabilities, rather than trying to memorize everything. When you're coding, you can always search on Google, but it's crucial to know what to search for. Here are the courses I took: - Free HTML & CSS course at F8 (in Vietnamese): https://fullstack.edu.vn/courses/html-css - Free basic JavaScript course at F8 (in Vietnamese): https://fullstack.edu.vn/courses/javascript-co-ban - Free HTML, CSS, & JavaScript from scratch course at Educative (this course is relatively short, only 10 hours, and I used it to review after completing the first two courses): https://www.educative.io/courses/learn-html-css-javascript-from-scratch (2) By this point, you may have already coded a simple web app. However, as you code, you'll quickly notice a lot of shortcomings, especially when your web app starts to become more complex. The most headache-inducing part is usually CSS, as every small element requires styling, and your CSS file can quickly become hundreds of lines, making it difficult to manage. Moreover, there are many pages, features, and events that need to be taken care of in your app. That's why it's important to learn some best practices to help you code more efficiently. - To help you create a leaner and cleaner web app, you should learn the ReactJS library. You can learn it at https://react.dev/learn and in this video https://youtu.be/SqcY0GlETPk. If you don't have much time, you only need to learn these four topics: Quick Start, Think in React, Props, and States. Later, as you code, you can learn more advanced topics. Don't hesitate to learn ReactJS, because once you learn it, your coding will be much faster and more convenient. - However, ReactJS doesn't handle some of the "back-end" parts (such as configuration, router, etc.), so you should also learn NextJS, a JS framework built on top of React that helps you set up and deploy web apps faster. You can learn it at https://nextjs.org/learn/. - After learning ReactJS and NextJS, you should also learn TypeScript, which is essentially JavaScript but with added "types" (meaning you'll need to declare the type of everything you code), to help you code more securely and with fewer bugs. I didn't learn TypeScript myself, but reading the code is often enough to understand it. - At this point, you're doing well, but do you remember me saying that CSS can be a very painful part of coding? This is not because it's difficult, but rather because it's long, has many components, and is complex. To alleviate this CSS pain, you can look into existing CSS libraries (essentially templates) such as TailwindCSS. You don't need to learn this; if you already know CSS, just read a bit of the documentation at the official library: https://tailwindcss.com/docs/. (3) The topics you've just learned mostly cover Frontend - the user-facing side of the application - but do not handle the backend operations such as interacting with a database. NodeJS is a framework that allows you to accomplish these tasks solely with JavaScript. You can learn more about NodeJS at https://nodejs.org/en/docs. (4) When coding a real-world project, you'll need to use various libraries and frameworks (collectively called packages) like NextJS, TailwindCSS, and other open-source libraries. Downloading, processing, and managing these packages can be a daunting task without a package manager. That's why you need to learn NPM - Node Package Manager: https://docs.npmjs.com/. (5) For most complex web applications, you'll need a database to store your data. PlanetScale is one option for data storage, and you'll also need to learn a language to communicate and interact with the database, which in the case of PlanetScale, is SQL. Additionally, to exchange data over the internet, you'll need to learn RestAPI. If you're developing a web application based on ReactJS and want to use RestAPI, you'll need to learn the JavaScript library Axios. Besides RestAPI, there are other protocols such as GraphQL and tRPC. I chose to learn and use tRPC as it fits the tech stack I use for web app development - the T3 stack. Since I'm using the T3 stack, it's also essential to learn Prisma - a library that helps make data modeling more intuitive, efficient, and secure. - I learned SQL in "Database Concepts & Skills for Big Data" at my university. - I learned RestAPI at https://youtu.be/rtWH70_MMHM. - I learned Axios at https://youtu.be/6LyagkoRWYA. - I learned Prisma at https://youtu.be/RebA5J-rlwg. - I learned tRPC at https://youtu.be/UfUbBWIFdJs. - I learned the T3 stack at https://youtu.be/J1gzN1SAhyM. (6) A real-life coding project can be very complex, with multiple iterations, hundreds of bugs, and situations where you want to revert to an old version of the code or add new code without risking breaking everything. This is especially challenging when working with other people, as everyone may have their own coding style and merging everything together can be difficult. This is where Git comes in - a version control system that helps you manage different versions of your code over time and collaborate better with others. You can learn more about Git in this video: https://youtu.be/tRZGeaHPoaw (7) By now, you have all the skills you need to create a sleek web app like MindPal. The next step is to deploy your app on the internet so that anyone can access and use it. You can deploy your app on Amazon Web Services or Vercel. In my experience, Vercel has a better user experience, so that's the platform I use. You can learn how to deploy your app in just 5 minutes by watching this video: https://youtu.be/_8wkKL0LKks. With this knowledge, I was able to complete the backbone of MindPal within one week, and then focused on testing with users for feedback and continuous improvement. After two weeks, MindPal had gained nearly 200 initial users, a significant milestone for me. However, this was just the beginning. As MindPal grew and expanded, I realized that developing a web app was not just about completing it, but also about continuously improving it based on feedback, optimizing it, and scaling it up to run smoothly, quickly, and stably. This included adding cache and scaling the database, as well as learning more about infrastructure concepts such as load balancers, reverse proxies, and CDNs. The journey of learning and developing for both myself and MindPal will undoubtedly be a long one, with many challenges ahead. However, I am no longer afraid. Looking back on the past two months, from being someone afraid of coding to being able to create a fairly complete web app, I have gained more confidence in myself. If I could do it two months ago, I can definitely do it now. Moreover, now that I have MindPal, my learning has become much more convenient. I only need to import materials (either YouTube videos or PDFs) and I can chat with MindPal about that material (asking anything, and MindPal AI will answer based on the information in that material), automatically create summaries for an overview of each material, automatically create quizzes or questions to check my understanding after each lesson, and take notes or create flashcards for easier reviewing in the future. MindPal helps me learn more effectively, and when I learn more effectively, I can develop and improve MindPal even more. It's a win-win for both me and MindPal. Therefore, I am very excited for the long journey ahead! If you share my excitement, please give MindPal a try at https://www.mindpal.space/ for free and witness its development journey with me! We also have a Discord channel where I will update about MindPal in real time as well as share our learning resources online together here https://discord.gg/hyDe59aJV5 Hope to see you there!