MacLearn is the best online full-stack platform for learning web development with detailed courses on HTML and CSS, as well as complete references and a powerful code playground. I’ve been developing this platform for around 2 years, and I’m using this project to rewrite the entire app to integrate backend and advanced features with Next.js, MongoDB, and other modern technologies.
Added interactive quizzes for every unit in the HTML and CSS courses on MacLearn! You can easily access these quizzes from either the sidebar, article navigation buttons, or the course homepage. You can go back/forward between each question and select the correct option. Once you finish the quiz, a result page will display your accuracy, whether you passed/failed, and the correct answers for each question. Most of the logic is the same as the old version’s, so all I did was copy the quizzes’ JSON data and the actual quiz over and modified some Tailwind and TypeScript stuff and improved core logic and state management but overall it was pretty easy and straightforward. The navigation and pagination were actually surprisingly difficult and took me some time to figure out because of all the different types, params, and stuff but I ended up finishing everything! Also added some icons and updated styling to improve UI and UX.
Log in to leave a comment
Finally integrated the MacWeb account/auth system to MacLearn as well as a working backend and database system. There’s now a sign in button on the nav bar that redirects you to the main MacWeb landing page, where you actually log in/sign up, and redirects you back to MacLearn logged in. This is basically an identical system with the one I built with MacVG a few weeks ago, so I only had to copy most of the files and edit a bit of stuff to make sure the cross-domain auth cookies and other annoying auth stuff actually work properly and sync to the database too. You can click on your profile picture in MacLearn to view your profile, switch light/dark mode, and log out. Logged in users can also favorite/unfavorite articles that are pinned on the homepage. Updated styling and dependencies as well. Added environment variables for auth stuff too.
Log in to leave a comment
Added a powerful and fast nav bar search for all articles across the HTML, CSS, and references courses that displays a list of links to the results that makes navigation across the whole platform and so many different pages a lot easier. Changed article routing params to slugs (words) instead of number ids so the URL is more readable and it boosts SEO as well. Added a share modal that pops up whenever you click on the article share button that shows a link copied message so you can easily share the article link with other people. Updated footer with new and fixed links and updated a bit of styling as well.
Log in to leave a comment
Awesome sauce🐵
Added embedded interactive labs with different tabs for HTML, CSS, JS, and output to articles so you can easily try out the code, experiment with it yourself, and immediately see the output to make learning more effective. Also added code snippets so code pops out more. Added the code playground which is basically just a glorified bigger version of the interactive lab mentioned earlier. Added a bunch of images for the courses so images now work and help with understanding better. The core logic for a lot of these components was basically copied from the old build, and all I had to do was write responsive Tailwind utilities and ensure everything works properly with TypeScript and Next since everything’s frontend React code.
Log in to leave a comment
Added a sidebar with all the article links in the selected course listed, grouped by different units for super easy navigation from the article. Also added proper styling for the basic article page layout from the old React Router app so the article is actually readable and usable. Added title, favorite/share/feedback icons (currently only feedback works), and other article metadata to the header as well. There will be interactive labs but they’re replaced by the lab placeholder for now. Also added back and next navigation buttons to jumps to the previous/next article easily after you finish reading the current one. Updated other styling and fixed Inter font not working.
Log in to leave a comment
Reorganized some files and folders so instead of hard coded folders for each course the main course tabs now generate content, fetch data, and generate SEO dynamically using router params. Added JSON data for all the courses, metadata, and articles so these pages actually have something to pull from. Added dynamic article pages that pull article content/SEO from the same JSON data, as well as animated accordions that group course articles by unit to make navigation a lot easier. Because these are mostly all server components, the app is extremely fast even with that much data. Added new types, updated styling, and fixed deployment as well.
Log in to leave a comment
I genuinely locked in so hard for this project I entered flowstate, finished the basic structure of the app with the homepage, main tabs, nav bar, footer, SEO, dependencies, light/dark mode, UI components, DNS, deployment, and other boilerplate setup all added and working. Because the structure of this app is pretty similar to MacVG, which I spent a lot of time working on a few weeks ago, so I just copied a lot of stuff/boilerplate over and modified accordingly for MacLearn. This is a rewrite as well, so I also copied some stuff from the original old MacLearn written in React Router, making this process a lot faster.
Log in to leave a comment