Writen Article

Defining Our Project

Before writing a single line of code, every successful project starts with clarity. It’s tempting to open your IDE, spin up a new app, and just start building — but without a plan, you’re likely to end up with messy code, missing features, and wasted time refactoring.

Defining your project early on gives you direction. It forces you to think not just about what you want to build, but what you need to build — and in what order. This is how real-world development teams ensure that what they deliver is valuable, maintainable, and scalable.

Why Planning Before Building Matters

Planning a project before writing code is one of the most overlooked — yet most critical — steps in software development. When you skip it, you may still end up with a working app, but it will often lack structure, scalability, or purpose. The goal of planning is to create a clear roadmap that defines what you’re building, why you’re building it, and how each piece connects to the larger system. This step transforms a vague idea into a tangible plan of action.

The first advantage of careful planning is clarity of purpose. It forces you to pause and think about what your application is really supposed to accomplish. Without that clarity, it’s easy to get caught up in adding features that feel exciting but don’t move the project toward its goals. Defining your purpose ensures that every component you design and every line of code you write contributes to solving a real problem. When your project has a well-defined purpose, you can communicate it clearly — to users, collaborators, and even to yourself when you revisit the code months later.

Next comes better architecture. Once you know what you’re building, you can design the technical structure to support it. Planning gives you the opportunity to map out your backend modules, database schemas, and frontend components in a way that’s logical and maintainable. Instead of patching new features onto a brittle foundation, you can build an architecture that’s modular, testable, and ready to scale. This prevents future technical debt and makes your application much easier to evolve as new needs arise.

A clear plan also leads to faster development — even though it might feel like you’re slowing down at first. Many developers rush into coding because they equate speed with progress. But unplanned work almost always leads to rework. By taking time to think through your features and their relationships up front, you minimize the number of surprises later in the process. You’ll write cleaner code, identify dependencies early, and spend far less time debugging problems that could have been avoided with a solid roadmap.

Another key benefit is improved collaboration. Even if you’re building this project alone right now, adopting a team-oriented mindset prepares you for real-world workflows. When a project is well-documented and broken down into clear features, tasks, and responsibilities, it becomes easy for others to jump in, understand the context, and contribute effectively. Teams can coordinate work without stepping on each other’s toes, and new contributors can ramp up quickly without lengthy explanations. Good planning makes your project more open and sustainable.

Ultimately, planning is about foresight — making decisions while you still have the flexibility to change direction cheaply. Once code is written and dependencies are established, every change becomes more expensive. By planning now, you give yourself the freedom to experiment on paper rather than in production. The time you invest upfront pays itself back many times over in saved development hours, fewer bugs, and a cleaner, more maintainable product.

What Is an MVP and Why It Matters

When building a new application, one of the biggest mistakes developers make is trying to do everything at once. You start with a simple idea — maybe it’s a to-do app, a scheduling tool, or a budgeting system — and before you know it, your feature list has grown into a full-scale platform. There’s a login system, user profiles, notifications, file uploads, team sharing, dark mode, analytics, and more. The excitement of creating something big can easily overshadow the discipline required to get something usable into the hands of real users. That’s where the concept of the Minimum Viable Product (MVP) comes in.

An MVP is the most basic version of your product that still delivers genuine value to users. It’s not a prototype or a half-finished demo — it’s a functional product that solves the core problem your app is meant to address. The “minimum” part doesn’t mean cutting corners or releasing something broken; it means stripping away everything that isn’t essential to validating your idea. The “viable” part means it actually works — it performs the core task reliably and provides a meaningful experience. The purpose of an MVP is to prove that your idea is worth pursuing before investing time and resources in all the nice-to-have features.

Building an MVP forces you to focus on what matters most: solving the user’s primary problem. For example, if your goal is to help people stay organized, your MVP doesn’t need advanced task sharing or color-coded priorities. It needs the ability to create, view, and manage tasks — nothing more. By launching with just the essentials, you can validate your concept, gather feedback, and make improvements based on real usage instead of assumptions. This approach saves months of unnecessary development time and prevents you from overengineering a product that nobody ends up using.

Another key benefit of defining your MVP is momentum. Finishing a complete, functional version of your app — even a small one — builds confidence and motivation. It allows you to experience the full lifecycle of product development: ideation, design, backend and frontend integration, testing, and deployment. Each of those steps teaches lessons that inform every feature you build afterward. When you work on too many features at once, it’s easy to get lost in the middle of the process and lose sight of your goal. An MVP gives you a finish line to reach, and that finish line creates progress you can see.

From a technical standpoint, the MVP mindset also helps ensure scalability and maintainability. By focusing on a few core features first, you can test your architecture under real conditions and refine your backend design before it becomes too complex to change. You’ll identify performance bottlenecks, clarify your API contracts, and validate your database schema early. In short, you learn faster and build smarter.

Perhaps the most valuable reason to build an MVP is feedback. No matter how experienced you are, you’ll never perfectly predict how users will interact with your app. People find creative ways to use software — often in ways you didn’t anticipate. By releasing your MVP early, you get insight into real behavior, which helps you make informed decisions about what to build next. Instead of guessing, you can evolve your app based on evidence.

In essence, the MVP isn’t just a milestone — it’s a mindset. It keeps your project lean, focused, and adaptable. It’s about doing the most with the least, validating your idea quickly, and then iterating intelligently. As you build the rest of this course, think of each step as part of your MVP journey. Every module, component, and feature we add will serve a purpose — not because it’s flashy, but because it makes the product more valuable to the people who use it.

How to Break Down a Project Into Features

Once you understand the purpose of your project and have a clear vision for your MVP, the next step is to translate that vision into specific, actionable features. This is where your idea starts to take shape in practical terms. It’s no longer just “a to-do app” or “a web platform” — it becomes a structured list of capabilities that define what your application can actually do.

Breaking down a project into features is both an art and a discipline. The process begins with understanding your core objective — the real problem you’re trying to solve. Every app exists to make something easier, faster, or more enjoyable for its users. If you start with a vague or overly broad idea, like “I want to help people manage their time,” you’ll quickly find yourself swimming in endless possibilities. But when you define a clear purpose — “I want to help users organize tasks in one place and track their progress” — your development path becomes focused and achievable.

