I entered the Web Development world thinking I was set with what I knew and boy was I wrong! I love learning, whether it's through a book, an online course or through making tons of mistakes. But there might just be something I like even more, starting new side projects! A while back I started a side project to put what I was learning to practice and maybe start a business.
Introducing, Learnwind
I am building my very own online learning marketplace called Learnwind! My goal is to have a course marketplace like Udemy with a robust course authoring tool like Teachable/ Kejabi, and a learning portal that will streamline knowledge transfer.
My first commits in the frontend repo predate the existing repo's initial commit of March of 2022. Needless to say, I’ve been working on this for a hot minute. I'm excited to finally start sharing the hard lessons I've learned along the way.
Tech stack at a glance
The frontend
React is a technology that I truly enjoy working with. It is a tool that I learned in my code bootcamp and have experience using in my professional work. Although it's not perfect and it’s nothing new, it works. That said, one of the most difficult decisions I had to make while starting Learnwind was how to build with it. I went back and forth, questioning whether I should use a meta-framework like Next.js or Remix, or a simple approach with create-react-app, or Vite. After switching between Next.js to CRA and back, I finally settled on a simple Vite setup that worked best for me at that time.
When it came to styling, I decided to use Chakra UI because I had previous experience with it and it allowed me to develop features as a solo developer quickly. I found that it had a good balance between flexibility and consistency, which was important for creating a simple yet modern user interface. Its core theme and prebuilt components let me build fast.
I plan on doing some data visualization, so I chose Echarts for its wide range of chart types and customization options. I want to create impactful charts that will help instructors learn and gather insights from their courses and students.
When it comes to state management, I have plenty of options but I have a clear strategy in mind. I plan on using URLs, specifically query strings, to handle most of the state of my application. URLs are a good choice for managing state as they provide a good way to easily share pages with others. However, there may be situations where I need a more temporary solution that is capable of handling more complex states. This is where Zustand comes into the picture. Zustand is a powerful tool that allows me to manage state in a flexible and efficient manner.
Since this is a single-page application, it means that all the necessary data will need to be fetched on the client side. This will be accomplished by utilizing React-Query with Axios all wrapped in custom React hooks for portability. React-Query will take care of loading and error states while caching successful responses. This will result in a smoother developer experience and a more responsive user experience, which is crucial for the success of the project.
Backend stack
This isn’t a M.E.R.N. stack build. You’re just not going to be hired in the US with that.
When it came to choosing a backend API framework, I decided to go with NestJS instead of just Express. I enjoy the simplicity that Express provides, but for this project, I wanted something more robust, structured, and opinionated. That's why I chose NestJS, which offers all of those things and is similar to the ASP.NET framework, which I have experience with. I believe that prioritizing structure and predefined opinions will lead to a more successful outcome, and I'm excited to invest time and effort into learning this more complex framework.
I will be using Prisma as my Object Relational Mapper (ORM) for this project, which will be integrated with a PostgreSQL database. Prisma will generate type-safe code based on my data model, which can help prevent errors and make development faster.
For authentication, I’ll be using Firebase Auth initially and see how it performs. Truth be told, I am also exploring alternative options like Lucia Auth. For storing images, videos, or other files, the plan is to use Google Cloud Platform’s (GCP) Storage services. This will help ensure reliable and scalable storage for Learnwind’s assets and that of instructors or content creators.
Here’s a quick, high-level, Entity Relational Diagram of the app:
What's next?
Learnwind is my passion-driven endeavor to learn all aspects of Web development and ship impactful features for students and instructors! I envision a vibrant course hub like Udemy and Coursera, sprinkled with the ingenuity of Teachable and Kejabi's course crafting tools.
As I continue forward, there will be twists and turns, this journey will be a blend of learning, personal growth, and the thrill of nurturing side projects. This blog series is going to be a candid account of successes, struggles, and the tech decisions that have fueled Learnwind's progress. So, stick around for updates – Learnwind’s journey is just getting started, and you won't want to miss it!