The website displays the minted NFT Artworks by using OpenSea API. I didn't want to implement common components such as a navigation bar, dropdown menus and dialogs from scratch. That way, I was also able to upgrade users from pre-orderings when they wanted to access the complete course. I didn't want to be restricted by a third-party platform. I wanted to cut out most of the middlemen when selling a course. Because whereas Stripe was an effortless integration, integrating PayPal in the course platform was a troublesome experience. Request Feat, Easy React Pack (ERP) This is made for those who are learning react and are tired of doing create-react-app and having to delete those unused files. That's why I wanted to build an own course platform in the first place, because it gave me the opportunity to adjust the course content around the essential ebook as its core. With the following line you will fix all the formatting errors and view those that can't be automatically fixed: Feel free to raise an issue or send us a message at github. Hence another goal was it to learn about the different payment options, how to integrate them in an application and how to serve different needs (credit, PayPal, ) for your customers. In addition, it is empowering to be able to charge customers yourself without relying too much on third-parties. In addition, I can choose the third-party services that are integrated in my platform based on my needs, their pricing and features, and an effortless integration. Often, only using flexbox would be sufficient without even using media queries. Surprisingly though, the complete course package was sold the most for $99. It think that's not unusual, is it? One of these services that handles the payment processing will be mentioned later on. The most efficient one for me was using Digital Ocean. Runs the front-end client app in the development mode. That way, I could easily add them to their pre-ordered packages when they signed up on the platform. I never tried to add anything about SPF and DKIM to prevent landing in spam folders of my subscribers. If a user uses another currency than USD, it would simply calculate the amount by multiplying it with the currency exchange rate. In terms of styling, I kept it simple from the implementation perspective by using the built-in style option provided by Next.js. It is a tough job to keep the ball rolling for the course platform, course content, free and up to date ebooks, open sourcing on GitHub and writing educational articles on my website. The page gives me access to all users on the platform (email, username, sign up date, enrolled courses and revenue driven by user). My long term objective would be to open source the platform eventually. That way, I was prepared in case of any payment issues. All of them are implemented in a reusable way. The courses on the platform are teaching about React and its ecosystem, but I want to generalize the platform's implementation in the future. It goes beyond the basics and teaches best practices in scaling applications. As most of my website readers come from the United States, I wouldn't want to confront them with another currency. But I managed to solve them. Visitthelivewebsite. Since I am travelling through south east asia at the moment, it was midnight for me. Since I hate subscribing to too many newsletters myself, I try to keep the curated content update on a monthly base. Regarding the impostor syndrome, I spoke to others before the launch and they assured me that it was a normal feeling. That's why the ebook already comes with plenty of hands on examples where students have to code themselves. An alternative would have been to create a temporary account on the user's behalf when enrolling in a course.

Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. Nevertheless, even though I have chosen React as my core library, I ended up with enough challenges on the way to learn new things. An interactive website for learning the many naming conventions and formula of chemistry. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. Setup the environment variables as described above. So I need to investigate why it happens. Within the download you'll find the following directories and files: At present, we officially aim to support the last two versions of the following browsers: We use GitHub Issues as the official bug tracker for the Material Kit. TLDR: It takes a lot of effort and energy, but it is a challenging experience which broadens your skill set and enables you to learn new things along the way. In addition, integrating coupons on the platform would allow me to give discounts for people coming from my own website or somewhere else. Initially, I thought it would be because of the droplet size, but it wasn't and all of my other applications re-deploy instantly. Afterward, you can decide on your own if you want to sell your ebook on their platform or take it on another platform. It wouldn't have been possible to provide the whole checkout experience on the course platform. I guess in this moment, the latter outweighed everything else. Youtube doesnt offer such a feature (only on request for high-end customers). Unit and integration tests for the payment business logic, Manually going through the payment flow once in a while and before the launch, making sure that all parameters reach their respective APIs (Firebase, Stripe, PayPal) without being undefined, Fallback email templates if a user ran into a payment issue on the "Troubleshoot & Contact" page, Getting familiar with the Stripe and PayPal dashboards, Setting up an admin page to have an overview of users and courses, being able to associate accounts with courses, payments on the Stripe and PayPal dashboards, and emails, being able to enroll users manually in case a payment was successful, but he/she didn't enroll in the course, First, the course platform uses Google Analytics with the, The third service is not used yet, but I am planning to integrate it in the future. Olympic-Game project for Learning At Workplace stuff for my Campus. By having a third-party course platform, I wouldn't be able to apply those fine-grained rules, would I? In the end, I found the open rate of 40% for both emails great though. So it gave me a better feeling to know that I would have the troubleshoot area when launching the platform and the course. It frightens me too much to introduce another caching layer besides of webserver caching and service workers. A couple of days ago, I launched another addition for the course platform: a partner program. It powers all of my websites, applications and APIs. I wanted to support diversity in the developer community by enabling minorities to take the courses. That way, I hope to support groups of minorities and people from developing countries.