The next step is to imagine your user’s experience from start to finish. Ask yourself: what does a person need to be able to do to accomplish the goal of my application? This question helps you identify your core user actions — the essential things users must be able to perform for your app to have value. For a to-do app, that might include creating tasks, organizing them into lists, and marking them as complete. These actions form the foundation of your product. If a user can’t perform them, the application fails to fulfill its purpose, no matter how beautiful or complex the rest of the system is.

Once you’ve defined those core actions, you can identify supporting features — the elements that make those actions possible. For example, to let users manage tasks, you need authentication so each person’s data remains private. You need persistent storage to save their tasks and lists between sessions. You might also need image uploads if users want to attach screenshots or reference photos to their tasks. Supporting features are the building blocks that allow your core features to exist.

At this stage, it’s common to get carried away with possibilities. You might think about adding push notifications, reminders, team sharing, or integration with third-party services like Google Calendar. These are great ideas, but they belong in a later phase. This is where prioritization becomes critical. Not every feature is essential for your MVP, and not every feature should be built right away. Your goal here is to identify the minimum set of features that make your app usable and valuable. Everything else can wait until after you’ve validated that the core experience works.

A practical way to approach prioritization is to categorize features into three tiers:

Core features – absolutely required for the app to function.
Supporting features – enhance usability but can be built after launch.
Future enhancements – optional features that add polish or complexity later.

For instance, in a to-do app:

Creating and managing tasks is a core feature.
Adding due dates or file uploads might be supporting features.
Integrations with other platforms could be future enhancements.

By structuring your features this way, you prevent scope creep and keep your development organized. You also make it easier to plan your work in stages, which aligns perfectly with how we’ll later define epics and tasks for this course.

Breaking down a project into features is like creating a map before a road trip. Without it, you might still reach your destination, but it will take longer, cost more, and involve a lot of unnecessary detours. With a well-defined feature list, you know exactly where you’re going and what you need to build to get there.

Defining the MVP for Our Project

Now that we’ve talked about what an MVP is and how to break a project into features, it’s time to put those ideas into action. In this section, we’re going to define the actual product we’ll be building throughout this course — a full-stack, production-grade To-Do Application — and outline the features that will make up our Minimum Viable Product (MVP).

The purpose of this project isn’t just to build a to-do list; it’s to demonstrate how to architect and develop a complete web application from the ground up, using real-world technologies and best practices. We’ll approach this project the same way a professional software team would — with a clear definition of goals, features, and scope before writing any code.

When you think about a to-do app, it might sound simple at first. You add tasks, mark them complete, and move on. But the moment you want to make that app production-ready, things become much more interesting. You have to consider authentication, data storage, image management, scalability, and a user interface that feels polished and responsive. These details are what turn a coding exercise into a real product — and they’re exactly what we’ll be tackling here.

Let’s start by defining the core goals of our MVP.

MVP Goals

The main objective of our MVP is to create a fully functional, cloud-connected to-do application that users can sign into, manage their own data, and interact with through a clean, modern interface. It should feel like a real application — something you could deploy publicly and continue to build upon.

1. Secure User Authentication

Users should be able to register, sign in, and manage their own tasks. All authentication will be handled by our own backend, using email and password with JWT (JSON Web Tokens) for secure sessions.

2. Task and List Management

Users need the ability to create and organize tasks into lists. Each task should support adding a name, description, and completion state.

3. Persistent Data Storage

All user data — including tasks, lists, and profile details — should be stored in a database so that it’s saved between sessions and accessible across devices.

4. Profile Management with Image Uploads

Each user should be able to upload a profile picture, which will be stored securely in AWS S3. This gives us a real-world example of handling file uploads and managing secure cloud storage, without adding unnecessary complexity to the task system itself.

5. Responsive User Interface with Dark Mode

The frontend should be modern, responsive, and easy to navigate. We’ll implement both light and dark themes from the start, allowing users to personalize their experience. Adding theming early ensures styling consistency and flexibility as the project grows.

6. Reliable API Layer

The backend will expose a set of RESTful APIs built with NestJS that handle authentication, task management, profile management, and image uploads. These APIs will connect seamlessly to MongoDB for persistent data storage.

MVP Feature Breakdown

Each of the following features corresponds directly to the MVP goals above and will eventually become its own epic — a larger body of work made up of smaller, actionable tasks.

1. User Authentication

We’ll create a registration and login flow that allows users to securely access their accounts. Passwords will be hashed and stored safely, and once a user signs in, they’ll receive a JWT token that authenticates them across all API calls. This ensures that each user’s data remains private and isolated.

2. To-Do Lists

Lists will act as containers for related tasks — for example, “Work,” “Personal,” or “Groceries.” Users should be able to create new lists, rename them, and delete them when no longer needed. This helps users organize their life in a structured way.

3. Tasks

Tasks are the heart of the application. Each task will have a title, optional description, and completion state. Users should be able to create, edit, mark complete, and delete tasks. This feature will also handle how tasks are stored in the database and displayed on the frontend.

4. Profile Management

Every user will have a profile section where they can update their display name and upload a profile picture. This feature will demonstrate how to securely handle file uploads using AWS S3 presigned URLs, ensuring files are stored efficiently and safely in the cloud.

5. Responsive Dashboard with Dark Mode

We’ll build a clean and modern dashboard in Angular that connects to our backend API. The dashboard will display the user’s lists and tasks, handle interactions like adding or deleting items, and include a dark mode option to personalize the user experience. By designing with theming in mind from the beginning, we’ll make our UI more scalable and consistent.

6. Backend API and Data Layer

The backend, built with NestJS, will manage all core logic — from authenticating users to handling CRUD operations for tasks and lists. It will connect to MongoDB for persistent data storage, manage environment variables securely, and include endpoints for profile management and image uploads.

Beyond the MVP: Future Enhancements

Once the MVP is complete and deployed, we’ll have a strong foundation to build upon. From there, we can explore more advanced features that enhance collaboration, automation, and personalization.

1. Team Collaboration

Allow users to share lists, assign tasks, and collaborate in real-time with other members.

2. Task Scheduling and Reminders

