Full Stack Web Development Guide - Frontend & Backend Programming

In this video, Zua explains how to build a full-stack web application from scratch using NodeJS and HTML/CSS. This project utilizes the Express JS library along with the Axios HTTP library. It will encompass everything from backend routing to frontend API integration. This project will additionally be focusing on CRUD (Create, Read, Update, and Delete) functionality with our custom-made REST API. All in all, this full-stack application project aims to demonstrate how REST APIs are built and used, and how they are integral to the internet’s interconnectedness as a whole.

Code: https://github.com/jevajs/Jeva/tree/master/Zua%20-%20Full-Stack%20Web%20Application

NodeJS: https://nodejs.org
Postman: https://www.postman.com/downloads/
VSCode (Code Editor): https://code.visualstudio.com/download
Bootstrap Documentation: https://getbootstrap.com/docs/

Timestamps:
0:00 - Intro
1:34 - Required Software(s)
2:15 - Project Setup (dependencies, file structure, etc.)
4:22 - Webserver Setup
6:33 - Backend File Structure
10:53 - Static File Serving
12:38 - API Routing Setup
16:17 - Middleware
19:30 - Database Setup
20:58 - Messages Router
27:40 - Create Messages (POST)
36:54 - Edit Messages (PUT)
50:05 - Delete Messages (DELETE)
55:02 - Get Messages (GET)
59:21 - Author Router
1:01:38 - Get Authors (GET)
1:06:33 - Testing Backend API Webserver
1:15:31 - Backend Summary
1:16:03 - Frontend/Client Setup
1:17:09 - User-Interface Structure Setup (HTML w/ Bootstrap CSS)
1:27:39 - API Wrapper
1:39:12 - API Wrapper Testing
1:46:03 - Utility Functions
1:49:01 - Frontend (Client) Link to Backend (server) API
1:49:30 - Create Message through Frontend
1:53:18 - Get Messages through Frontend
2:03:08 - Bootstrap Card Component (Utility)
2:10:45 - Get Specific Message through Frontend
2:13:23 - Edit Message through Frontend
2:17:02 - Delete Message through Frontend
2:20:20 - Debugging Issues
2:21:55 - Application Testing
2:32:00 - Closing Remarks


Need help? Join the discord - https://discord.com/invite/PAaZ86d
Subscribe for more!

Patreon: https://patreon.com/jevajs
Twitter: https://twitter.com/jevajs
GitHub: https://github.com/jevajs

Extra Notes:
• Some concepts (like query parameters or path parameters) were somewhat glossed over and I apologize for that. Please shoot me an email or message anywhere if you have any questions about this project, or reasons for the design choices I made for this application.
• Many questionable system-design choices were made in the planning of this project for the sake of simplicity and digestibility.
• Under the context of user-generated content, I refer to messages and posts interchangeably.
• Part two of this series will feature React.js in its entirety, MongoDB (NoSQL), and proper middleware implementation & authentication.