Firebase on its free plan only allows 100 simultaneous connections. All of these components are included in the source code projects of the Taming the State in React when enrolling in the complete course. Open Sourcing: I keep the idea in my head to open source the whole thing eventually. So far, it works as simple as sharing a link to the platform with your own partner identifier. Furthermore, I added more content around the ebook to give students a course feeling rather than just reading a book. Note: this is a one-way operation. This build is for learning purpose only. There was no way around buying an own domain for the course platform. So far, Firebase has given me a seamless integration regarding user authentication. That's why I didn't use Gumroad for the course platform. You will also see any lint errors in the console. Peer-Learning-Platform - A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online evaluations, Peer-Learning - A platform designed as an addition to Google Classroom for students to gain the best out of online education, Portal+ for Greenwich Students, A better portal for a better experience in learning, This is made for those who are learning react and are tired of doing create-react-app and having to delete those unused files. You never know how long these platforms survive, you never know how far the vendor lock-in reaches and you will have a hard time to transfer your audience to another platform eventually. It is growing by more than 30 sign ups per day, but most of the people only sign up for the free ebook coming from my own website. After tweeting about it, a couple of days later someone from Product Hunt approached me and featured the course in the popular section. Collection of free top of the line startup landing templates built using react/nextjs/gatsby. Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. So far, I haven't found out about a neat open source API that would give me the discounts depending on country codes. Since I love to write about educational content, an ebook is the essential part of my courses. You signed in with another tab or window. As mentioned, I upgraded the Firebase plan for the launch day and the following days to handle more than 100 simultaneous users on the course platform. You can read more about the journey in my launch blog post. In the following article, I want to give you a huge brain dump of mine about why I built my own course platform, what I used to accomplish it, what challenges I faced, and what decisions I had to make along the way. Using an own payment solution was one goal of having an own course platform. Apart from the course platform itself, the courses on the platform are in great shape. The costs for an own course platform can be summarized into ongoing subscriptions and one time payments. So far, the only server-side application for my course platform is my payment server powering Stripe for charging credit card payments. An example of how to model and develop using clean architeture, to create a microservice to handle credit cards features from a fintech app, this is a learning exercice. It is hard to achieve both with a limited amount of time. Each change in code or flowchart affects a, Getting Started with Create React App This project was bootstrapped with Create React App. A couple of days ago, I have introduced the ability to unsubscribe from an email subscription. Ediphy. A Next.js and MongoDB web application, designed with simplicity for learning and real-world applicability in mind. If that had been the case, I would have gone with any database to store my users, courses and invoices, because the data structure wouldn't become too complex. Available Scripts In the project directory, you can run: np, KapturaLumina Basic Photography Learning Mobile Applications with Gamification Part of my Bachelor Thesis research in gamification design and implemen, Real clean architecture api example An example of how to model and develop using clean architeture, to create a microservice to handle credit cards fe, React.js: Building an Interface This is the repository for the LinkedIn Learning course React.js: Building an Interface. In an ideal world with unlimited time, the best solution would have been to roll out my own solution yet without implementing the underlying authentication flow from scratch. Another crucial step would be to complete the account registration afterward. Before buying a course, students can read up the course content on a course details page, download a preview of the ebook, read up a several testimonials, and checkout the FAQ section for further information. By having all this information, it became simple to associate users and courses to entities in the database, to email requests or to payments on the Stripe or PayPal dashboards.