Introduce due dates, recurring tasks, and push notifications for upcoming deadlines.

3. Filtering, Sorting, and Tagging

Provide advanced tools for organizing and prioritizing tasks based on tags, categories, or completion status.

4. Advanced Analytics

Add dashboards and visual summaries that show progress, productivity trends, and task completion insights.

5. Mobile and PWA Support

Enable offline access and installable mobile app functionality through Progressive Web App (PWA) enhancements.

6. AI-Assisted Features

Integrate AI to suggest task priorities, automate reminders, or help users plan their day intelligently.

By focusing first on our MVP, we’ll ensure our core product is stable, scalable, and maintainable. Then, as we expand into later phases, these enhancements can be introduced incrementally without disrupting the foundation we’ve built.

Welcome to the Series: Building a Production-Ready Web App from Scratch

The Goal of the Course

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.

Creating an Angular App with a Headless WordPress CMS Part 3: Connecting the WordPress Site

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.

link: http://localhost/rl/wp-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:

    const { getHomepageData } = require("../services/wordpressService");

const getHomepage = async (req, res) => {
  try {
    const homepage = await getHomepageData();
    res.json(homepage);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};

module.exports = { getHomepage };

Creating the Route

Lastly, to get the data and return it to our frontend we need to build our route. In our wordpressRoutes.js file past the following:

    const express = require("express");
const { getHomepage } = require("../controllers/wordpressController");

const router = express.Router();

router.get("/homepage", getHomepage);

module.exports = router;

Add the Route to the Server

To make the route accessible we need to add the following code to our server.js file.

    app.wordpressRouter = require("./routes/wordpressRoutes");

// Routes
app.use("/wordpress", wordpressRoutes);

Testing it Out

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

What is a Service in NodeJS

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.

Creating an Angular App with a Headless WordPress CMS Part 2: Creating an Express Middleware Server

To connect our Angular app to our WordPress site we are going to go through an Express server that is going to function as our middleware. We want to do this because we want to show different content to logged in users and users with different roles and it is going to be easier to manage that outside of the frontend. Additionally we are going to be creating content on the Angular app that will be pushed to the WordPress database and we will want to make sure that that data is secure before allowing it to go to the database. Let’s start setting up the server.

First thing is going to be to create a new folder in our repository called “express-middleware”. From here we can go into that folder and install our express server.

    npm install express axios cors dotenv

Next we are going to create the structure of our express server. It should look like the following.

    wp-express-middleware/
│── node_modules/
│── src/
│   ├── routes/
│   │   ├── wordpressRoutes.js
│   ├── controllers/
│   │   ├── wordpressController.js
│   ├── services/
│   │   ├── wordpressService.js
│   ├── config/
│   │   ├── dotenvConfig.js
│   ├── server.js
│── .env.development
│── .env.production
│── package.json
│── README.md

From here we are going to open our .env.development file and add our development variables. Don’t worry about their current values. We are just setting it up for what we will need later.

    # Development Configuration
WP_API_URL=https://dev-your-wordpress-site.com/wp-json/wp/v2
PORT=5000
CORS_ORIGIN=http://localhost:4200

# WordPress Authentication
WP_USER=dev-user
WP_PASSWORD=dev-app-password

# Debugging
LOG_LEVEL=debug

Next, open up the .env.production file and add the production variables

    # Production Configuration
WP_API_URL=https://your-wordpress-site.com/wp-json/wp/v2
PORT=8080
CORS_ORIGIN=https://your-angular-app.com

# WordPress Authentication
WP_USER=prod-user
WP_PASSWORD=prod-app-password


# Security & Logging
LOG_LEVEL=info

Let’s make sure we have dotenv and cross-env installed

    npm install dotenv cross-env

Now, let s modify the dotenvConfig.js file to load the correct .env file based on NODE_ENV.

    const dotenv = require("dotenv");
const path = require("path");

// Determine environment (default to 'development')
const envFile = process.env.NODE_ENV === "production" ? ".env.production" : ".env.development";

// Load the correct .env file
dotenv.config({ path: path.resolve(__dirname, `../../${envFile}`) });

module.exports = {
  WP_API_URL: process.env.WP_API_URL,
  PORT: process.env.PORT || 5000,
  CORS_ORIGIN: process.env.CORS_ORIGIN,
  WP_USER: process.env.WP_USER,
  WP_PASSWORD: process.env.WP_PASSWORD,
  REDIS_HOST: process.env.REDIS_HOST,
  REDIS_PORT: process.env.REDIS_PORT,
  LOG_LEVEL: process.env.LOG_LEVEL || "info",
};

Next, we need to update our server.js file to use the correct configuration.

    const express = require("express");
const cors = require("cors");
const { PORT, CORS_ORIGIN } = require("./config/dotenvConfig");
const wordpressRoutes = require("./routes/wordpressRoutes");

const app = express();

// CORS configuration
app.use(cors({ origin: CORS_ORIGIN }));
app.use(express.json());

// Routes

// Start server
app.listen(PORT, () => console.log(`Server running on port ${PORT} (${process.env.NODE_ENV})`));

Finally we need to update our package.json file to load the correct .env file in different environments.

    
  "dependencies": {
    "axios": "^1.7.9",
    "cors": "^2.8.5",
    "cross-env": "^7.0.3",
    "dotenv": "^16.4.7",
    "express": "^4.21.2"
  },
  "scripts": {
    "start": "cross-env NODE_ENV=production node src/server.js",
    "dev": "cross-env NODE_ENV=development nodemon src/server.js"
  }

We should now be all set. We can now start our server.

    npm run dev

Creating an Angular App with a Headless WordPress CMS Part 1: Creating the Angular App

When creating an Angular app with a Headless WordPress instance, the Angular application and the WordPress website sit separate from each other, where the end result is an Angular application where your desired domain points to, and a hosted WordPress site that your Angular application pulls in data from using WordPress APIs. To start our project we are going to create our Angular Application. So, create a GIT repository called “Retail Leaders” and open it in Visual Studio Code or the text editor of your choice.

Once your text editor is opened we can then install our Angular app, and we are going to install the most recent version of Angular 19, choosing to use standard CSS, a SSR application, and including routing.

    npx -p @angular/cli ng new retail-leaders-ui

This will create our new Angular app. Once installed we will install our UI library. In this project we will be using PrimeNG. To do this we will enter our new application.

    cd retail-leaders-ui

and install our PrimeNG library

    npm install primeng @primeng/themes primeicons primeflex

Now we need to update our app.config.ts file to use a PrimeNG theme.

    import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes), provideClientHydration(withEventReplay()),
     provideAnimationsAsync(),
     providePrimeNG({
         theme: {
             preset: Aura
         }
     })
    ]
};

