The goal of this course is to show you—step by step—how a real production-level web application is built from the ground up. Whether you’re a developer, entrepreneur, or simply someone with an idea for an app and a bit of coding experience, this course will walk you through how to turn that idea into a live, working product.
This isn’t a “watch me code” series or a basic programming tutorial. Instead, it’s a complete, practical journey through the entire lifecycle of a professional web application—from planning and architecture to cloud deployment.
You’ll learn by following along with the real development process—mistakes, debugging, problem-solving, and all. Nothing will be overly polished or pre-edited. You’ll see what actually happens when building an app in the real world and how to navigate each challenge.
By the end, you’ll understand not just how to code individual features—but how to think, plan, and execute like someone building a production-ready web application.
Tools We Will Use
We’ll work with the same technologies used by modern software teams and startups.
Required Tools
Angular – Our front-end framework for building dynamic, maintainable user interfaces.
NestJS – A robust Node.js framework for our backend APIs, authentication, and data logic.
MongoDB Atlas – Our cloud database for storing users, tasks, and application data.
AWS S3 – Secure, scalable storage for images and files.
GitHub – For version control, collaboration, and deployment integration.
Optional Tools
Lancer Project Management – To plan and manage the build process, using epics and tasks like a real dev team.
Cursor – An AI-assisted code editor we’ll use to demonstrate how AI can speed up coding without replacing your understanding.
What We Will Be Building
In this course, we’ll build a production-ready To-Do List web application—but this isn’t your typical “beginner to-do app.” We’ll design it like a professional SaaS product, complete with authentication, user management, cloud hosting, and CI/CD.
Backend Development (NestJS)
We’ll create a backend that includes:
Secure user authentication and authorization (registration, login, password reset)
Role-based access controls and guards
Organized controllers, services, and routes
Environment management for development, staging, and production
Integration with MongoDB Atlas for persistent data storage
Frontend Development (Angular)
On the frontend, you’ll build a clean, responsive web app that lets users:
Create and manage task lists and items
Log in, manage profiles, and update data
Interact with real APIs from our backend
Navigate seamlessly with a professional UI structure
Cloud Deployment (AWS)
Once everything works locally, we’ll take it live by:
Deploying the backend with AWS App Runner
Hosting the frontend through AWS Amplify
Storing assets in AWS S3
Managing code and deployments through GitHub
Along the way, we’ll also discuss how to design for scalability, security, and maintainability—just like you would for a real production system.
How AI is used in this Project
AI is rapidly reshaping how web applications are built. In this course, we’ll explore how to use it responsibly and effectively—as a tool to enhance productivity, not replace understanding.
We’ll use AI to:
Brainstorm solutions and explore architectures
Speed up repetitive coding tasks
Debug and refine code
Improve workflow and documentation
But we’ll also cover its limits. To build secure, reliable applications, you need to understand how your code works. AI helps you move faster—but you remain the engineer behind the wheel.
Who this Course is For
This course is designed for anyone who wants to learn how professional web applications are planned, built, and deployed.
You’ll get the most out of it if you:
Have a basic understanding of coding (HTML, JavaScript, or TypeScript)
Want to learn how to combine technologies to create a real, production-ready web app
Are an entrepreneur who wants to understand how web apps are made before hiring developers
Are a developer or designer looking to learn full-stack workflows from backend to cloud
Or simply want to build and launch your own ideas the right way
You don’t need to be an expert programmer—just comfortable reading and writing some code and eager to learn.
By the End of this Course
By the time you finish, you’ll have:
A fully deployed, production-ready web application that you built from scratch
A complete understanding of how modern web apps are structured, secured, and deployed
Hands-on experience with Angular, NestJS, MongoDB, AWS, and GitHub
The ability to plan, organize, and manage your own web projects
The confidence to turn your ideas into real, working products
This course isn’t about memorizing code—it’s about understanding how the pieces come together to create something real, scalable, and professional. Whether you want to build your own SaaS, work smarter as a developer, or simply learn how the web apps you use every day are made—this course will show you how it’s done.
Once we have a local instance of our WordPress site running we can now connect it to our Express server to send data to our Angular application. The first thing we need to do is check that our WordPress API is functioning. Making sure XAMPP is running Apache and MySQL we need to visit the URL http://localhost/rl/wp-json/wp/v2/. If this provides a response like below we know that the API is working.
Now that we know the WordPress API is working we can update our URL in our .env.development file
WP_API_URL=https://localhost/rl/wp-json/wp/v2
Creating The Application Password
A lot of the content we are going to need from WordPress is going to require us to pass authentication details to WordPress when we call the API. To get our authentication information we are going to need to create an Application Password. To do this we are going to need to open up our wp-config file in our WordPress installation and add the following code.
define( 'WP_ENVIRONMENT_TYPE', 'local' );
This is because WordPress does not allow application passwords through HTTP by default so we have to enable it. Next we can log into our WordPress admin.
Once logged in we can go to the users area, select our user, and to go the area where is says application password.
enter in “expressServer” into the application password name area and click to add a new application password. This will give you a new password that you can click to copy and we are going to paste it into our .env.development file.
# Development Configuration
WP_API_URL=http://localhost/rl/wp-json/wp/v2
PORT=5000
CORS_ORIGIN=http://localhost:4200
# WordPress Authentication
WP_USER=morganwebdevelopment@gmail.com
WP_PASSWORD={your-app-password} # Replace with your actual app password
# Debugging
LOG_LEVEL=debug
We should now be able to call the API and get authenticated data.
Getting The Homepage
Now that we can access the API, we can get the homepage to display on our Angular app. It’s a logical first place to start.
Creating The Service
The first thing we need to do is create the service. Inside our wordpressService.js file past the following code:
const axios = require("axios");
const { WP_API_URL, WP_USER, WP_PASSWORD } = require("../config/dotenvConfig");
// Create a reusable Axios instance
const auth = Buffer.from(`${WP_USER}:${WP_PASSWORD}`).toString("base64");
const axiosInstance = axios.create({
baseURL: WP_API_URL,
headers: {
Authorization: `Basic ${auth}`,
"Content-Type": "application/json"
},
timeout: 5000, // Set a timeout to avoid hanging requests
});
// Centralized error handling function
const handleApiError = (error, message) => {
if (error.response) {
console.error(
`${message}: ${error.response.status} - ${error.response.data?.message || error.message}`
);
} else if (error.request) {
console.error(`${message}: No response received from API`);
} else {
console.error(`${message}: ${error.message}`);
}
throw new Error(message);
};
// ==============================
// Services for WordPress API
// ==============================
// Get the Homepage ID
const getHomepageID = async () => {
try {
const response = await axiosInstance.get("/settings");
if (!response.data?.page_on_front) {
throw new Error("Homepage ID not found in settings.");
}
return response.data.page_on_front;
} catch (error) {
handleApiError(error, "Failed to fetch homepage ID");
}
};
// Get Homepage Data
const getHomepageData = async () => {
try {
const homepageID = await getHomepageID();
const response = await axiosInstance.get(`/pages/${homepageID}`);
if (!response.data) {
throw new Error("Invalid response: Missing homepage data.");
}
return response.data;
} catch (error) {
handleApiError(error, "Failed to fetch homepage data");
}
};
// Exporting all services
module.exports = {
getHomepageData,
};
What this code does is import our authentication variables, creates a reusable Axios instance, and centralizes our error handling to keep things consistent for all the WordPress services we will create. Using those features we then create a function to get the homepage ID, and using that ID get the data from the homepage.
Creating the Controller
To access the service we will then create our controller. In our wordpressController.js file past the following:
Now we can test out our new complete API. Start up the dev server, and install and open up the Postman tool. Inside Postman create a new GET call for our API http://localhost:5000/wordpress/homepage
Send the request and your response should look like the following:
"id": 18,
"date": "2024-12-18T15:10:07",
"date_gmt": "2024-12-18T15:10:07",
"guid": {
"rendered": "https://retail-leaders.com/?page_id=18"
},
"modified": "2025-02-07T18:20:05",
"modified_gmt": "2025-02-07T18:20:05",
"slug": "home",
"status": "publish",
"type": "page",
"link": "http://localhost/rl/",
"title": {
"rendered": "Home"
},
"content": {
"rendered": "<!--themify_builder_content-->\r\n<div id=\"themify_builder_content-18\" data-postid=\"18\" class=\"themify_builder_content themify_builder_content-18 themify_builder tf_clear\">\r\n <div data-css_id=\"b42y483\" data-lazy=\"1\" class=\"module_row themify_builder_row fullwidth tb_b42y483 tb_first tf_w hide-mobile\">\r\n <div class=\"row_inner col_align_top tb_col_count_2 tf_box tf_rel\">\r\n <div data-lazy=\"1\" class=\"module_column tb-column col4-2 tb_5f6h483 first\">\r\n <!-- module text -->\r\n<div class=\"module module-text tb_0d2x962 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <h1>Retail Leaders</h1> </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div class=\"module module-text tb_i45l956 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <p>Connecting the Top Voices in Retail</p> </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div class=\"module module-text tb_9gf5792 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <p>Powered by RETHINK Retail, Retail Leaders is the premier platform for connecting top experts, thought leaders, and influencers with high-impact opportunities to share their knowledge, shape industry conversations, and elevate their visibility worldwide.</p> </div>\r\n</div>\r\n<!-- /module text --><!-- module buttons -->\r\n<div class=\"module module-buttons tb_42n5886 buttons-horizontal solid rounded\" data-lazy=\"1\">\r\n <div class=\"module-buttons-item tf_in_flx\">\r\n <a href=\"/become-a-member/\" class=\"ui builder_button tf_in_flx tb_default_color\" >\r\n Get Started Now! </a>\r\n </div>\r\n </div>\r\n<!-- /module buttons -->\r\n </div>\r\n <div data-lazy=\"1\" class=\"module_column tb-column col4-2 tb_wjpd954 last\">\r\n <span class=\"tb_row_frame_wrap tf_overflow tf_abs\" data-lazy=\"1\"><span class=\"tb_row_frame tb_row_frame_left tf_abs tf_hide tf_overflow tf_h\"></span></span> </div>\r\n </div>\r\n </div>\r\n <div data-lazy=\"1\" class=\"module_row themify_builder_row tb_uaj4535 tf_w hide-desktop hide-tablet hide-tablet_landscape\">\r\n <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\r\n <div data-lazy=\"1\" class=\"module_column tb-column col-full tb_z8nn535 first\">\r\n <!-- module text -->\r\n<div class=\"module module-text tb_ahb4535 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <h1>Retail Leaders</h1> </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div class=\"module module-text tb_v4lu535 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <p>Connecting the top voices in retail.</p> </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div class=\"module module-text tb_2ay6535 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <p>Retail Leaders is the premier platform that connects top retail experts, thought leaders, and influencers with exclusive opportunities to share their insights through speaking engagements, media appearances, and industry collaborations. Powered by RETHINK Retail, we make it easy for experts and content creators to discover, connect, and engage—all in one seamless marketplace.</p> </div>\r\n</div>\r\n<!-- /module text --><!-- module buttons -->\r\n<div class=\"module module-buttons tb_y1rm535 buttons-horizontal solid rounded\" data-lazy=\"1\">\r\n <div class=\"module-buttons-item tf_in_flx\">\r\n <a href=\"/become-a-member/\" class=\"ui builder_button tf_in_flx tb_default_color\" >\r\n Become a Member Today </a>\r\n </div>\r\n </div>\r\n<!-- /module buttons -->\r\n </div>\r\n </div>\r\n </div>\r\n <div data-lazy=\"1\" class=\"module_row themify_builder_row tb_hf4k775 tf_w\">\r\n <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\r\n <div data-lazy=\"1\" class=\"module_column tb-column col-full tb_mm71775 first\">\r\n <!-- module text -->\r\n<div class=\"module module-text tb_qi50892 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <h2>What is Retail Leaders?</h2> </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div class=\"module module-text tb_sjzz880 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <p>Retail Leaders helps the industry’s most influential event producers and content creators identify and confirm credentialed guests, speakers, and sources faster by providing them with direct access to RETHINK Retail’s exclusive communities of Global Retail Leaders (GRLs) and Top Retail Experts (TREs).</p> </div>\r\n</div>\r\n<!-- /module text --> <div data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w col_align_top tb_col_count_4 tb_2g2c292 hide-mobile\">\r\n <div data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_5mfr292 first\">\r\n <!-- module counter -->\r\n<div class=\"module module-counter tb_unfc783 size-large tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t data-to=\"220\"\r\n\t\t\t\t data-suffix=\"+\"\r\n\t\t\t\t data-prefix=\"\"\r\n\t\t\t\t data-decimals=\"0\"\r\n\t\t\t\t data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n <div class=\"counter-text\">Leaders & Experts</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n </div>\r\n <div data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_napp292\">\r\n <!-- module counter -->\r\n<div class=\"module module-counter tb_q3b6202 size-large tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t data-to=\"35\"\r\n\t\t\t\t data-suffix=\"+\"\r\n\t\t\t\t data-prefix=\"\"\r\n\t\t\t\t data-decimals=\"0\"\r\n\t\t\t\t data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n <div class=\"counter-text\">Industry Events</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n </div>\r\n <div data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_rzsb292\">\r\n <!-- module counter -->\r\n<div class=\"module module-counter tb_x6uh736 size-large tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t data-to=\"42\"\r\n\t\t\t\t data-suffix=\"+\"\r\n\t\t\t\t data-prefix=\"\"\r\n\t\t\t\t data-decimals=\"0\"\r\n\t\t\t\t data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n <div class=\"counter-text\">Podcasts</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n </div>\r\n <div data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_kpcb292 last\">\r\n <!-- module counter -->\r\n<div class=\"module module-counter tb_4chj724 size-large tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t data-to=\"25\"\r\n\t\t\t\t data-suffix=\"+\"\r\n\t\t\t\t data-prefix=\"\"\r\n\t\t\t\t data-decimals=\"0\"\r\n\t\t\t\t data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n <div class=\"counter-text\">Content Creators</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n </div>\r\n </div>\r\n <div data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w col_align_top tb_col_count_4 tb_tj5x400 hide-desktop hide-tablet hide-tablet_landscape\">\r\n <div data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_oa2y400 first\">\r\n <!-- module counter -->\r\n<div class=\"module module-counter tb_hbpa400 size-small tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t data-to=\"220\"\r\n\t\t\t\t data-suffix=\"+\"\r\n\t\t\t\t data-prefix=\"\"\r\n\t\t\t\t data-decimals=\"0\"\r\n\t\t\t\t data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n <div class=\"counter-text\">Leaders & Experts</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n </div>\r\n <div data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_l4bw400\">\r\n <!-- module counter -->\r\n<div class=\"module module-counter tb_m1jt400 size-small tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t data-to=\"35\"\r\n\t\t\t\t data-suffix=\"+\"\r\n\t\t\t\t data-prefix=\"\"\r\n\t\t\t\t data-decimals=\"0\"\r\n\t\t\t\t data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n <div class=\"counter-text\">Industry Events</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n </div>\r\n <div data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_telg400\">\r\n <!-- module counter -->\r\n<div class=\"module module-counter tb_5zdk400 size-small tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t data-to=\"42\"\r\n\t\t\t\t data-suffix=\"+\"\r\n\t\t\t\t data-prefix=\"\"\r\n\t\t\t\t data-decimals=\"0\"\r\n\t\t\t\t data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n <div class=\"counter-text\">Podcasts</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n </div>\r\n <div data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_eyf9400 last\">\r\n <!-- module counter -->\r\n<div class=\"module module-counter tb_kbmq400 size-small tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t data-to=\"25\"\r\n\t\t\t\t data-suffix=\"+\"\r\n\t\t\t\t data-prefix=\"\"\r\n\t\t\t\t data-decimals=\"0\"\r\n\t\t\t\t data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n <div class=\"counter-text\">Content Creators</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div data-lazy=\"1\" class=\"module_row themify_builder_row tb_5pyr784 tf_w\">\r\n <div class=\"row_inner col_align_top tb_col_count_2 tf_box tf_rel\">\r\n <div data-lazy=\"1\" class=\"module_column tb-column col4-2 tb_2uib784 first\">\r\n <!-- module text -->\r\n<div class=\"module module-text tb_ytbc223 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <h3><b>Connect With Experts</b></h3> </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div class=\"module module-text tb_rx0v40 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <p>Discover and connect with top retail experts, speakers, and thought leaders to elevate your events, podcasts, and content with expert-backed insights.</p> </div>\r\n</div>\r\n<!-- /module text --> </div>\r\n <div data-lazy=\"1\" class=\"module_column tb-column col4-2 tb_x3ir748 last\">\r\n <!-- module text -->\r\n<div class=\"module module-text tb_28km748 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <h3 class=\"elementor-icon-box-title\"><b>Discover Opportunities</b></h3> </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div class=\"module module-text tb_k4wd748 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <p>Showcase your expertise and gain access to exclusive speaking, media, and thought leadership opportunities by hosting your free expert profile.</p> </div>\r\n</div>\r\n<!-- /module text --> </div>\r\n </div>\r\n </div>\r\n <div data-lazy=\"1\" class=\"module_row themify_builder_row tb_zey6690 tf_w\">\r\n <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\r\n <div data-lazy=\"1\" class=\"module_column tb-column col-full tb_tzr1690 first\">\r\n <span class=\"builder_row_cover tf_abs\"></span> <!-- module text -->\r\n<div class=\"module module-text tb_ow99244 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <h2>Getting Started Is Easy!</h2> </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div class=\"module module-text tb_q9nk980 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <p><strong>No barriers, no fees—just meaningful connections.</strong></p> </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div class=\"module module-text tb_st8e977 \" data-lazy=\"1\">\r\n <div class=\"tb_text_wrap\">\r\n <p>Whether you’re an industry expert looking for thought leadership opportunities or a content creator searching for the perfect speaker, guest, or contributor—<strong>Retail Leaders makes it simple to discover and connect.</strong></p> </div>\r\n</div>\r\n<!-- /module text --><!-- module buttons -->\r\n<div class=\"module module-buttons tb_v45a197 buttons-horizontal solid rounded\" data-lazy=\"1\">\r\n <div class=\"module-buttons-item tf_in_flx\">\r\n <a href=\"#\" class=\"ui builder_button tf_in_flx tb_default_color\" >\r\n Become a Member </a>\r\n </div>\r\n </div>\r\n<!-- /module buttons -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n<!--/themify_builder_content-->",
"protected": false
},
"excerpt": {
"rendered": "<p>Retail Leaders</p>\n",
"protected": false
},
"author": 1,
"featured_media": 0,
"parent": 0,
"menu_order": 0,
"comment_status": "closed",
"ping_status": "closed",
"template": "",
"meta": {
"_acf_changed": false,
"footnotes": ""
},
"class_list": [
"post-18",
"page",
"type-page",
"status-publish",
"hentry",
"has-post-title",
"has-post-date",
"has-post-category",
"has-post-tag",
"has-post-comment",
"has-post-author",
""
],
"acf": [],
"aioseo_notices": [],
"builder_content": "<h1>Retail Leaders</h1>\n<p>Connecting the Top Voices in Retail</p>\n<p>Powered by RETHINK Retail, Retail Leaders is the premier platform for connecting top experts, thought leaders, and influencers with high-impact opportunities to share their knowledge, shape industry conversations, and elevate their visibility worldwide.</p>\n<a href=\"/become-a-member/\" >\n Get Started Now! </a>\n<h1>Retail Leaders</h1>\n<p>Connecting the top voices in retail.</p>\n<p>Retail Leaders is the premier platform that connects top retail experts, thought leaders, and influencers with exclusive opportunities to share their insights through speaking engagements, media appearances, and industry collaborations. Powered by RETHINK Retail, we make it easy for experts and content creators to discover, connect, and engage—all in one seamless marketplace.</p>\n<a href=\"/become-a-member/\" >\n Become a Member Today </a>\n<h2>What is Retail Leaders?</h2>\n<p>Retail Leaders helps the industry’s most influential event producers and content creators identify and confirm credentialed guests, speakers, and sources faster by providing them with direct access to RETHINK Retail’s exclusive communities of Global Retail Leaders (GRLs) and Top Retail Experts (TREs).</p>\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Leaders & Experts\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Industry Events\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Podcasts\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Content Creators\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Leaders & Experts\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Industry Events\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Podcasts\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Content Creators\n<h3><b>Connect With Experts</b></h3>\n<p>Discover and connect with top retail experts, speakers, and thought leaders to elevate your events, podcasts, and content with expert-backed insights.</p>\n<h3><b>Discover Opportunities</b></h3>\n<p>Showcase your expertise and gain access to exclusive speaking, media, and thought leadership opportunities by hosting your free expert profile.</p>\n<h2>See some of our featured experts</h2>\n<h2>Getting Started Is Easy!</h2>\n<p><strong>No barriers, no fees—just meaningful connections.</strong></p>\n<p>Whether you're an industry expert looking for thought leadership opportunities or a content creator searching for the perfect speaker, guest, or contributor—<strong>Retail Leaders makes it simple to discover and connect.</strong></p>\n<a href=\"#\" >\n Become a Member </a>\n<h2>See some of our featured Events</h2>",
"_links": {
"self": [
{
"href": "http://localhost/rl/wp-json/wp/v2/pages/18",
"targetHints": {
"allow": [
"GET",
"POST",
"PUT",
"PATCH",
"DELETE"
]
}
}
],
"collection": [
{
"href": "http://localhost/rl/wp-json/wp/v2/pages"
}
],
"about": [
{
"href": "http://localhost/rl/wp-json/wp/v2/types/page"
}
],
"author": [
{
"embeddable": true,
"href": "http://localhost/rl/wp-json/wp/v2/users/1"
}
],
"replies": [
{
"embeddable": true,
"href": "http://localhost/rl/wp-json/wp/v2/comments?post=18"
}
],
"version-history": [
{
"count": 39,
"href": "http://localhost/rl/wp-json/wp/v2/pages/18/revisions"
}
],
"predecessor-version": [
{
"id": 652,
"href": "http://localhost/rl/wp-json/wp/v2/pages/18/revisions/652"
}
],
"wp:attachment": [
{
"href": "http://localhost/rl/wp-json/wp/v2/media?parent=18"
}
],
"curies": [
{
"name": "wp",
"href": "https://api.w.org/{rel}",
"templated": true
}
]
}
We have now successfully connected our WordPress site and can retrieve our homepage to send to our Angular application
In a Node.js server, a service is a modular piece of code responsible for handling business logic, data processing, and communication with external APIs or databases. Services are typically used to keep controllers clean and maintainable by separating concerns.
Key Characteristics of a Service in Node.js:
Encapsulates Business Logic: Services contain the core logic of your application, such as authentication, data validation, or computations.
Reusability: Services can be used by multiple parts of the application (e.g., controllers, other services).
Separation of Concerns: They prevent controllers from becoming bloated by offloading processing tasks.
Interacts with Databases or APIs: Services often make queries to a database (e.g., MongoDB, PostgreSQL) or call external APIs.
Example of a Service in a Node.js (Express) Application:
Service Example
// services/userService.js
const User = require('../models/userModel');
async function getUserById(userId) {
return await User.findById(userId);
}
async function createUser(userData) {
const user = new User(userData);
return await user.save();
}
module.exports = {
getUserById,
createUser
};
Why Use Services?
Code organization: It makes the codebase more modular and readable.
Easier unit testing: You can test business logic separately from the controller.
Scalability: Services allow for easier modifications and expansions in the future.
