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



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

Related Posts
Want to Learn How to Make Your Own Website?

For those who have an online business, it is imperative to have a website. You cannot expand you business Read more

Resolving Error 0x80040609 Steps

Windows live is the most popular web service provided by Microsoft. This service will help you to stay connected Read more

Resolving Customer Complaints and Conflict with the L-E-A-R-N Technique

Handling customer complaints is an important part of keeping your business healthy and profitable. If you want your customers Read more

Advantages and Disadvantages of Customized Software

Other questions you could ask: Advantages and disadvantages of proprietary software what is proprietary software? How to customise fields Read more

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

    Reply
  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?

    Reply
  3. CJ please please please please make a series how to build clone popular web app which contain transaction like airbnb/amazon with full stack javascript.

    Reply
  4. 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 :))

    Reply
  5. Thanks to everyone that tuned in live! Here are links to the code and checklists:
    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

    Reply

Leave a Comment