To test it out we can create a homepage component

    npx ng g c homepage

create a route for the homepage

    import { Routes } from '@angular/router';
import { HomepageComponent } from './homepage/homepage.component';
export const routes: Routes = [
    {path: '', component: HomepageComponent},
];

and then add a PrimeNG button to the homepage

    <div class="card flex justify-center">
    <p-button label="Check" />
</div>

    import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
@Component({
  selector: 'app-homepage',
  imports: [
    ButtonModule
  ],
  templateUrl: './homepage.component.html',
  styleUrl: './homepage.component.css'
})
export class HomepageComponent {

}

If we serve up our application we should then see everything working.

Go ahead and delete all of the content inside the app.component.html file besides <router-outlet />. Our application is now set up and now ready for us to start connecting our WordPress site.

How To Get More Contracts On Upwork

Overview

Upwork is probably the best platform out there when it comes to finding potential freelancing work. It has tons of opportunities in all sorts of industries, and it makes the proposal and payment aspects of finding clients as easy as it can be. However, due to its popularity, the competition for projects is very high. It can be very difficult to get new clients, and can be disheartening when you spend all your connects submitting proposals but don’t see any results.

I have been working on Upwork for over ten years, and in that time have developed a system that greatly increases the likelihood that your proposals will be seen and that when they are viewed they will result in the potential client reaching out. The process I follow is simple but very effective and can be broken down into six parts.

Badges & Ads

The badges that you have play a major factor in the changes someone will pick your proposal.

Filters

Defining the filters for the jobs you are looking for is critical to finding worthwhile contracts.

Timing & Applicants

The timing of a contract and the number of people that have already applied are crucial to finding clients that will actually respond.

Reviewing the Client Proposal

The amount of good clients out there is small, you need to be able to recognize the good ones.

Bidding & Writing the Proposal

There is a certain formula to use when bidding for contracts and writing a winning proposal.

Communicating with the Client

If the potential client does view your proposal and message you, the communication after that point can determine success.

What Types Of Clients Are We Looking For

Before we dive into the content of this article, let’s take some time to talk about the type of clients we want to find and work for, because not all clients are created equal. On Upwork the majority of people posting jobs aren’t going to hire anyone or are looking for “something for nothing”, meaning that they have very high expectations for the work they want done, but don’t want to spend any money. This can lead to a lot of worthless contracts and a lot of clients who you honestly don’t want to work with. They will gravitate towards non-U.S.-based workers because the rates are lower and then provide poor feedback when the communication isn’t flawless and all their expectations aren’t met. These are not the types of clients we are looking for.

However, there is a set of potential clients on Upwork who do need work done and have a budget to get that work accomplished. These are the types of customers we are looking for, but it takes some work to filter out and find these contracts. In this article, I will discuss my process of finding these clients so the connections you spend and the proposals you submit are only for contracts that you have a chance at getting and will actually make you some money.

What Is Our Goal

Our goal is simple, to make money on Upwork. We can do this by using filters and other information Upwork provides on clients, finding valuable contracts and applying to them with a certain formula so we don’t have to spend a lot of connects and the client has a high chance of responding. The process outlined in this article applies to both U.S. and non-U.S. based freelancers, and is based around submitting proposals to these high-value contracts based on the U.S. industry average and below their top budget threshold. Our goal is to paint ourselves as a freelancer who is more than capable of the task we are applying to and effectively weeding out and ignoring the low-paying jobs and poor clients.

Breaking Down Badges & Ads

As a freelancer on the Upwork platform, Upwork offers various badges and advertising options to help clients identify top talent and boost freelancer visibility. Additionally, while Upwork is a great tool, its main business is to make money and getting freelancers to spend connects is one of the primary ways they do this. Because of this, some of these features are more valuable than others and knowing which ones are important and work in landing more clients can save you a lot of money in the long run. Below are the different badges freelancers can get as they work contracts on Upwork.

Badges

Badges are far more valuable on Upwork than ads. You don’t have to pay for them (Expert-Vetted Badge excluded) and they are shown under a freelancers name when a client views a list of submitted proposals. By their very nature they do nothing but help you stand out as a freelancer and you should do what you can to get badges and keep them when they are awarded. Below is the list of badges you can receive.

Rising Talent Badge

The Rising Talent Badge is given to new freelancers who show string potential based on their early performance. To get this freelancers need to 100% complete their Upwork profile, regularly submit proposals, and receive good reviews from clients.

Top Rated Badge

The Top Rated Badge is awarded to experienced freelancers with a string work history and excellent client feedback. To get it freelancers will need to maintain a Job Success Score of 90% for 13 out of the last 16 weeks and have a minimum of $1,000 in earnings over the past 12 months.

Top Rated Plus Badge

The Top Rated Plus Badge is given to freelancers who have successfully completed large and complex projects with great client satisfaction. To get it, freelancers must maintain a Job Success score of 90% or higher 13 out of the last 16 weeks, and have earnings of at least $10,000 in the past 12 months.

Expert-Vetted Badge

The Expert-Vetted Badge is supposedly given to the top 1% of freelancers on Upwork, and is meant to highlight freelancers who are true experts with the goal of landing larger enterprise clients. Got get this freelancers will need to spend a lot of connects to apply, pass a skills assessment and interview, and have a strong work history with good client feedback.

When it comes to the badges listed above while all are valuable they get more valuable down the list with the most valuable being the Top Rated Plus and Expert-Vetted badges. The top rated plus is a strong badge because it shows you are active on the platform, have a high rating recently, and is arguably harder to get than the expert vetted badge. Upwork is a place where people are looking for the best deals, and it is hard to find the clients willing to pay real money. When these clients look at their proposal lists and the choice is between someone with the Top Rated Plus badge and someone without it, they will most likely go with the person who has the badge. The issue is to get the badge you already have to be somewhat successful, which is where the first two badges and the rest of this article come into play.

