Code Kai

𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗪𝗲𝗯 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 𝟭𝟬𝟭: MERN Stack Learning Platform 🚀

Recently, I completed the base version of this web application and converted it into an executable using 𝗘𝗹𝗲𝗰𝘁𝗿𝗼𝗻. However, as I went through some of the curricula, I noticed that a few built-in code editors and playgrounds had bugs.

With these latest revisions, I’ve cleaned up those issues and added a standalone 𝗧𝘆𝗽𝗲𝗦𝗰𝗿𝗶𝗽𝘁 curriculum covering topics from beginner to advanced. 🛠️

To sum it up, I've addressed the most notable bugs, introduced the standalone 𝗧𝘆𝗽𝗲𝗦𝗰𝗿𝗶𝗽𝘁 curriculum because it's one of the most preferred skills in the market, revised the lesson phasing to make the foundations more cohesive, and completed a 𝗳𝘂𝗹𝗹 𝗯𝗮𝗰𝗸𝗲𝗻𝗱 𝗿𝗲𝘃𝗶𝘀𝗶𝗼𝗻 more focused on the 𝗠𝗘𝗥𝗡 𝘀𝘁𝗮𝗰𝗸. I also added a beginner section under the 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 curriculum.

It now covers the necessary steps leading up to 𝗥𝗲𝗮𝗰𝘁.𝗷𝘀, while the 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸 section serves as the guide for the rest.

⚠️ 𝗗𝗶𝘀𝗰𝗹𝗮𝗶𝗺𝗲𝗿: I am not a professional educator, nor am I an expert in programming (yet). This is just a compilation of lessons scattered across the internet—from documentation, discussions, and forums. Learn at your own risk! (No certifications provided). Bugs are still present, so bear with me—I'm a one-man team. This is a 𝗖𝗦𝗥-𝗳𝗼𝗰𝘂𝘀𝗲𝗱 application. 💻

Link: https://bit.ly/MERN101

𝗥𝗮𝗻𝗱𝗼𝗺 𝟮𝟬𝟭: 𝗥𝗘𝗖𝗘𝗡𝗧 𝗨𝗣𝗚𝗥𝗔𝗗𝗘 ⚡

I made the initial investment and bought a new laptop that renders faster than my previous one, and its battery life is one of the best. 🚀 Sacrificed gaming—hello, enterprise models! 💼

⚙️ Quick Specs:
Brand & Series: Dell Vostro
Model: 3520
CPU: Core i7-1255U (10 cores, 12 threads), up to 4.70 GHz ⚡
Storage: Crucial CT2000P3SSD (2TB) (best upgrade) 🔥
RAM: 32GB 3200MHz DDR4 SODIMM (2x16) (best upgrade) 🔥
SCREEN: 15.6 inches, FHD 120Hz 🔥
Graphics: Intel Iris Xe Graphics (96 ex*****on units) ⚡
Mouse: Rapoo M160 Silent Black (cheap but super comfy) 💸

🚫 No more MEMORY_MANAGEMENT errors!
🚫 No more random Chrome STATUS_ACCESS_VIOLATION!

Would I say it's worth it? 100% yes—kasi I bought it at a super cheap price and it's almost brand new condition! 🎉

📸 Photo credit: LaptopMedia (used for reference only)

𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗪𝗲𝗯 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 𝟭𝟬𝟭: VIBE CODING 🚀

Vibe-coded a full-stack web development curriculum because I was tired of just watching courses—so I had AI make one for me to learn from 💻. It has three modes of explanation: beginner, intermediate, and senior. Instead of jumping through different tabs in one browser, I made it all in one place—this will serve as a foundation for using various frameworks under the React ecosystem. It saves to localStorage, so a single localStorage.clear() command erases everything—be careful! ⚠️

The platform covers foundational HTML, CSS, and the Tailwind framework, which is used for styling and layout due to its flexibility and freestyle approach. It includes supplemental knowledge for JavaScript core fundamentals, advanced array methods and production techniques, plus an introduction to the backend, RESTful APIs, and more. It also briefly covers Git and version control, concise development and DevOps topics, capstone projects covering everything learned from beginner to advanced levels, and a brief discussion on career readiness.

Disclaimer: I do not teach programming and this is all open-source knowledge compiled with the use of AI, even though it covers concepts from start to finish, this learning platform only acts as supplemental knowledge and won't give you the whole library. It serves as a foundation to learn and engage with programming. It has some UI bugs due to wrapping constraints, especially on native apps, but nevertheless, you'll get the idea :D.

Features: Built-in Pomodoro timer with short and long breaks ⏱️. Light and dark mode 🌙. It has 5 real-world examples that are used today (Fintech, Dashboards, Payroll, E-commerce, Appointments). It also has phase exams, quizzes, debugging challenges, and built-in code playgrounds which some of it handles multi-file IDE (app.jsx, component.jsx) along with its error highlighting, prettier, and auto complete syntax and snippets features for easier user experience. It is also a Laravel inspired styling.

P.S. Originally built for the MERN stack: MongoDB, Express, React, Node.js.

𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗪𝗲𝗯 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 𝟭𝟬𝟭: VIBE CODING

💻 𝗗𝗮𝗶𝗹𝘆 𝗠𝗼𝗻𝗶𝘁𝗼𝗿𝗶𝗻𝗴 𝗮𝗻𝗱 𝗧𝗿𝗮𝗰𝗸𝗶𝗻𝗴 𝗦𝘆𝘀𝘁𝗲𝗺 | Fil Oil Logistics Corporation

Vibe-coded the hell out of this! It's fun, and AI teaches you a lot of things you don't know yet, from Excel imports to copying to clipboards with specific inputs. It taught me how to use Electron for .exe packaging and a firewall bypass (nakalimutan pass ng admin account sa issued laptop kaya di ma-allow) for node.exe! Lingaw man diay mag-vibe code; bantog ra addicting kaayo! Ubos lahat ng free tokens pirmi, oy! 🤣

This runs on localhost:3000 since it's an internal monitoring app. I learned how to use dualwrite for localDB.json and MongoDB, synchronizing localDB to MongoDB so data from two devices is shared and stays synchronized.

I added a WebSocket feature to actually mimic a real-time listener, so there's no need to refresh the page; it silently refreshes and reconnects whenever the window is inactive.

PS - Wa pa ko nahuman sa akong React learning kay nag-lingaw-lingaw ko aning vibe coding.

Frontend: Vanilla, Vite + Tailwind
Backend: Node.js + Express

𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗪𝗲𝗯 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 𝟭𝟬𝟭

💻 𝗗𝗮𝗶𝗹𝘆 𝗠𝗼𝗻𝗶𝘁𝗼𝗿𝗶𝗻𝗴 𝗮𝗻𝗱 𝗧𝗿𝗮𝗰𝗸𝗶𝗻𝗴 𝗦𝘆𝘀𝘁𝗲𝗺 | Fil Oil Logistics Corporation

So I'm now working in a related branch of my degree, and I saw that our office uses Excel files for monitoring, and it kept crashing when deleting or changing things. And I'm creating a better, more modern, and more efficient monitoring system.

This project will be in my portfolio, and this system will live on until I'm ma move nasad ug lahing branch. Lezgoo!

Hoping to finish this in a month or two, until it's ready for a demo.

PS - Wa pako nahuman sakong React learning, so Vanilla lang sa, hahaha! Project sneak peek!

Frontend: Vanilla, Vite + Tailwind
Backend: Node.js + Express

𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗪𝗲𝗯 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 𝟭𝟬𝟭

💻 Appointment Website | Homs Tattoo of Jodex Wang
📍Homs' services offered: Tattoos and Portraits.

The project was deployed last night; I already have many committed fixes. Formulated an idea, then realized it. I learned a lot and will continue to learn from the upcoming practices I'll be involved in. React.js, Next.js, and SQL databases will be next.

The best mentor was the documentation left by most frameworks; I learnt the foundation and enhanced it with AI-assisted learning and programming. Take advantage of today's technologies, and it will take you to new heights.

No YouTube tutorials for the most part. Just a single prompt changed everything: "Hey, can you teach me how and why this works", and the story goes on.

𝐒𝐈𝐓𝐄 𝐈𝐒 𝐍𝐎𝐖 𝐋𝐈𝐕𝐄!

𝐓𝐚𝐫𝐚, 𝐩𝐚 𝐭𝐚𝐭𝐭𝐨𝐨 𝐧𝐚!
https://www.homstattoo.online/

Frontend: Vanilla, Vite + Tailwind
Backend: Node.js + Express

𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗪𝗲𝗯 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 𝟭𝟬𝟭

💻 Dashboard Page | Homs Tattoo of Jodex Wang
📍Homs' services offered: Tattoos and Portraits.

Project update: After a week, with 3 days of slacking off. Layo najud gamay ang naabtan. Deployment will be the following week, or at another time in June for the web app demo. Tweaks under responsive design need polishing pa, pero minor changes nalang.

Frontend: Vanilla, Vite + Tailwind
Backend: Node.js + Express

𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗪𝗲𝗯 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 𝟭𝟬𝟭

I am currently learning ReactJS and having a refresher on array methods and vanilla CSS styling. And I missed hard coding hehe, need nagyud nako ug ReactJS and other relational databases knowledge to fully stack myself.

𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗪𝗲𝗯 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 𝟭𝟬𝟭

💻 Dashboard Page | Homs Tattoo of Jodex Wang
📍Homs' services offered: Tattoos and Portraits.

Redesign of the Homs Tattoo website and dashboard. The dashboard now has features such as invoices, exporting invoices as PDFs, scheduling according to artists' availability, and inquiries (coming soon). Added a light mode toggle (dark mode is the default). The website has a minimal, edgy template; animations have been added but need more improvement and engagement.

On the backend, added rate limiters and validations, authentication for the dashboard, and still need to add profile information and set the role for an artist (owner/junior artist/senior artist/intern) under settings (SaaS practice).

PS - Prices are not final, just mockups.