This is a sample of an open online course provider aimed at professional adults and students. It has a teacher section where you are able to create new courses and a Student section where you are allowed to buy and take courses
Project Purpose and Goal
I wanted to understand how to separate roles for different types of users i.e Teacher and Student and how to implement a protected Route system for Next.js. This was a fun project for me and would serve as a blueprint for any future MOOC project I have in the future
Web Stack
I used Next JS for the Frontend and Firebase for authentication and storage
Thought Process
I started off using Writemaps and Webflow for site mapping and wireframing. Since the format was straightforward, I didn't spend much time on the actual design before transferring it to code. The process from authentication to final checkout is very straightforward, and you don't even need to authenticate to be able to see the list of products. I made use of Next Js due to the benefit of SSR to help SEO and the fact I could write the backend and frontend under one umbrella
Lesson Learned
The most important part of the project was that I learned how to create Protected routes for Next JS since I already knew how to do it for React.