As for the Expert-Vetted badge, there is no denying it is valuable. I would say it is as valuable, as the Top Rated Plus badge simply because it is more rare. However, you do have to pay for it and it was created with the intention of bringing in more enterprise level clients to Upwork. Honestly if I had to pick I’d rather have the Top Rated Plus.

Ads are a different story than Badges as they cost money, and serve the purpose of showcasing freelancers to potential clients. In my experience I have not seen a lot of value in running ads, and 95% percent of my clients have come from me submitting proposals, not from someone reaching out from seeing my profile. Honestly, my view on Upwork ads is they are just another way for Upwork to make money and don’t provide enough value to freelancers to make them worthwhile. The types of ads freelancers can use on Upwork are below.

Boosted Proposals

Boosted Proposals allow freelancers to bid for a top spot in a client’s proposal list by spending connects. This can become very expensive and I find it hard to recommend ever boosting a proposal. Instead, I would recommend using the filter strategy I have below.

Filtering for the best contracts

When it comes to finding valuable contracts the search and filter are probably your strongest tool. When used correctly you should be able to get a relatively short list of refined contracts that are in the best position for you to land. The filters that you use may vary a little based on your industry and your experience but whether you are starting our or an established freelancer the formula is the same.

Step 1: Search for your industry

It is important to start your filter with a specific search. You can always update your search but I recommend starting broadly. For example, as someone who does full stack web development, I start my search with Web Development so I get a very large list. Let’s take an actual look at the results.

As you can see there are thousands of results, but that’s ok. We can then use the filters on the left to get a specific list of the items that are best suited for us. So let’s start breaking down the filters.

Step 2: Filter the search results

Now that we have a large list of results in our industry we can start narrowing that down to contracts that are going to be best suited for us. Here are the filters that I think are the most valuable.

U.S. Only Filter

The first filter offered to us is to filter for contracts that are looking specifically for people in the US. Now this obviously doesn’t apply to everyone since there is a large number of freelancers outside of the United States but if you are, then you want to make sure you check this as they pay is likely to be better.

Sort By Filter

The next filter is the option to sort by newest, relevance, client spend, and client rating. Keep this on ‘Newest’. The contracts we are looking for are the ones that have been recently created. Essentially we are trying to find and bid on contracts that have been created recently as they will have the highest likelihood of being viewed. Once people start applying you’ll get lost in the list.

Experience Level Filter

The experience level you select will be based on what you feel your experience level is, but you should factor in your track record on Upwork as well. If you haven’t worked any contracts in the past year, even if you are an expert you’ll probably want to select down on the experience level. The contract price may be less but when you’re first starting out or starting again that’s ok. When it comes to success in UpWork, consistency is key.

Job Type Filter

The job type filter is an interesting one since it allows you to filter by fixed price or hourly rate. I recommend sticking to the hourly rate. Research standard rates in the United States for the industry and then base your number against that, your location, and what you have your hourly rate set as in your profile. At this point, your profile rate should be lower than the researched rate and the rate you are actually willing to work for should be lower than what your profile says. From there you can filter for your experience level and that researched rate, knowing that you will be able to submit a competitive bid for the given contracts. The key thing to keep in mind is that the clients we are looking for are posting bids to Upwork to get a deal, but they also are willing to spend some money.

Number Of Proposals Filter

The number of proposals filter is another valuable source for narrowing down contracts you should apply to. My general rule is that I select

less than 5
5 to 10
and 10 to 15

Any more than that I don’t think they are worth submitting anything for. I believe this because I base my submissions completely around submitting bids for contracts that were recently created that I am qualified for. The ones you want to find are the contracts that are over your hourly rate, have been recently created, and don’t have a ton of proposals yet. This is your highest chance of getting seen.

Sample Filters

Let’s run through some samples to see the filters in action. Sticking with web development because it is what I know.

Example 1

Assume there is a freelancer from the United States who just started freelancing. They have some knowledge and a personal website, but no real experience or clients. With a basic Google search, we can find that the average rate of web developers in the United States is around $120 an hour. Now we know that since this freelancer is just starting out they aren’t going to want to be charging the average rate, they will want to be below it. So, let’s say they set their hourly rate at $50 an hour on their profile and they are ready to start searching.

They would start their search, searching for web development, and then once they get the list of results they would want to

check U.S. only
Select Entry Level and Intermediate experience
Select an hourly job type with $50 an hour
select less than 5 to 15 proposals

This is going to give us a list of around 100 records sorted from newest to oldest. The freelancer would then need to look through the list finding the contracts that are best suited for their experience. The older the contract the more specific the fit should be with minimal contracts older than 5 days being applied to.

Example 2

Let’s take the same example but say the person is not from the United States. Keeping all the same filters and unchecking U.S. only the list of available contracts in our list instantly more than doubles. In this case, while maybe counter-intuitive I would recommend raising the rate to $100, which should reduce the number of options in our list. When this is applied our list drops down to 67 results. At this point, the freelancer can then use the same strategy listed above where they apply with a rate that is a little lower than what their profile rate is.

Filters Conclusion

In conclusion when it comes to filtering for worthwhile contracts to bid on, you want to try to get a record set of around 100 records. All the records in the filtered set should be in your experience level and above the hourly rate you have set on your profile. Additionally, each of these records should have less than 15 proposals and be filtered from newest to oldest. One key thing I want to call out here as well is that you may be tempted to drop the rate to find more contracts. Making that choice is up to you and could work but I generally don’t recommend it, even for freelancers outside of the United States. The cheaper the client the worse they are going to be and your Job Success Score is going to suffer. The goal isn’t just to find contracts but contracts with clients who are looking to hire a freelancer and actually have a budget for one.

Reviewing The Client Proposal

Now that we have a condensed list of potential gigs, it’s time to start looking for ones that could be a good fit. Since our list is filtered by newest to oldest we just need to start at the top and go down the list. I will use my current list as an example highlighting a bad contract and a good one.

Bad Proposal