INTRODUCTION This is a simple three.js game with main focus of sho, Evvie's Letter Game This project was bootstrapped with Create React App. Nevertheless, at the moment it is a manual process to provide discounts for students from other countries when they reach out to me. It is still a long journey to make it happen, but you can support me if you like the idea. After all, all these problems led me to introduce the sign up redirection as simplest solution for it. That way, I ended up with a couple of colored backgrounds with optional radiants, rotated backgrounds, and SVG background patterns. In the end, it is a challenge to strip out all the specific parts to keep the course platform as a generic platform while having limited time. So I had to figure out how to give access to videos without streaming them myself on the platform, yet without giving them out for free because I would have hosted them somewhere else. Copyright 2016 Universidad Politcnica de Madrid. It is a great solution for offering a product. If users missed it, they would wonder where they can access the course. So when I read about launches of other products, it was hard to accept that people would email their subscribers up to five times for a launch. Runs the app in the development mode. There are so many people out there who recommend great courses and I wanted to provide them an option to earn their share of money with it. In the end, everything boils down to prioritization. As already mentioned, the platform uses Firebase and Vimeo as external services, even though I don't have to touch Vimeo's API. Check the CHANGELOG from your dashboard on our. It comes wit. Since the course platform is a web application, I wanted to use a single page application (SPA) framework or view layer library for it. If you arent satisfied with the build tool and configuration choices, you can eject at any time. It enabled me to have my development sandbox to make mistakes in the early stages. Recently, I built my own course platform to teach students and professionals about web development. There was another crucial decision for the checkout experience. You can check the components here and the foundation here. I created the books on Leanpub and I am grateful for their service. It is difficult to prioritize the time on things that have the biggest impact to sustain my educational content because most often it is for free.

All kinds of resources for Developers in one place. It gets more of an important subject when money is involved. The curated feature set is suitable for small and middle deployments, and you shouldnt feel obligated to use this feature. This Dashboard is coming with pre-built examples, so the development process is seamless, switching from our pages to the real website is very easy to be done. A couple of days before the launch, I decided to hunt my own course as product and prepared all the material for it. Vimeo only allows me to upload and stream videos from their platform with restricting it to my platform domain. But there weren't any issues or bigger discussions in the end.

However we understand that this tool wouldnt be useful if you couldnt customize it when you are ready for it. Open http://localhost:8000 to view it in the browser. You can read more about the idea behind this dashboard here. It would grow my abilities by facing all the challenges that come along the way. I didn't want to end up with any surprises when money was involved. Winds - A Beautiful Open Source, Refuerzo React Formar - 2021 Hooks y custom hooks Contenido Profundizar en el tema de los Hooks useState useEffect useRef useMemo useCount(custom hook, Qwerty Learner English Vercel: https://qwerty.kaiyi.cool/ , https://qwerty-learner.vercel.app/ GitHub Pages: https://, Toiler This is a task tracking app, written with Preact, Go, and Postgres. This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. That way, a course can be kept for free to enable other students to enroll in them without any costs. Luckily it never happened. It is a E-Learning website which provides functionality of registering in any course and watch its related videos and many other features such as Admin Panel, Instructors related functions etc. Open http://localhost:3000 to view it in the browser. If you are going for the plain ebook and don't want any extra material, you can buy it on their platform too. And what steps did I take to have fallbacks in case of payment issues? I worked on both for the last 6 months while having a 9 to 6 job and invested every free minute, weekend and holiday in it. For instance, what happens if the student has an account already, but didn't sign in before, and now needs to merge the course into his/her existing account? Tailored Solution: I wanted to have an own platform for my content where I am able to make all the fine-grained decisions. On the course platform though, you would get a bunch of more references to reading material when enrolling in the bare essentials. It is simple to implement things such as SSL or an own database by using its plugin system. Online Learning Management System using React & Redux. Two weeks before the launch, I approached two potential hunters on Twitter. Re-deploying my applications on Dokku gives sometimes downtime with a 502 bad gateway. Basically, it is CSS in JS with a pre-loaded styling framework. email address and user id on the platform) that I would need to resolve certain issues. Furthermore, there was no payment problem at all even though I would have been prepared for the case. If not, see http://www.gnu.org/licenses. Launches the test runner in the interactive watch mode. The course content that is shown on the overview and detail pages is only one large JavaScript blob. The article might give you a couple of valuable insights into launching your own platform. However, I hand picked those two hunters as the best fit for my course. Create account in Mongo Atlas and create cluster. This project was bootstrapped with Create React App. I wanted to make the decisions when it comes to supporting students that cannot afford to pay for the courses. Having Google Analytics on my own website, it could be considered as too low when announcing a new product. In addition, as already mentioned in the article, I host all of my websites, applications and APIs on Digital Ocean.

