Build a Backend REST API with Node JS from Scratch
- Description
- Curriculum
- FAQ
- Reviews
Quickly learn the fundamental of building a robust RESTFul API with NodeJS based on an efficient professional architecture pattern, and then, see how to plug your API with a client which you will also learn how to build. A client built with the latest React and Bootstrap versions.
You will learn how to build a backend API from scratch and build a client that will speak to your API through HTTP protocol.
-
Communicate with your backend. HTTP and HTTP methods and codes.
-
How to validate the input data validation.
-
How to request some API endpoints easily
-
How to test your API gradually.
-
How to design a flexible and solid API architecture.
-
How to secure and optimize your API professionally (with the packages you absolutely need to know).
-
CORS on your API.
-
Building a client from scratch with React JS.
-
Calling the CRUD (Create-Read-Update-Delete) endpoints from your client.
-
How to document the API endpoints with JSDoc and OpenAPI.
-
And so much more will be covered in this course.
This JavaScript course will also cover some great packages that will change your life during the development of an API efficiently.
You will learn to create very easily a design in a matter of minutes, without any complicated CSS (just a few reusable components).
You will learn how to embrace your components with Styled-Components and understand the benefits of using it.
You will be able to add as many pages as needed in your React application thanks to React Router Dom.
At the end of this course, you will be comfortable enough to create an API from scratch by yourself, implement new endpoints, being comfortable with many packages (such as logging, rate-limiter, Yup schema validation, …).
Icing on the cake, you will be confident to create a frontend client from scratch and use those endpoints to interact with the backend on your frontend JavaScript application.
At the end of the course, you will even learn how you can create different unit tests for your API.
-
2
Create a Node project from scratch -
3
Pre-checks. Environment Setup
-
4
NodeJS, NPM, Git, and Git Config
-
5
Install necessary NPM packages
-
6
Install Nodemon for automatically reload any changes
-
7
Our first file (server.js)
-
8
Let's speak with our backend (API)
-
9
Insomnia - Postman - REST clients for making HTTP requests very easily
-
10
HTTP Status Codes - Let's make them readable
-
11
API Endpoints
-
12
Let's design the architecture of our Simple API
-
13
Part 1 - Create a solid and flexible architecture for the API
-
14
Part 2 - Create a solid and flexible architecture for the API
-
15
Validate our endpoints
-
16
Secure our API - Potential Vulnerabilities
-
17
Let's briefly see JSDoc and OpenAPI
-
18
Let's git commit our simple RESTful API
-
19
Rate limiting and compressing your API
-
20
Adding Pino logging library for our NodeJS API
-
21
Let's create our client React app
-
22
UsersList, Axios/Fetch and Installing dependencies
-
23
UsersList component - Implementation
-
24
Enhance UsersLis component
-
25
React Styled-Components
-
26
Use React Router
-
27
Create User component
-
28
Toastify messages and hadling error messages from API
-
29
Retrieve a user from our React component
-
30
Refactoring Layout-Navbar
-
31
Re-organized React client into multi-tiers
-
32
Edit a User
-
33
Delete a User
-
34
Footer and static pages
Concerning the Footer component, with `{{ span: 3, offset: 1 }}` on the `Col` React-Bootstrap component, need to use curly brackets twice, because we have an object, and an object is declared with curly brackets as well. It would be the same as doing
```
columnMdOptions = { span: 3, offset: 1 };<Col md={columnMdOptions}>
</Col>
```
-
35
Optional - Convert axios with native JS Fetch
-
36
Enhance footer, little CSS/HTML tricks
-
37
Handle nicely an error message when no users on homepage
-
38
Enhancement, part 1 - Have a loading spinner when retrieving users
-
39
Enhancement, part 2 - Fixing the content loader not showing the error messages
-
40
Usage of the `finally` block in JS and how we can implement it
-
41
Enhance UsersList - Fix Bootstrap Row usage and Refactor into new User component
-
47
Where to Follow Me + Resources -
48
List of JavaScript Sandboxes (handy for quick debugging)
-
49
BONUS #1: The VS Code Extensions!
-
50
BONUS #2: Apps I use on my macOS (to be efficient and enjoy the work!)
-
51
BONUS #3: My favorite resources to stay up-to-date
-
52
BONUS #4: The Chrome / Brave Dev Extensions