The proposal featured is what I would consider a bad proposal, even though it falls within our filtered search. I would consider this a poor proposal first and foremost because if you look at the average hourly rate they are spending $10.28/hr which means while they may have an hourly rate of $100 listed they will never hire someone for probably more than $15 an hour.

Additionally, if you look at their past contracts around 80% are the same project asking people to buy their product on Amazon, and the ones that do have to do with their website are for under $15 an hour and with different contractors all working for less than ten hours.

This contract isn’t worth the time it took to review it. The client will be nothing but trouble if they ever even hire for the job and they are looking for the lowest rate they can find and will not stay with you.

Good Proposal

This proposal is one that I would consider a good proposal. The Client clearly writes out what they are looking for and lists the skills they would want. The amount billed is consistently a high amount signifying long-term relationships and while the average rate could be higher it may be worth taking a change and applying. Add to this the job was posted 2 hours ago and has less than 10 bids, it is a good option.

Bidding & Writing The Proposal

Once we have found a good contract we want to apply to we can click into it and start writing our proposal. Let’s stick with the good proposal we saw in the above section. In this contract, the budget listed is $20 – $60/hr, and looking at their past work they hired contractors for $30/hr and they all seemed to be non-U.S.-based freelancers or an agency. However, we did have the U.S. only filter click. Using this information we can then determine what we would want to bid for this.

I would recommend bidding anywhere from $30 – $40 an hour for this contract. We already know that this client is comfortable paying $30 an hour but their budget indicates that they are probably willing to pay more. probably not $60/hr but they would probably pay $40 for the right candidate. How much you bid should really depend on your location and experience. I have experience so I will bid $40/hr.

The next thing we need to do is schedule the rate increase. I always set this to never. If you want to increase the rate do that after the contract has started. Have them close the contract and create a new one. No reason to say they will be paying more before you ever even get the gig.

Finally comes the cover letter and additional questions. When it comes to the cover letter I have a particular format that I use for every contract I bit on. I will adjust the content but the general structure remains the same. Here is an example using the sample contract.

Job Details

About Us Driveline Baseball is a data-driven baseball development organization that combines technology, biomechanics, and cutting-edge training methods to help athletes reach their potential. We’re seeking a talented contract designer to help evolve our digital presence.

Position Overview – Part-time/seasonal contract position – Remote work possible – Project-based compensation – Flexible hours – Opportunity to work with a leading sports performance organization

Responsibilities – Collaborate with our internal team to create responsive web design elements – Develop and refine assets that align with our brand identity – Deliver concepts, prototypes, and final designs on a project-by-project basis

Required Skills – Strong web design capabilities – Experience with responsive design – Proficiency in modern design tools (Figma, Adobe Creative Suite, etc.) – Understanding of current web design trends and best practices – Ability to work independently and meet deadlines – Sports industry experience is a plus

Equal Opportunity Employer We are an equal opportunity employer and all qualified applicants will receive consideration for employment without regard to race, color, religion, national origin, sex, sexual orientation, age, disability, gender identity, marital or veteran status, or any other protected class.

Cover Letter

Hello! My name is Matt Morgan, and beyond my love of baseball (Go Cardinals!!!) , I am an expert in web design and development. I would love to talk with you more about your project.

I have been working as a freelancer designer for over 10 years and I am confident I can deliver the results you are looking for. I have experience in Figma, Canva, and Adobe and also have experience developing websites, so I fundamentally understand how designs are used when creating products. Given that I have worked as a freelancer for so long, I have plenty of experience working independently, tracking projects, holding myself accountable to gathering requirements and deadlines, and delivering tasks on time. Additionally, I have worked with both small and large teams from major companies such as Thomson Reuters to smaller companies such as Search Solutions Group, and anything in between.

The foundation of my business is not just freelance design, but ultimately to make your life easier and your business grow. I pride myself on establishing trust, clear and consistent communication, and professional working relationships with all my clients. I like to call it a professional business with an individual personal touch. I complete all of my work personally, I don’t outsource anything, and I track all of my projects on project management boards so you will always know the work that is being done and the status that it is currently in. If you would like to find out more about me or see some of my previous work, you can do so at https://www.morganwebdevelopment.com/

Thanks for your consideration,

Matt Morgan

Breaking down the cover letter

I start each cover letter with some form of the first two sentences. I introduce myself, add a personal touch around their business if I can, and list my expertise with keywords taken from their job description. The second sentence is always the same.

In the next paragraph, I will always call out that I have been working as a freelancer for a long time. You don’t even have to call out the specific amount of years, you just want to state that you have experience and the following sentences will give them confidence on that. Your next sentence should be specifically about how you have experience in the specific skills they are looking for, and how you have more experience than they need. You want to give the impression you can’t just do the job but could do even more if they needed you to. Finally, in the final sentences, I always call out that I meet deadlines and have worked independently and with teams for small and large companies. Essentially trying to convey that I can fit into their current business structure no matter what it is.

The Third paragraph is where I tell them about how great I am as a freelancer and this paragraph always remains pretty much the same. I call out how I care about their business, communication, and tracking projects, and I link my portfolio. I will always only link my portfolio because I get to directly control the marketing text that is on there and the featured businesses and work that I want to showcase. The other content is there because the reason most freelance relationships fail is because the client doesn’t feel like the freelance is communicating with them enough, isn’t professional, or meeting their needs. These few sentences do a lot to drive home that you are a professional they can trust.

Communicating With The Client After Connection

After a client views your profile and reaches out to you, the chances of success go way up, but there are things you can do to make sure you are the one who gets the contract. In general, the client is going to reach out to multiple freelancers, and as mentioned above, communication is one of the key ways to get a client interested. Your goal should be to get them on a web call so you can make the sale.

Here is a list of communications you should send once a client has reached out.

The first message you send should be right after they have connected, and should thank them for reaching out and offer a chance to meet to talk more about the contract. “Hey {Person’s Name} thanks for reaching out. I think I could be a great fit for your project, and I would love to talk with you more about what you are looking for. If you have time feel free to book a time to meet with me here on Upwork or through my Calendy Link {meeting link}.”
If they respond to the first message keep pushing for a meeting and try to make the sale. People on Upwork are trying to move quickly so don’t feel bad about trying to speed things along. If they don’t respond, send them a message the next day. Don’t send more than one message a day without hearing back from them.
If after a week you still don’t hear back from them, move on.

