Full-Stack Development with Node.js and Express: Architectures, API Development, and Project Planning

Course Context and Progress

  • State of the Course: The instructor notes that students have "made it over the hill" once they reach this point in the eight-week term. Much of the syntax and basic front-end JavaScript logic has been covered.

  • Pedagogical Goal: The instructor emphasizes understanding the "process" and "cycle" of full-stack development. This knowledge is transferable even if a developer switches to mobile or desktop development in other languages.

  • Revised Workload: For the final four to five weeks, chapters will be smaller.

    • There will be no more Zybug Labs or challenge activities.

    • Requirements include small participation activities, completing tutorials, and building the final project in pieces.

    • This is intended to free up time to focus on real-world implementation and the final project.

Full-Stack Architectural Perspectives

  • Traditional Full-Stack Development:

    • Architecture: The server (utilizing Node and Express) hosts the backend and the HTML templates (view) in one location.

    • Workflow: When a client (browser) makes a request, the server queries the database (MM for Model), the controller (CC for Controller/JavaScript) processes the data, fills in the blanks of an HTML template (VV for View), and sends the completed HTML file to the client.

    • Advantages: Built-in Search Engine Optimization (SEOSEO) and easier handling of browser version compatibility because the server translates the page before sending it.

    • Disadvantages: Lack of flexibility; if one part of the monolithic server breaks, the entire application may fail.

  • Decoupled (Separated) Front-End and Back-End:

    • Architecture: The front end (client) and back end (API) live on separate servers.

    • Workflow: The front end (potentially built for mobile, TV, or desktop) sends a request to the back-end API. The server responds with pure data—typically in JSONJSON format—rather than a full HTML page. The client-side code then renders that data into the template.

    • Advantages: High flexibility. One back-end API can serve multiple front ends (e.g., Netflix serving a TV app, a mobile app, and a website). It allows team specialization and speed advantages due to small data exchanges.

    • Disadvantages: SEOSEO can be more difficult because robots may find empty HTML tags before JavaScript renders the content.

  • Hybrid Models: Large corporate applications often use a full-stack core while exposing parts of the back-end via an API for external or multi-platform access.

Building an API with Express

  • Express Framework: A library designed to make Node.js development faster and the syntax more intuitive. It is used to create web servers and route data.

  • Basic Setup Steps:

    1. Initialize the project: npm initnpm\,init. This creates a package.jsonpackage.json file to track dependencies.

    2. Install Express: npm install expressnpm\,install\,express.

    3. Import Express in the main file (e.g., app.jsapp.js): const Express=require(′express′);const\,Express = require('express');.

    4. Activate the server: const app=Express();const\,app = Express();.

  • Project Structure for Deployment:

    • If separating front end and back end, use two separate Git repositories.

    • Deployment services (like Replit) often point to the root folder of the main branch; having two separate repositories ensures the service knows exactly what it is deploying (a Node app vs. a static site).

  • Environment Management:

    • node modulesnode\,modules: The folder where all 11 primary and 6262 sub-packages live. This folder is large and should be ignored during Git uploads using a .gitignore.gitignore file.

    • package.jsonpackage.json: Contains the list of "dependencies" (e.g., Express version numbers). Collaborators use npm installnpm\,install to recreate the modules folder locally based on this file.

Routes and Endpoints

  • Routing Definition: Routes handle browser requests based on the URL and the HTTPHTTP method (e.g., GETGET, POSTPOST, PUTPUT, DELETEDELETE).

  • Endpoint Components:

    • URL/Path: The specific address (e.g., /hello/hello or /songs/songs).

    • Request Method: Usually GETGET for retrieving data or POSTPOST for submitting data.

    • Callback Function: Known as the handler. It runs when the endpoint is hit. It always takes two parameters: reqreq (request) and resres (response).

  • The Response Object:

    • res.send()res.send(): Can send literal strings or HTMLHTML (e.g., res.send(′</code></p><h2id="6b4123c3−9583−4822−84fc−4e1558900971"data−toc−id="6b4123c3−9583−4822−84fc−4e1558900971"collapsed="false"seolevelmigrated="true"><code>Hello</code></h2><p><code>′)res.send('</code></p><h2 id="6b4123c3-9583-4822-84fc-4e1558900971" data-toc-id="6b4123c3-9583-4822-84fc-4e1558900971" collapsed="false" seolevelmigrated="true"><code>Hello</code></h2><p><code>');).

    • res.json()res.json(): Specifically formats and sends a JavaScript object as a JSONJSON string for API consumption.

  • Prefixing Routes: Use app.use(′/api′,router);app.use('/api', router); to ensure all API-related URLs are prefixed (e.g., localhost:3000/api/songslocalhost:3000/api/songs). This practice helps distinguish API calls from standard web page requests in hybrid apps.

