Tue. Nov 5th, 2019

Host your Website

Read and learn

FatCow Plan for $3.15/mo. only

Coding Garden Kickoff – Build a Full Stack JavaScript Application Part 1

2 min read



Checklist is here: https://gist.github.com/w3cj/449d54c8d10f931706fddeb3562e0a84
Client code is here: https://github.com/w3cj/product-CRUD-client
Server code is here: https://github.com/w3cj/product-CRUD-server

* [2:34] Setup client folder
* [2:38] index.html
* [2:55] Add bootswatch CDN
* [5:33] Create index.js
* [6:09] git init
* [6:31] Create a server folder
* [6:52] Generate Express App
* [7:38] git init
* [8:03] Convert Express App to JSON API
* [9:05] Remove view rendering/views folder
* [9:35] Remove routes folder
* [10:01] Remove static serve and public folder
* [10:37] Update error handler
* [10:42] Add GET / endpoint
* [13:00] Client: Try to make a request
* [14:13] See the CORS error and remember this moment
* [15:53] Add CORS to the API
* [18:19] Create database
* [19:02] Initialize knex project
* [19:02] Install knex and pg
* [19:24] Create knexfile.js
* [20:58] Create product table migration
* [25:43] Seed product table with sample data
* [28:43] Add api folder and create/mount router
* [32:54] Connect to the database
* [33:11] Create database connection file
* [35:53] Create a queries file
* [36:55] List all records with GET /api/v1/products
* [37:36] Create query
* [38:09] Create route
* [39:36] List all records in /index.html
* [39:51] AJAX Request to GET /products
* [40:28] Append to DOM
* [46:32] Each product links to /product.html?id=:id
* [47:31] Display a link to /create.html
* [50:37] Show one record with GET /api/v1/products/:id
* [51:16] Validate id
* [52:51] Create query
* [53:25] Create route
* [55:27] Show one record in /product.html?id=:id
* [55:54] Parse query string to get id
* [58:41] AJAX Request to GET /products/:id
* [1:00:53] Append to DOM
* [1:03:30] Display link to /edit.html?id=:id
Search for more Coding Garden videos here: https://cg-videos.now.sh
View the Coding Garden FAQ here: https://github.com/CodingGardenCommunity/app-wiki/wiki/Frequently-Asked-Questions

13 thoughts on “Coding Garden Kickoff – Build a Full Stack JavaScript Application Part 1

  1. Timestamps:
    * [2:34] Setup client folder
    * [2:38] index.html
    * [2:55] Add bootswatch CDN
    * [5:33] Create index.js
    * [6:09] git init
    * [6:31] Create a server folder
    * [6:52] Generate Express App
    * [7:38] git init
    * [8:03] Convert Express App to JSON API
    * [9:05] Remove view rendering/views folder
    * [9:35] Remove routes folder
    * [10:01] Remove static serve and public folder
    * [10:37] Update error handler
    * [10:42] Add GET / endpoint
    * [13:00] Client: Try to make a request
    * [14:13] See the CORS error and remember this moment
    * [15:53] Add CORS to the API
    * [18:19] Create database
    * [19:02] Initialize knex project
    * [19:02] Install knex and pg
    * [19:24] Create knexfile.js
    * [20:58] Create product table migration
    * [25:43] Seed product table with sample data
    * [28:43] Add api folder and create/mount router
    * [32:54] Connect to the database
    * [33:11] Create database connection file
    * [35:53] Create a queries file
    * [36:55] List all records with GET /api/v1/products
    * [37:36] Create query
    * [38:09] Create route
    * [39:36] List all records in /index.html
    * [39:51] AJAX Request to GET /products
    * [40:28] Append to DOM
    * [46:32] Each product links to /product.html?id=:id
    * [47:31] Display a link to /create.html
    * [50:37] Show one record with GET /api/v1/products/:id
    * [51:16] Validate id
    * [52:51] Create query
    * [53:25] Create route
    * [55:27] Show one record in /product.html?id=:id
    * [55:54] Parse query string to get id
    * [58:41] AJAX Request to GET /products/:id
    * [1:00:53] Append to DOM
    * [1:03:30] Display link to /edit.html?id=:id

  2. Hey,
    Video is great man. I learned so many things from your videoes. I just wanted to know about the fonts you use in ur vs code. It looks so good. And which syntax theme you are using?

  3. Hello CJ ! First of all, thank you so much for this fullstack js lessons :)) I need a suggestion from you, im a bit confused on setting up the database in this video (cz first time using javascript for db). I saw your video series about crud api using knex, postgres, and express. Is that the first step for me to get knowing how to setup databases using javascript ? And is it related to this 2 part fullstack javascript lesson ?

    Thank you so much CJ :))

Comments are closed.

Copyright © All rights reserved. | Newsphere by AF themes.