Really, the key is to be proactive about initiating the conversation. The sooner you can get them on a web call the better as that is where you can make the sale. If they are super eager and don’t need a call then don’t push for one, get the contract signed, but in my experience, web calls have an extremely high conversion rate. If you can get them on a call you can get the contract finalized.

Additional Articles

Creating the Project Plan Before We Start Building

In the first two articles in this series, I established why I am redesigning the Morgan Web Development website and the architecture I am going to use to do it. The existing WordPress site will evolve into a headless architecture where WordPress remains responsible for content management, Next.js becomes the […]

The Tech Stack and Tools for Our Headless WordPress and Next.js Website

In the first article in this series, I explained why I am redesigning the Morgan Web Development website around a headless WordPress architecture. The larger goal is to demonstrate how a growing business can move from a traditional WordPress website toward a more structured digital platform when it needs greater […]

Redesigning a Website with Headless WordPress and Next.js

A lot of businesses begin with a website that is intentionally flexible. WordPress, a good theme, a page builder, and a collection of plugins can give a small team everything it needs to establish an online presence without making a large investment in custom software. Someone in marketing can create […]

Defining Our Project

Welcome to the Series: Building a Production-Ready Web App from Scratch

The Goal of the Course

Creating an Angular App with a Headless WordPress CMS Part 3: Connecting the WordPress Site

7 Steps for Successful Project Planning

Introduction

Every project you plan will be different. It will have different timelines, different objectives, and different tasks that will need to be completed. However, no matter what the project is, there is a checklist of items that you can run through during the planning process, that if you complete will make sure the project runs smoothly.

1. Define an MVP

An MVP is a Minimal Viable Product, and it essentially means the minimum amount of features you technically need to consider your project “ready for market”. This is a very important thing to define before you ever get started and is going to be the guiding light when breaking down your project into it’s various tasks. It is also very important that you put forth a decent amount of thought into this because once you establish what your MVP is, you aren’t supposed to change it. There is a common trap that many projects fall into, where there is always another feature to add, the timeline keeps getting extended, and project is ultimately never completed.

A well thought out MVP will set the stage for you to know exactly what needs to be built to consider the project finished.

2. Set Up a Project Board

Once you establish an MVP you need a place to break down the project into features and tasks, and for this you need a project board such as Lancer. These boards allow you to record everything that needs to be completed to satisfy you MVP requirements, and easily see the status of all of the different items.

Project boards allow for you to assign tasks to members, track their progress, add comments, add subtasks, and see overall stats of the project. They are absolutely essential for the successful development of a project.

3. Thoroughly Define Pages, Features and Tasks

Just like with an MVP it is critical that you break down the project into it’s actionable items. I have always found it is best to separate it out into both pages and features. This is because pages will have design elements that you won’t consider a feature, there will be times where there are multiple features on a page, and there will be features that are used across multiple pages.

It is completely up to you if you decide to create each page and feature as a epic or a task, but each should still have it’s own actional card that has

the tasks or subtasks needed to mark it as completed
any copy and visual resources that may be needed
Estimated hours to complete
A start and end date

You should create cards for every aspect of your projects MVP. You may need to adjust estimated time or start dates but you should add as much information as you can before you start any development because it will ensure that you stay on course.

4. Create UX/UI designs

As a developer this can be a tough one but is a very important step to complete if you can and will save you time in the long run. It is way easier to update a design in Figma than it is to update templates in your code. Additionally, a well flushed out UI designs ensures that the entire scope of the project is captured and is incredibly useful in establishing your MVP.

When it comes to development, visual references to projects, pages and features allow for accurate architecture, more thorough cards, and increases the likelihood that gaps are caught before development starts.

5. Estimate Hours and Timelines

When planning a project it may be hard to know exactly how long each task will take and where it all will fit in on a calendar. However, it is important that you at least get estimates for all of your cards. This will allow for you to at least have a baseline for how much work there is to be done and how it all falls on the calendar. For example, you may notice after initial planning that you have 4 major tasks assigned in a single month with 250 estimated hours. This may not be an achievable goal and gives you the opportunity to move items around to create a realistic time-board before development ever starts.

6. Get Feedback from Team Members

If you are working with a team it is important that you don’t plan your project in a silo. Nobody knows everything, and the most accurate project plans come from collaboration. It is very important that everyone is in agreement on what the MVP requirements are, timelines, and what tasks are assigned to them.

7. Continually Update Your Project Board

Once the initial planning is done and you are ready to start development, it is important that you keep your project board up to date. It is a living document and is only useful if you take care of it. When maintained properly it will provide valuable feedback about the project, what/who is struggling, what estimates were right and wrong, and provide the information you need to adjust in the right way. Additionally, a well maintained board will serve as a reference for future projects and estimates and each future development project should become easier to plan.

Setting Up PrimeNG on an Angular Application

PrimeNG is a popular UI component library for Angular applications, providing a rich set of high-quality components to build sophisticated web interfaces. This guide will walk you through the process of integrating PrimeNG into your Angular project.

Step 1: Create A New Angular Project

If you don’t already have an Angular project, you can create one using the Angular CLI. Open your terminal and run:

    ng new primeng-app
cd primeng-app

Then remove everything from ‘app.component.html’ except for <router-outlet />

Step 2: Install PrimeNG, PrimeFlex, and PrimeIcons

    npm install primeng primeflex primeicons

Step 3: Configure Angular Project to Use PrimeNG, PrimeFlex, and PrimeIcons

In the angular.json file, add PrimeNG, PrimeFlex and PrimeIcons styles to the styles array:

    "styles": [
              "node_modules/primeng/resources/themes/aura-light-amber/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeflex/primeflex.css",
              "node_modules/primeicons/primeicons.css",
              "src/styles.css"
            ],

Keep in mind that you can change the theme you use for your theme.css. At this point, you are set up.

Step 4: Testing It Out

If you are creating a standalone application which is the new standard after Angular version 17 then you would import your modules in each component you would want to use them in. Otherwise, you would import them into your app.modules file. Let’ test it out in our standalone app by creating a component called homepage.

    ng g c homepage

