Full Stack Web Development Guide - Frontend & Backend Programming

Published: 02 June 2022
on channel: Jeva

14,061

302

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/m...

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 -   / discord
Subscribe for more!

Patreon:   / jevajs
Twitter:   / 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.

On this page of the site you can watch the video online Full Stack Web Development Guide - Frontend & Backend Programming with a duration of hours minute second in good quality, which was uploaded by the user Jeva 02 June 2022, share the link with friends and acquaintances, this video has already been watched 14,061 times on youtube and it was liked by 302 viewers. Enjoy your viewing!

1,476