Cross-Origin Resource Sharing (CORS)

  • The Issue: By default, web browsers block scripts from making requests to a different domain or port than the one that served the web page (e.g., a front end on port 55005500 trying to talk to a back end on port 30003000).

  • The Solution: Install the CORSCORS package (npm install corsnpm\,install\,cors).

  • Implementation:

    • const cors=require(′cors′);const\,cors = require('cors');

    • app.use(cors());app.use(cors());

  • This acts as a "barricade remover," allowing the front end and back end to communicate freely while hosted on the same device or across different origins.

Development Tools

  • Nodemon: A utility that monitors the Node application for changes and automatically restarts the server.

    • Install: npm install nodemonnpm\,install\,nodemon (or npm install −g nodemonnpm\,install\,-g\,nodemon for global installation).

    • Usage: Configure a script in package.jsonpackage.json (e.g., "server":"nodemon app.js""server": "nodemon\,app.js") and run with npm run servernpm\,run\,server.

  • Thunder Client / Postman: Tools used to test API endpoints without a front end. They allow developers to send GETGET or POSTPOST requests and view the JSONJSON response and success status (e.g., Status 200200 OK).

  • JSON Viewer Chrome Extension: Useful for formatting raw JSONJSON data into a readable tree structure within the browser.

Final Project Specifications: Course Scheduler

  • Stage 1: Teacher/CRUD Functionality:

    • Goal: Create a rudimentary system to manage a course catalog.

    • Requirement: Build a CRUD (Create, Read, Update, Delete) application.

    • Features:

      • An Index Page listing all courses (Course Name, Credit Hours, Subject Area).

      • An Expandable View for individual course descriptions.

      • An Add Course Form with at least 44 input boxes: Course Name, Description, Subject Area, and Number of Credits (33 credits, etc.).

      • The ability to edit and delete courses (initially without user accounts).

  • Stage 2: Student/Authorization Functionality:

    • Goal: Implement user accounts and registration.

    • Features:

      • Sign-in/Sign-up/Sign-out logic.

      • Students can search or navigate the catalog and "Add to Cart" or "Add to Schedule."

      • A personal Schedule Screen for each student to view their registered courses and "Drop" courses.

  • Timeline: The final project launch is due on November 28th28^{th}.

Group Collaboration and Technical Workflow

  • Communication: Use Discord. The instructor has set up dedicated text and voice channels for Group 11, Group 22, Group 33, and Group 44. Install it on both desktop and mobile to stay updated.

  • GitHub Collaboration:

    • Collaborators: The project manager adds team members under Settings > Access > Collaborators.

    • Cloning: Use Clone Git RepositoryClone\,Git\,Repository in VS Code to pull the code. Run npm installnpm\,install immediately to get the dependencies.

    • Branching Strategy:

      • The Main/Master branch is for code that definitely works.

      • Each team member should create their own branch (e.g., create branch "my−feature"create\,branch\,"my-feature").

      • Check out: Switching between branches to work on different parts of the code.

    • Pull Requests: Before merging a branch into the Main branch, submit a pull request. This allows the team to review and discuss code changes before they become permanent.

Questions & Discussion

  • Student Error Reports: One student noted they only feel they understand about 80%80\% of the material coming out of challenges. The instructor reassures them that it is a hard course but highly useful for their careers.

  • Collaborative Learning: Students (Poonie and Salem) described working together to troubleshoot "dumb errors" and minor syntax frustrations.

  • Anecdote regarding Reed: A student named Reed was absent because his car battery was acting up. The instructor joked about sending a picture of a car battery to help him distinguish the black and red cables, calling the car trouble "straight karma."

  • Break Time: The class took a five-minute break at approximately 2:252:25 due to the instructor experiencing nerve pain and awaiting surgery clearance.