For instance, users can purchase more than one license. Even more when money is involved. I didn't do any user testing regarding what content should belong on the overview or detail page. A Preact task list app, mainly for the purposes of learning Preact. I would want to avoid all the sales stuff, if I could do it, but after all if you make a living out of it you have to accept how the business world runs :-/. Pricing & Fees: Many third-party platforms come with a membership pricing model or/and high fees when your course is sold. You signed in with another tab or window. Independence: The reasoning behind it is the same as for having an own website with an own domain rather than hosting your content on third-party platforms or using their third-party APIs. Another requirement was to make the platform accessible on tablet and mobile as well. I created two firebase projects for development and production environments. It took me already 4 days to write up this article to get people excited about the project. It wasn't too difficult to add the currency feature to the course platform. Even though the launch went with several launch stages, the number of simultaneous users on my platform never went over 47 for the initial release and later on never over 74. See the section about deployment for more information. It was a one time investment. Leanpub makes it effortless to self-publish an ebook and they offer plenty of options to write it. I think it is too bold after all to just reach out to people with whom you never connected before. That's because there is no real server-side application. Before deciding to integrate PayPal as well, I read up several resources to figure out how much people would want to use PayPal over credit card. Ediphy Editor is an open source e-learning authoring tool to create different types of resources (web documents, slides and more coming up soon). But it goes far beyond it. They didn't only challenge my abilities to code (which wasn't the hardest part), but also in challenging myself by creating, launching and advertising a product. L, Why? I would need to figure out how to solve it. This time, I wanted to ship the course platform as soon as possible, because my second course waited to be launched on it. I am not sure what would have made me more happy at this point in time; spiking upvotes or the comment by Dan. You signed in with another tab or window. So what's the motivation behind building your own course platform? Before launching the platform along with the course, I thought it would be a good idea to setup a "Contact & Troubleshoot" page. Last but not least, I can manually upgrade the packages of students. Furthermore, my interested people wouldn't end up from the beginning on a paywall, but on a personal blog post that tells the story behind the product. However, it was exceptionally hard to endure and if I hadn't promised the course in advance on social media and worked every free minute on it over the last 6 months, I might have just not launched it. Every element has multiple states for colors, styles, hover, focus, that you can easily access and use. Let's learn React by building react within 100 lines of code. Maybe Dokku is not the newest kid on the block, but I like its simplicity to get people without much experience started in this domain. Love my Campus. I guess it could be a valuable option for everyone to get an independent course platform up and running. See the section about running tests for more information. Runs the app in the development mode. Furthermore, people started to translate it to Portuguese, Russian, Spanish, Italian and Korean.

Third, I can provide students who cannot afford to pay for the course an option to access the course without going through the payment flow. Learn more about bidirectional Unicode characters. It helped me to keep the first iteration of the course platform as MVP. Open http://localhost:3000 to view it in the browser.

I didn't mention his name here because I am not sure if his name should appear in this article. But that was only $11.99 for a year, because it wasn't too fancy. Before, people used both payment options rather equally. Visit our wiki to see all the available Ediphy Editor instructions. If people were interested in the course, the article would point them to the course platform. It was tough though to grow such a mailing list and it was a lot of effort that I have put into it over the last 18 months. I tried to come up with different thresholds for desktop, tablet and phone and stored them in a constants file. The course offers plenty of foundational and advanced knowledge about the topic. The LinkedIn Learning course React.js: Building an Interface. Were there any hiccups during the launch? This project was bootstrapped with Create React App. I compared YouTube and Vimeo to solve the problem of video streaming. I wanted to avoid both by having an own platform. For now, it is a manual process by using an email template as well. So I am always able to test the production ready application when deploying it to my staging instance. 24 hours before the launch, in the middle of the night, I panicked because I didn't have any assurance that the server wouldn't break in case of too many users hitting the platform. It made me happy! If I had decided to go with Passport.js instead of Firebase for my user authentication process, I would have implemented it as an authentication server using any library such as Express, Hapi or Koa. Most of them knew the feeling before launching something themselves. In general, the platform should be more robust in the future. I want to thank you for all of your support at this point! They can get exceptional high especially when using PayPal. Over the last few years, I have written two ebooks about it and released a course platform for learning React and. Docs Website Playground Library Usage On-Premise The Un, Next.js MongoDB An Next.js and MongoDB web application, designed with simplicity for learning and real-world applicability in mind. I would have used Passport.js along with a Koa, Express or Hapi server to manage the API requests. But I must admit that the payment flow was the feature that was tested the most on the course platform. So it is a great investment for everyone to learn about those things when building web applications with advanced state management.