Next, let’s create a route to the homepage show it shows up when we serve our application. In the ‘app.routes.js’ file your code should look like this,

    import { Routes } from '@angular/router';
import { HomepageComponent } from './homepage/homepage.component';
export const routes: Routes = [
    {path: '', component: HomepageComponent},
];

Now in our ‘homepage.component.html’ file add the following code

    <div class="grid grid-nogutter surface-section text-800">
    <div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
        <section>
            <span class="block text-6xl font-bold mb-1">Create the screens</span>
            <div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
            <p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <button pButton pRipple label="Learn More" type="button" class="mr-3 p-button-raised"></button>
            <button pButton pRipple label="Live Demo" type="button" class="p-button-outlined"></button>
        </section>
    </div>
    <div class="col-12 md:col-6 overflow-hidden">
        <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image" class="md:ml-auto block md:h-full"
            style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%); object-fit: cover; width: 100%; height: 100%;">
    </div>
</div>

Let’s serve up our application at this point to see what it looks like.

You’ll notice the buttons do not show up correctly. To fix this we need to go to our ‘homepage.component.ts’ file and import prime button

    import { ButtonModule } from 'primeng/button';

So your ‘homepage.comonent.ts’ file should look like this,

    import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
@Component({
  selector: 'app-homepage',
  standalone: true,
  imports: [ButtonModule],
  templateUrl: './homepage.component.html',
  styleUrl: './homepage.component.css'
})
export class HomepageComponent {
}

You see after saving and serving your application it should look like this

At there you go, everything is install and seem to be working correctly.

Building a MEAN Stack Application from Scratch: Setting Up the Marketing Site

Our marketing site will consist of a single page for unauthenticated users to land on. We will want this page to be SEO-friendly, but will not need to communicate with any downstream APIs, so the the only thing we need to set up for our marketing site is a standalone SSR Angular application. Let’s get started.

Setting Up the GitHub Repository

Since this is the first thing in our project we are setting up we need to first create our GitHub repository. So, if you haven’t already done so, create a GitHub account and create a new repository called “split-it”. Additionally, you are going to want to download GitHub Desktop to work on your local machine. Once installed, clone your repository to your local machine, make sure you have Visual Studio Code installed, and we will be able to open our project in our code editor. It should be a blank repository like below.

Installing Optional Tools

GitHub Copilot is one of the optional tools that I will be using. This is not something you need to use to follow along but could be helpful. If you decide to use it go ahead and set it up. You will need to purchase CoPilot, install the CoPilot extensions in Visual Studio Code, and enter your account information.

Setting Up Our Angular Application

Now it’s time to set up our Angular application. For this project, we are going to be working with Angular 19, which is the latest, so we are going to locally install this version in our application. Note you must be in the split-it directory when you run this command.

    npm install @angular/core @angular/cli

Once installed we can create our app. Note that we do want to use SSR, routing, and basic CSS will work for our use case.

    npx ng new split-it-marketing

We use npx because Angular is installed on our local project, not globally. Now that the app is created let’s go ahead and start up our application and make sure that everything is working as expected. Go ahead and cd into the Angular application and run,

    npx ng serve

and once the application is built load https://localhost:4200 in your browser. It should look like below.

Our app looks like it is up and running correctly. Since we aren’t going to connect this application to our downstream APIs at this time I don’t think we need to create any environment files. We just need to install the UI library that we will be using which is PrimeNG.

Installing PrimeNG

PrimeNG is the UI library we are going to use for our project and we will end up installing it in all of our Angular applications. However, beyond just the UI library we are also going to use PrimeFlex and their icon library. Let’s install our dependencies.

    npm install primeng primeflex primeicons

Next, in the angular.json file, add PrimeNG, PrimeFlex and PrimeIcons styles to the styles array:

    "styles": [
              "node_modules/primeng/resources/themes/aura-light-amber/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeflex/primeflex.css",
              "node_modules/primeicons/primeicons.css",
              "src/styles.css"
            ],

At this point we are all set up and ready to start building our page.

Writen Article

Why Planning Before Building Matters

What Is an MVP and Why It Matters

How to Break Down a Project Into Features

Defining the MVP for Our Project

MVP Goals

1. Secure User Authentication

2. Task and List Management

3. Persistent Data Storage

4. Profile Management with Image Uploads

5. Responsive User Interface with Dark Mode

6. Reliable API Layer

MVP Feature Breakdown

1. User Authentication

2. To-Do Lists

3. Tasks

4. Profile Management

5. Responsive Dashboard with Dark Mode

6. Backend API and Data Layer

Beyond the MVP: Future Enhancements

1. Team Collaboration

2. Task Scheduling and Reminders

3. Filtering, Sorting, and Tagging

4. Advanced Analytics

5. Mobile and PWA Support

6. AI-Assisted Features

The Goal of the Course

Tools We Will Use

What We Will Be Building

Backend Development (NestJS)

Frontend Development (Angular)

Cloud Deployment (AWS)

How AI is used in this Project

Who this Course is For

By the End of this Course

Creating The Application Password

Getting The Homepage

Creating The Service

Creating the Controller

Creating the Route

Add the Route to the Server

Testing it Out

Key Characteristics of a Service in Node.js:

Example of a Service in a Node.js (Express) Application:

Service Example

Why Use Services?

Overview

Badges & Ads

Filters

Timing & Applicants

Reviewing the Client Proposal

Bidding & Writing the Proposal

Communicating with the Client

What Types Of Clients Are We Looking For

What Is Our Goal

Breaking Down Badges & Ads

Badges

Rising Talent Badge

Top Rated Badge

Top Rated Plus Badge

Expert-Vetted Badge

Ads

Boosted Proposals

Sponsored Profiles

Filtering for the best contracts

Step 1: Search for your industry

Step 2: Filter the search results

Sample Filters

Reviewing The Client Proposal

Bad Proposal

Good Proposal

Bidding & Writing The Proposal

Communicating With The Client After Connection

Additional Articles

Introduction

1. Define an MVP

2. Set Up a Project Board

3. Thoroughly Define Pages, Features and Tasks

4. Create UX/UI designs

5. Estimate Hours and Timelines