🏗 CRUD in MVC architecture

A project made to learn the http methods - then transitioned the software architecture pattern into MVC - hitting two birds in a single throw.

Link to Project: https://busy-plum-boa-wig.cyclic.app/

🧰 How It's Made

• Tech used: HTML, CSS, JavaScript ¯\_(ツ)_/¯
  • EJS
  • Node.js, Express.js
  • MongoDB

In web development, you can not create what you do not understand.

I watched master Leon's video, followed Zell's tutorial, and repeated creating this thing on my own until I can do this app without help.

While doing Leon's course on my own pace, I have a day job to feed myself. The first steps in this project were made after the 9 to 5. But before I get to my machine,

• I walk home from work,
• then go to the gym and train my muscles — I told you — I love improvement,
• then walk back to my headquarters,
• take a bath,
• cook rice,
• open canned goods,
• eat

.. and then I start hacking

The time left after doing all this is not enough to make remarkable advancement in my learning and creation of this project.

Waiting for the weekends to come is painful. Rejecting people when they want my company at the end of the week because it's free time is so normal to me. I still feel bad a little, but I have a mission.

That's when I started sneaking Replit while at work (I just want to grow!).

This online IDE played a huge part on how this app was made.

It was prohibited but before Replit, I downloaded Node in my workstation to do some development. Since I already did something forbidden, I did not want my wanted level to go up and install the text editor of my choice. Instead, I persevered using Notepad++.

After all the covert operations, here it is.

🛠 Optimizations

The design has a lot of room for improvement :)

The models created were made of string type inputs. It would be cool if a user can upload files. Or include other input types and do something with them, not just display the added model.

📚 Lessons Learned

GET, POST, PUT and DELETE HTTP methods.

The GET method is for Reading something.

POST is used to Create something. The creation was successful but you can't see it. Did you redirect/ reload/ refresh the correct page?

PUT is used to Update something that has already been created. Requires a client side script.

DELETE removes something permanently. Do you think the web apps you use actually delete things when you tell them to or do they just hide them from the user?

Application Programming Interface

Yeah okay you can search what API means but the definition that helped me understand this three-letter initialism is this:
"API is the simple interface for the application to perform its (most of the time complex) functionalities"

1. You have a television. You have a remote control for it. The buttons on that controller are the API.

• You press the power button
• The television turns off/on
• You did not need to know what or how the transistors/ resistors/ capacitors should function. or what actually happens in the TV's circuit board.
• That power button was designed for users to access one of the television's many capabilites.

2. You are using a browser.

• You put github.com in the address bar and hit Enter. You just made a GET request.
• When the active server for github.com receives that request, the server does its thing (just like how circuit board in TV works after a power button press)
• When the request is fulfilled, you either land on Github's login/signup page or to your account feed.

MVC flow

This architecture is a ✨beauty✨.

I was able to understand and implement http methods, while appreciating the logic and readability of web apps crafted using this structure.

This Flow Diagram makes it easy to visualize what's happening.

💾 Thanks!