DEV Community: Claradev32

Best AI Tools That Apply to Jobs for You in 2025

Claradev32 — Thu, 24 Jul 2025 18:58:06 +0000

The job market in 2025 is evolving at an unprecedented pace, with Artificial Intelligence (AI) at the forefront of this transformation. What was once a futuristic concept is now an indispensable asset for job seekers aiming to gain a competitive edge. From optimizing your resume to acing your interviews, AI-powered job automation tools are here to streamline your job search process and elevate your career prospects.

This comprehensive guide will walk you through the top AI tools that are set to revolutionize how you find and secure your dream job in 2025. We'll explore how these intelligent assistants can help you navigate the complexities of modern recruitment, emphasizing AI job automation tools that boost efficiency and effectiveness.

Why AI is Your New Best Friend in the Job Search

AI is no longer just for tech giants. Its capabilities have permeated various industries, making it a powerful ally for individuals in their career pursuits. Here's why integrating AI into your job search strategy is crucial:

Efficiency: AI automates tedious and time-consuming tasks, freeing you to focus on strategic aspects of your job hunt.
Precision: AI algorithms can analyze vast amounts of data to provide highly personalized and accurate recommendations, from job matching to skill development.
Competitive Edge: Many companies now use AI in their hiring processes (e.g., Applicant Tracking Systems or ATS). Leveraging AI yourself helps you understand and adapt to these systems.
Personalized Growth: AI tools can identify your skill gaps and suggest tailored learning paths, ensuring you're continuously upskilling for in-demand roles.

Top AI Tools for Job Seekers in 2025

Let's dive into the best AI tools for career development and job application success that you should be utilizing in 2025.

AI-Powered Resume and Cover Letter Optimizers

Your resume is your first impression, and with many companies using ATS to screen applications, optimization is key. AI tools can analyze job descriptions and tailor your documents to pass these initial filters and impress human recruiters.

Teal HQ: This platform helps you manage your entire job search, offering a browser extension to save job listings and built-in AI tips to strengthen your resume and cover letter. It's a fantastic job tracking platform with AI enhancements.
Kickresume: Kickresume uses AI to help you build customized resumes with modern, ATS-optimized templates. It provides AI-generated suggestions for bullet points and summaries and even gives your resume a score to show how well it matches a job description.
Jobscan: Jobscan specifically focuses on analyzing your resume against a job description, identifying missing keywords and suggesting improvements to increase your match rate for ATS systems.

AI Tools for Interview Preparation

Interviews can be daunting, but AI can provide invaluable practice and feedback to boost your confidence and performance. These AI-powered interview preparation tools analyze your responses, tone, and even body language (in video interviews).

Final Round AI: This powerful platform offers AI-powered mock interviews tailored to your job description, providing real-time feedback on your tone, filler words, and clarity. It aims to help you refine your delivery and land offers faster.
Interviews Chat (AI Interview Copilot): This tool provides real-time suggestions and live transcriptions during your practice interviews. It can help with both technical and behavioral questions, offering flexible response formats like STAR answers.
Yoodli: While not exclusively for job interviews, Yoodli is an AI speech coach that can significantly improve your verbal communication. It analyzes your speaking patterns, filler words, and pacing, which is incredibly beneficial for interview practice.

AI-Powered Job Matching and Application Platforms

Gone are the days of endless scrolling through generic job boards. AI-powered platforms are designed to connect you with highly relevant opportunities, saving you time and effort. These are essential AI-powered job matching platforms.

FastApply: Revolutionizing the job search, FastApply offers an AI automated job application copilot. This innovative tool not only personalizes your ATS-friendly resume and cover letter for each job but can also automatically search for and apply to jobs on major platforms like LinkedIn and Indeed that perfectly match your preferences. FastApply takes the grind out of applications, allowing you to focus on landing the job.
RippleMatch: This platform acts as an "AI Job Matchmaker," connecting candidates directly with top internships and entry-level jobs tailored to their skills and interests. It boasts a significantly higher chance of getting an interview compared to traditional job boards.
LinkedIn AI Tools: LinkedIn continues to integrate more AI features, offering smart job recommendations based on your activity and goals, and suggestions for improving your profile headline and summary.

AI for Skill Development and Career Planning

Beyond the immediate job search, AI is playing a significant role in career development, helping individuals identify skill gaps and discover new career paths. These are powerful AI tools for skill development.

Himalayas AI Career Coach: This AI-powered tool provides personalized career advice, roadmap suggestions, and helps identify skill gaps based on your profile and aspirations. It can even assist with salary negotiation guidance.
Skills Caravan LXP: For organizations, Skills Caravan LXP offers an AI-powered learning experience platform that intelligently assesses workforce capabilities, identifies skill gaps, and creates personalized learning journeys. While geared towards companies, its principles highlight how AI can tailor upskilling.
Google AI for Learning: Google offers various free and paid courses focused on AI, from introductory concepts to advanced topics in large language models and image generation. These can directly help you upskill with AI for new roles.

The Road Ahead: Embracing AI for Your Career

As we move further into 2025, the integration of AI into the job market will only deepen. While some jobs may be automated, AI will also create new roles and opportunities for those who are adaptable and willing to leverage these powerful tools.

By embracing AI job automation tools, optimizing your presence for AI-driven recruitment systems, and continuously developing in-demand skills with AI's help, you are not just keeping up with the future – you are shaping your own successful career path within it.

Don't be left behind. Start exploring these best AI tools today and transform your job search into a more efficient, precise, and successful endeavor.

Advanced Topics in E2E Testing Introduction

Claradev32 — Sat, 18 May 2024 01:36:52 +0000

End-to-end (E2E) testing is essential for ensuring that your application works correctly from the user's perspective. This guide will dive into advanced topics in E2E testing, including testing single-page applications (SPAs), progressive web apps (PWAs), mobile applications with Appium, visual regression testing, accessibility testing, and security testing.

Prerequisites

To follow along with this guide, you should have Node.js and npm installed. Additionally, you'll need to install Cypress for E2E testing:

npm install --save-dev cypress

Testing Single-Page Applications (SPAs)

SPAs are web applications that load a single HTML page and dynamically update content as the user interacts with the app. E2E testing for SPAs focuses on ensuring that navigation and interactions work seamlessly.

Setting Up Cypress for SPAs

First, create a file named cypress.config.js:

// cypress.config.js
module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: 'http://localhost:3000',
  },
};

Next, create a file named cypress/e2e/spa.spec.js and add the code snippets below:

// cypress/e2e/spa.spec.js
describe('SPA Testing', () => {
  it('should navigate to different pages', () => {
    cy.visit('/');
    cy.get('a[href="/about"]').click();
    cy.url().should('include', '/about');
    cy.get('h1').should('contain', 'About Us');
  });

  it('should load dynamic content', () => {
    cy.visit('/products');
    cy.get('.product').should('have.length.greaterThan', 0);
  });
});

In the spa.spec.js file, we visit the home page and test navigation to the "About Us" page. We also test that dynamic content (products) loads correctly.

Testing Progressive Web Apps (PWAs)

PWAs are web applications that offer a native app-like experience. Testing PWAs involves checking for features like offline support, service workers, and push notifications.

Setting Up Cypress for PWAs

First, create a file named cypress/e2e/pwa.spec.js and add the code snippet:

// cypress/e2e/pwa.spec.js
describe('PWA Testing', () => {
  it('should load the service worker', () => {
    cy.visit('/');
    cy.window().then((win) => {
      expect(win.navigator.serviceWorker.controller).to.not.be.null;
    });
  });

  it('should work offline', () => {
    cy.visit('/');
    cy.get('h1').should('contain', 'Home');

    cy.exec('npm run offline'); // Custom command to simulate offline mode
    cy.reload();
    cy.get('h1').should('contain', 'Home'); // Content should still be available
  });

  it('should show push notifications', () => {
    cy.visit('/');
    cy.window().then((win) => {
      win.Notification.requestPermission().then((permission) => {
        expect(permission).to.equal('granted');
      });
    });
  });
});

In the pwa.spec.js file, we test that the service worker loads, the app works offline, and push notifications are enabled.

Testing Mobile Applications with Appium

Appium is an open-source tool for automating mobile applications. It supports both Android and iOS.

Setting Up Appium

First, install Appium and the necessary drivers:

npm install -g appium
npm install -g appium-doctor
appium-doctor --android
appium-doctor --ios

Writing Tests for Mobile Apps

Create a file named mobile-app.spec.js and add the code below:

// mobile-app.spec.js
const wdio = require('webdriverio');

const opts = {
  port: 4723,
  capabilities: {
    platformName: 'Android',
    platformVersion: '9',
    deviceName: 'Android Emulator',
    app: '/path/to/your/app.apk',
    automationName: 'UiAutomator2'
  }
};

describe('Mobile App Testing', () => {
  let client;

  beforeAll(async () => {
    client = await wdio.remote(opts);
  });

  afterAll(async () => {
    await client.deleteSession();
  });

  it('should open the app and display the home screen', async () => {
    const homeScreen = await client.$('~HomeScreen');
    expect(await homeScreen.isDisplayed()).toBe(true);
  });

  it('should navigate to the settings screen', async () => {
    const settingsButton = await client.$('~SettingsButton');
    await settingsButton.click();
    const settingsScreen = await client.$('~SettingsScreen');
    expect(await settingsScreen.isDisplayed()).toBe(true);
  });
});

In the mobile-app.spec.js file, we test opening the app and navigating to the settings screen using Appium.

Visual Regression Testing

Visual regression testing ensures that your application's UI looks as expected and detects any unintended changes.

Setting Up Cypress for Visual Testing

First, install the necessary plugins:

npm install --save-dev cypress-image-snapshot

Next, create a file named cypress/support/index.js and add this code:

// cypress/support/index.js
import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
addMatchImageSnapshotCommand();

Writing Visual Regression Tests

Create a file named cypress/e2e/visual.spec.js:

// cypress/e2e/visual.spec.js
describe('Visual Regression Testing', () => {
  it('should display the homepage correctly', () => {
    cy.visit('/');
    cy.matchImageSnapshot();
  });

  it('should display the about page correctly', () => {
    cy.visit('/about');
    cy.matchImageSnapshot();
  });
});

In the visual.spec.js file, we take screenshots of the homepage and the about page to compare against baseline images.

Accessibility Testing

Accessibility testing ensures that your application is usable by people with disabilities.

Setting Up Cypress for Accessibility Testing

First, install the necessary plugins with the command below:

npm install --save-dev cypress-axe

Next, create a file named cypress/support/index.js and add the code snippet:

// cypress/support/index.js
import 'cypress-axe';

Writing Accessibility Tests

Create a file named cypress/e2e/accessibility.spec.js and add the code snippet below:

// cypress/e2e/accessibility.spec.js
describe('Accessibility Testing', () => {
  it('should have no detectable a11y violations on load', () => {
    cy.visit('/');
    cy.injectAxe();
    cy.checkA11y();
  });

  it('should have no detectable a11y violations on the about page', () => {
    cy.visit('/about');
    cy.injectAxe();
    cy.checkA11y();
  });
});

In the accessibility.spec.js file, we use cypress-axe to check for accessibility violations on the homepage and the about page.

Security Testing

Security testing ensures that your application is protected against common vulnerabilities.

Setting Up a Security Testing Environment

First, install the necessary plugins with the command below:

npm install --save-dev cypress

Writing Security Tests

Create a file named cypress/e2e/security.spec.js:

// cypress/e2e/security.spec.js
describe('Security Testing', () => {
  it('should protect against XSS attacks', () => {
    cy.visit('/login');
    cy.get('input[name="username"]').type('<script>alert("XSS")</script>');
    cy.get('input[name="password"]').type('password');
    cy.get('button[type="submit"]').click();
    cy.on('window:alert', (str) => {
      expect(str).not.to.equal('XSS');
    });
  });

  it('should protect against SQL injection', () => {
    cy.visit('/login');
    cy.get('input[name="username"]').type('admin\'--');
    cy.get('input[name="password"]').type('password');
    cy.get('button[type="submit"]').click();
    cy.url().should('not.include', '/admin');
  });
});

In the security.spec.js file, we test for XSS and SQL injection vulnerabilities by attempting to inject malicious scripts and SQL commands into the login form.

Conclusion

End-to-end testing is a comprehensive approach to ensuring your application functions correctly for end-users. In this guide, we covered advanced E2E testing topics, including:

Testing Single-Page Applications (SPAs): Ensuring smooth navigation and dynamic content loading.
Testing Progressive Web Apps (PWAs): Verifying offline capabilities, service workers, and push notifications.
Testing Mobile Applications with Appium: Automating tests for Android and iOS apps. Visual Regression Testing: Detecting unintended UI changes.
Accessibility Testing: Ensuring usability for people with disabilities.
Security Testing: Protecting against common vulnerabilities like XSS and SQL injection.

By incorporating these testing strategies, you can ensure your application is robust, accessible, and secure. Happy testing!

Integration Testing with Node.js

Claradev32 — Sat, 18 May 2024 00:48:58 +0000

Integration testing is crucial in ensuring that different modules and components of an application work together as expected. In this guide, we will cover:

Testing interactions between modules and components
Mocking dependencies and external services
Testing database interactions

We'll use Jest as our testing framework and Supertest for HTTP assertions.

Setting Up the Project

First, we'll set up our Node.js project and install the necessary dependencies.

Create a new directory for the project and initialize it:

mkdir integration-testing
cd integration-testing
npm init -y

Install the required dependencies:

npm install --save express mongoose
npm install --save-dev jest supertest

Update the package.json to add a test script:

"scripts": {
  "test": "jest"
}

Creating the Application

Defining the Application Structure

We'll create a simple Express application with MongoDB as the database. Our application will have two main components: users and posts.

Create the following directory structure for your project:

integration-testing/
├── src/
│   ├── app.js
│   ├── models/
│   │   └── user.js
│   ├── routes/
│   │   └── user.js
│   └── services/
│       └── user.js
└── tests/
    └── user.test.js

Creating the Express Application

To do that, create src/app.js and add the code snippet below:

const express = require('express');
const mongoose = require('mongoose');
const userRouter = require('./routes/user');

const app = express();

// Connect to the MongoDB database
mongoose.connect('mongodb://localhost:27017/integration_testing', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

// Middleware to parse JSON requests
app.use(express.json());

// Use the user router for any requests to /users
app.use('/users', userRouter);

module.exports = app;

In this file, we set up an Express application, connect to a MongoDB database, and define a route for user-related operations.

Defining the User Model

Next, create src/models/user.js:

const mongoose = require('mongoose');

// Define the user schema with name and email fields
const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
});

// Create the User model from the schema
const User = mongoose.model('User', userSchema);

module.exports = User;

This file defines a Mongoose schema and model for users, with name and email fields.

Creating the User Service

Create src/services/user.js:

const User = require('../models/user');

// Function to create a new user
async function createUser(name, email) {
  const user = new User({ name, email });
  await user.save();
  return user;
}

// Function to get a user by email
async function getUserByEmail(email) {
  return User.findOne({ email });
}

module.exports = { createUser, getUserByEmail };

This file contains functions that interact with the user model to create a new user and retrieve a user by email.

Creating the User Routes

Create src/routes/user.js:

const express = require('express');
const { createUser, getUserByEmail } = require('../services/user');

const router = express.Router();

// Route to create a new user
router.post('/', async (req, res) => {
  const { name, email } = req.body;
  try {
    const user = await createUser(name, email);
    res.status(201).json(user);
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

// Route to get a user by email
router.get('/:email', async (req, res) => {
  const { email } = req.params;
  try {
    const user = await getUserByEmail(email);
    if (user) {
      res.status(200).json(user);
    } else {
      res.status(404).json({ error: 'User not found' });
    }
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

module.exports = router;

This file defines the routes for creating and retrieving users using the user service functions.

Integration Testing

Testing Interactions Between Modules and Components

We'll test the interaction between our Express routes, services, and MongoDB.

Create tests/user.test.js:

const mongoose = require('mongoose');
const request = require('supertest');
const app = require('../src/app');
const User = require('../src/models/user');

// Connect to the MongoDB database before all tests
beforeAll(async () => {
  const url = `mongodb://127.0.0.1/integration_testing`;
  await mongoose.connect(url, { useNewUrlParser: true, useUnifiedTopology: true });
});

// Clean up the database and close the connection after all tests
afterAll(async () => {
  await mongoose.connection.db.dropDatabase();
  await mongoose.connection.close();
});

describe('User API', () => {
  // Test creating a new user
  it('should create a user', async () => {
    const response = await request(app).post('/users').send({
      name: 'John Doe',
      email: 'john@example.com',
    });
    expect(response.status).toBe(201);
    expect(response.body.name).toBe('John Doe');
    expect(response.body.email).toBe('john@example.com');
  });

  // Test retrieving a user by email
  it('should get a user by email', async () => {
    const user = new User({ name: 'Jane Doe', email: 'jane@example.com' });
    await user.save();

    const response = await request(app).get(`/users/jane@example.com`);
    expect(response.status).toBe(200);
    expect(response.body.name).toBe('Jane Doe');
    expect(response.body.email).toBe('jane@example.com');
  });

  // Test returning 404 if user not found
  it('should return 404 if user not found', async () => {
    const response = await request(app).get('/users/nonexistent@example.com');
    expect(response.status).toBe(404);
  });
});

In this test file, we set up a connection to a MongoDB database, clean up the database after each test, and define tests for creating and retrieving users.

Mocking Dependencies and External Services

Sometimes, you might need to mock dependencies or external services to isolate the tested component. We'll mock the User model to simulate database interactions.

Update tests/user.test.js to mock the User model:

const request = require('supertest');
const app = require('../src/app');
const User = require('../src/models/user');

// Mock the User model
jest.mock('../src/models/user');

describe('User API', () => {
  // Test creating a new user with a mock
  it('should create a user', async () => {
    User.mockImplementation(() => ({
      save: jest.fn().mockResolvedValueOnce({ name: 'John Doe', email: 'john@example.com' }),
    }));

    const response = await request(app).post('/users').send({
      name: 'John Doe',
      email: 'john@example.com',
    });
    expect(response.status).toBe(201);
    expect(response.body.name).toBe('John Doe');
    expect(response.body.email).toBe('john@example.com');
  });

  // Test retrieving a user by email with a mock
  it('should get a user by email', async () => {
    User.findOne.mockResolvedValueOnce({ name: 'Jane Doe', email: 'jane@example.com' });

    const response = await request(app).get(`/users/jane@example.com`);
    expect(response.status).toBe(200);
    expect(response.body.name).toBe('Jane Doe');
    expect(response.body.email).toBe('jane@example.com');
  });

  // Test returning 404 if user not found with a mock
  it('should return 404 if user not found', async () => {
    User.findOne.mockResolvedValueOnce(null);

    const response = await request(app).get('/users/nonexistent@example.com');
    expect(response.status).toBe(404);
  });
});

In this updated test file, we use Jest to mock the User model, allowing us to test the routes without interacting with a real database.

Testing Database Interactions

Finally, let's test the actual database interactions without mocking to ensure our MongoDB integration works correctly. We'll use a real MongoDB instance for these tests. The setup and teardown will handle connecting to the database and cleaning up after each test.

Update tests/user.test.js to test actual database interactions:

const mongoose = require('mongoose');
const request = require('supertest');
const app = require('../src/app');
const User = require('../src/models/user');

// Connect to the MongoDB database before all tests
beforeAll(async () => {
  const url = `mongodb://127.0.0.1/integration_testing`;
  await mongoose.connect(url, { useNewUrlParser: true, useUnifiedTopology: true });
});

// Clean up the database before each test
beforeEach(async () => {
  await User.deleteMany();
});

// Clean up the database and close the connection after all tests
afterAll(async () => {
  await mongoose.connection.db.dropDatabase();
  await mongoose.connection.close();
});

describe('User API', () => {
  // Test creating a new user
  it('should create a user', async () => {
    const response = await request(app).post('/users').send({
      name: 'John Doe',
      email: 'john@example.com',
    });
    expect(response.status).toBe(201);
    expect(response.body.name).toBe('John Doe');
    expect(response.body.email).toBe('john@example.com');
  });

  // Test retrieving a user by email
  it('should get a user by email', async () => {
    const user = new User({ name: 'Jane Doe', email: 'jane@example.com' });
    await user.save();

    const response = await request(app).get(`/users/jane@example.com`);
    expect(response.status).toBe(200);
    expect(response.body.name).toBe('Jane Doe');
    expect(response.body.email).toBe('jane@example.com');
  });

  // Test returning 404 if user not found
  it('should return 404 if user not found', async () => {
    const response = await request(app).get('/users/nonexistent@example.com');
    expect(response.status).toBe(404);
  });
});

In these tests, we connect to a MongoDB instance before running the tests and clean up the database after each test to ensure a fresh state. This allows us to test real interactions with the database.

Conclusion

Integration testing in Node.js is essential for verifying that different parts of your application work together correctly. In this guide, we covered how to:

Testing Interactions Between Modules and Components: We created tests to verify that our Express routes, services, and database interact as expected.
Mocking Dependencies and External Services: We used Jest to mock the User model, allowing us to isolate and test our routes without relying on a real database.
Testing Database Interactions: We connected to a real MongoDB instance to ensure our application correctly interacts with the database, cleaning up the data after each test to maintain a fresh state.

By following these practices, you can ensure that your Node.js application is robust and that its components work seamlessly together.

Integration Testing with Node.js

Claradev32 — Sat, 18 May 2024 00:48:58 +0000

Integration testing is crucial in ensuring that different modules and components of an application work together as expected. In this guide, we will cover:

Testing interactions between modules and components
Mocking dependencies and external services
Testing database interactions

We'll use Jest as our testing framework and Supertest for HTTP assertions.

Setting Up the Project

First, we'll set up our Node.js project and install the necessary dependencies.

Create a new directory for the project and initialize it:

mkdir integration-testing
cd integration-testing
npm init -y

Install the required dependencies:

npm install --save express mongoose
npm install --save-dev jest supertest

Update the package.json to add a test script:

"scripts": {
  "test": "jest"
}

Creating the Application

Defining the Application Structure

We'll create a simple Express application with MongoDB as the database. Our application will have two main components: users and posts.

Create the following directory structure for your project:

integration-testing/
├── src/
│   ├── app.js
│   ├── models/
│   │   └── user.js
│   ├── routes/
│   │   └── user.js
│   └── services/
│       └── user.js
└── tests/
    └── user.test.js

Creating the Express Application

To do that, create src/app.js and add the code snippet below:

const express = require('express');
const mongoose = require('mongoose');
const userRouter = require('./routes/user');

const app = express();

// Connect to the MongoDB database
mongoose.connect('mongodb://localhost:27017/integration_testing', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

// Middleware to parse JSON requests
app.use(express.json());

// Use the user router for any requests to /users
app.use('/users', userRouter);

module.exports = app;

In this file, we set up an Express application, connect to a MongoDB database, and define a route for user-related operations.

Defining the User Model

Next, create src/models/user.js:

const mongoose = require('mongoose');

// Define the user schema with name and email fields
const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
});

// Create the User model from the schema
const User = mongoose.model('User', userSchema);

module.exports = User;

This file defines a Mongoose schema and model for users, with name and email fields.

Creating the User Service

Create src/services/user.js:

const User = require('../models/user');

// Function to create a new user
async function createUser(name, email) {
  const user = new User({ name, email });
  await user.save();
  return user;
}

// Function to get a user by email
async function getUserByEmail(email) {
  return User.findOne({ email });
}

module.exports = { createUser, getUserByEmail };

This file contains functions that interact with the user model to create a new user and retrieve a user by email.

Creating the User Routes

Create src/routes/user.js:

const express = require('express');
const { createUser, getUserByEmail } = require('../services/user');

const router = express.Router();

// Route to create a new user
router.post('/', async (req, res) => {
  const { name, email } = req.body;
  try {
    const user = await createUser(name, email);
    res.status(201).json(user);
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

// Route to get a user by email
router.get('/:email', async (req, res) => {
  const { email } = req.params;
  try {
    const user = await getUserByEmail(email);
    if (user) {
      res.status(200).json(user);
    } else {
      res.status(404).json({ error: 'User not found' });
    }
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

module.exports = router;

This file defines the routes for creating and retrieving users using the user service functions.

Integration Testing

Testing Interactions Between Modules and Components

We'll test the interaction between our Express routes, services, and MongoDB.

Create tests/user.test.js:

const mongoose = require('mongoose');
const request = require('supertest');
const app = require('../src/app');
const User = require('../src/models/user');

// Connect to the MongoDB database before all tests
beforeAll(async () => {
  const url = `mongodb://127.0.0.1/integration_testing`;
  await mongoose.connect(url, { useNewUrlParser: true, useUnifiedTopology: true });
});

// Clean up the database and close the connection after all tests
afterAll(async () => {
  await mongoose.connection.db.dropDatabase();
  await mongoose.connection.close();
});

describe('User API', () => {
  // Test creating a new user
  it('should create a user', async () => {
    const response = await request(app).post('/users').send({
      name: 'John Doe',
      email: 'john@example.com',
    });
    expect(response.status).toBe(201);
    expect(response.body.name).toBe('John Doe');
    expect(response.body.email).toBe('john@example.com');
  });

  // Test retrieving a user by email
  it('should get a user by email', async () => {
    const user = new User({ name: 'Jane Doe', email: 'jane@example.com' });
    await user.save();

    const response = await request(app).get(`/users/jane@example.com`);
    expect(response.status).toBe(200);
    expect(response.body.name).toBe('Jane Doe');
    expect(response.body.email).toBe('jane@example.com');
  });

  // Test returning 404 if user not found
  it('should return 404 if user not found', async () => {
    const response = await request(app).get('/users/nonexistent@example.com');
    expect(response.status).toBe(404);
  });
});

In this test file, we set up a connection to a MongoDB database, clean up the database after each test, and define tests for creating and retrieving users.

Mocking Dependencies and External Services

Sometimes, you might need to mock dependencies or external services to isolate the tested component. We'll mock the User model to simulate database interactions.

Update tests/user.test.js to mock the User model:

const request = require('supertest');
const app = require('../src/app');
const User = require('../src/models/user');

// Mock the User model
jest.mock('../src/models/user');

describe('User API', () => {
  // Test creating a new user with a mock
  it('should create a user', async () => {
    User.mockImplementation(() => ({
      save: jest.fn().mockResolvedValueOnce({ name: 'John Doe', email: 'john@example.com' }),
    }));

    const response = await request(app).post('/users').send({
      name: 'John Doe',
      email: 'john@example.com',
    });
    expect(response.status).toBe(201);
    expect(response.body.name).toBe('John Doe');
    expect(response.body.email).toBe('john@example.com');
  });

  // Test retrieving a user by email with a mock
  it('should get a user by email', async () => {
    User.findOne.mockResolvedValueOnce({ name: 'Jane Doe', email: 'jane@example.com' });

    const response = await request(app).get(`/users/jane@example.com`);
    expect(response.status).toBe(200);
    expect(response.body.name).toBe('Jane Doe');
    expect(response.body.email).toBe('jane@example.com');
  });

  // Test returning 404 if user not found with a mock
  it('should return 404 if user not found', async () => {
    User.findOne.mockResolvedValueOnce(null);

    const response = await request(app).get('/users/nonexistent@example.com');
    expect(response.status).toBe(404);
  });
});

In this updated test file, we use Jest to mock the User model, allowing us to test the routes without interacting with a real database.

Testing Database Interactions

Update tests/user.test.js to test actual database interactions:

const mongoose = require('mongoose');
const request = require('supertest');
const app = require('../src/app');
const User = require('../src/models/user');

// Connect to the MongoDB database before all tests
beforeAll(async () => {
  const url = `mongodb://127.0.0.1/integration_testing`;
  await mongoose.connect(url, { useNewUrlParser: true, useUnifiedTopology: true });
});

// Clean up the database before each test
beforeEach(async () => {
  await User.deleteMany();
});

// Clean up the database and close the connection after all tests
afterAll(async () => {
  await mongoose.connection.db.dropDatabase();
  await mongoose.connection.close();
});

describe('User API', () => {
  // Test creating a new user
  it('should create a user', async () => {
    const response = await request(app).post('/users').send({
      name: 'John Doe',
      email: 'john@example.com',
    });
    expect(response.status).toBe(201);
    expect(response.body.name).toBe('John Doe');
    expect(response.body.email).toBe('john@example.com');
  });

  // Test retrieving a user by email
  it('should get a user by email', async () => {
    const user = new User({ name: 'Jane Doe', email: 'jane@example.com' });
    await user.save();

    const response = await request(app).get(`/users/jane@example.com`);
    expect(response.status).toBe(200);
    expect(response.body.name).toBe('Jane Doe');
    expect(response.body.email).toBe('jane@example.com');
  });

  // Test returning 404 if user not found
  it('should return 404 if user not found', async () => {
    const response = await request(app).get('/users/nonexistent@example.com');
    expect(response.status).toBe(404);
  });
});

Conclusion

Integration testing in Node.js is essential for verifying that different parts of your application work together correctly. In this guide, we covered how to:

Testing Interactions Between Modules and Components: We created tests to verify that our Express routes, services, and database interact as expected.
Mocking Dependencies and External Services: We used Jest to mock the User model, allowing us to isolate and test our routes without relying on a real database.
Testing Database Interactions: We connected to a real MongoDB instance to ensure our application correctly interacts with the database, cleaning up the data after each test to maintain a fresh state.

By following these practices, you can ensure that your Node.js application is robust and that its components work seamlessly together.

Adding advanced search to a Strapi and Next.js project with Algolia

Claradev32 — Sun, 28 Apr 2024 07:38:47 +0000

Introduction

In today's fast-paced digital world, finding exactly what you need online should be quick and painless. Imagine entering a vast library where every book, article, and note is meticulously organized and just a whisper away. That's the kind of seamless experience advanced search brings to web applications. In this tutorial, we're diving into the magic of enhancing your e-commerce platform with top-notch search capabilities. We'll explore how to combine Strapi, Next.js, and Algolia Search to add and implement advanced search functionalities.

Prerequisites

Before we begin, make sure you have the following installed on your machine:

The code for this tutorial is available on my GitHub repository. The Strapi backend is on the main branch, while the frontend is on the frontend branch. Feel free to clone it to follow along.

Setting up Strapi Project

Once you've met the above requirements, let's get started by creating a new Strapi application with the command below:

npx create-strapi-app@latest my-project

The above command will prompt you to choose your installation type. For the demonstrations in this tutorial, we'll use the Quickstart (recommended) type and hit the enter key to continue. Then Strapi will start the project scaffolding process.

Once the project is successfully created, run the command below to move into the project folder and spin up the development server:

cd my-project && npm run develop

The above command will start the server and open it on your browser.

Setting up Next.js Project

Now that we have successfully setup our Strapi backend, let's proceed to set the Next.js frontend by running the command below:

npx create-next-app my-nextjs-project

The command will take you through some prompts. For the demonstrations in this tutorial, your selections should be the same as in the screenshot below:

Then wait for the scaffolding process to complete, change the directory into the project folder, and run the development server with the command:

cd my-nextjs-project && npm run dev

Integrating Algolia with Strapi

Next, let's integrate Algolia with our Strapi backend to enable the search functionality.

Setting up an Algolia account and obtaining API keys

First, click the link on the link to set up an Algolia account. You can sign up with Google, GitHub, or Email.

Then navigate to Settings > API Keys, copy the Application ID and Admin API Key to your Strapi .env file:

// ...
ALGOLIA_PROVIDER_APPLICATION_ID=G9Z6UEUE
ALGOLIA_PROVIDER_ADMIN_API_KEY=043d7•••••••••••••••••••••••8332

Next, install the @mattie-bundle/strapi-plugin-search and @mattie-bundle/strapi-provider-search-algolia packages.

npm install @mattie-bundle/strapi-plugin-search @mattie-bundle/strapi-provider-search-algolia

The @mattie-bundle/strapi-plugin-search package installs the Strapi plugin to enable search functionality, while the @mattie-bundle/strapi-provider-search-algolia package installs the provider specifically using Algolia as the search engine. It integrates Strapi with Algolia's search capabilities, allowing users to leverage Algolia's powerful search features.

Create Collection Type

Now back to our Strapi admin, let's create some products and save and publish to index this entry into your Algolia index. Navigate to Content-Type Builder > + Create new collection type and create a Product collection.

The Product collection should have the name (Text), image(single media), price(float number), and description (Text) fields.

Next, Navigate to Content Manager > COLLECTION TYPES > Products, click on + Create new Entry button, and enter your product details. When you add a new entry or make changes to your Product collection, it will be automatically indexed in Algolia.

Configuring Algolia in the Strapi project to index content.

Now let's update our Strapi plugin to configure Algolia. Update the my-project/config/plugin.js file with the code snippet below:

module.exports = ({ env }) => ({
  search: {
    enabled: true,
    config: {
      provider: "algolia",
      providerOptions: {
        apiKey: env('ALGOLIA_API_KEY'),
        applicationId: env('ALGOLIA_APPLICATION_ID')
      },
      contentTypes: [{ name: "api::product.product", index: "strapi-store" }],
    },
  },
});

The code snippet configures the search functionality for our project, enabling it to use Algolia as the search provider. It sets up Algolia by specifying an API key and application ID. The configuration also details which content types are searchable, in this case, products (which we will create shortly), and assigns them to an Algolia index named "strapi-store".

Building the Search Interface in Next.js

Now that we've created our collection and added some entries, let's build the Search interface in our Next.js front to show the products and perform search operations.

Installing Algolia search client in the Next.js project.

First, install the Algolia search client with the command below:

npm install algoliasearch react-instantsearch-dom

The algoliasearch package is a JavaScript client library for the Algolia search engine, providing methods to interact with the Algolia search API such as indexing, searching, and managing data. On the other hand, the react-instantsearch-dom package is a React component library for constructing search interfaces powered by Algolia. It provides pre-built components that can be seamlessly integrated into React applications to create dynamic search experiences with features like faceting, filtering, and pagination.

Creating search components to display results.

Then create a components folder inside the my-nextjs-project/src directory. In the components folder, create a new file named Search.tsx and import and initialize the Algolia client with the code snippet below:

import algoliasearch from "algoliasearch/lite";

const searchClient = algoliasearch(
  process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID || '',
  process.env.NEXT_PUBLIC_ALGOLIA_API_KEY || ''
);

Go back to your Algolia Account Settings > API Keys, copy the Application ID and Search-Only API Key (Using the admin key could lead to a security issues) to your Next.js. Create a .env.local file (if it does not exists already) in the root directory of your project and add the Algolia credentials:

NEXT_PUBLIC_ALGOLIA_APPLICATION_ID=''
NEXT_PUBLIC_ALGOLIA_API_KEY=''

Syncing Strapi Content with Algolia:

Now, to keep the content in our Strapi collection in Sync with Algolia, ensuring we have a user-friendly search experience, we'll be getting the data directly from our Algolia index. We'll do that in the components/Search.tsx file with the code snippet below:

import { InstantSearch } from "react-instantsearch-dom";
import { connectSearchBox } from "react-instantsearch-dom";
import { connectHits } from "react-instantsearch-dom";
import algoliasearch from "algoliasearch/lite";

const searchClient = algoliasearch(
   process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID,
   process.env.NEXT_PUBLIC_ALGOLIA_API_KEY
);

const CustomSearchBox = ({ currentRefinement, refine }: any) => (
  <input
    type="text"
    placeholder="Search products..."
    value={currentRefinement}
    onChange={(e) => refine(e.target.value)}
    className="w-full p-4 text-gray-700 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
  />
);

const SearchInput = connectSearchBox(CustomSearchBox);

const Search = () => {
  const ProductCard = ({ product }: any) => (
    <div className="border rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
      <img
        src={`http://localhost:1337` + product.image.url}
        alt={product.name}
        className="w-full h-64 object-cover"
      />
      <div className="p-5">
        <h2 className="text-2xl font-semibold mb-2">{product.name}</h2>
        <p className="text-gray-700 mb-4">{product.description}</p>
        <div className="font-bold text-xl">Price: ${product.price}</div>
      </div>
    </div>
  );
  const CustomHits = connectHits(({ hits }) => (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {hits.map((hit) => (
        <ProductCard key={hit.objectID} product={hit} />
      ))}
    </div>
  ));

  return (
    <div className="max-w-4xl mx-auto px-4 py-8">
      <InstantSearch
        searchClient={searchClient}
        indexName="development_strapi-store"
      >
        <h4 className="">My Store</h4>
        <div className="p-4">
          <SearchInput />
        </div>
        <CustomHits />
      </InstantSearch>
    </div>
  );
};

export default Search;

In the above code snippet, we imported InstantSearch, connectSearchBox, and connectHits. We used InstantSearch to configure the Algolia search client and specify our index name.

When you specify an index name in the Strapi Algolia plugin configuration, the environment in which the app is currently running is automatically appended to the name. That is why the index name is now development_strapi-store.

Then we use connectSearchBox to create a custom search input since the default input field is not styled, and we use connectHits to create CustomHits*, which allows us to configure how the products are rendered.

Next, update the code in your my-nextjs-project/src/index.tsx file to import the Search component:

import Search from "@/components/Search";

export default function Home() {
  return (
    <Search/>
  );
}

Implementing search features like faceting, filtering, and sorting

We've successfully added an advanced search to our Next.js e-commerce store. Now let's extend the search features by adding facets, filtering, and sorting. To do that, navigate to your Algolia account, go to the Search tab, and select the development_strapi-store index. Then click on the Configuration tab and locate Facet. Enter the price as the attribute name you want to use for faceting and click Add.

Then update the Search** component inside the InstantSearch component in your components/Search.tsx file to add the Facet feature with the code below:

//...
 <Panel header="Price Range">
    <RefinementList attribute="price" />
 </Panel>

Now users can filter the products by price. Next, let's add the feature for sorting so users can sort the products by ascending or descending order. In your Algolia account index configuration, locate Replicas tab, create + Create Replica index for development_strapi-store_price_asc and development_strapi-store_price_desc then click on Review and Save Settings.

Configure Sorting for Each Replica

For each replica index you've created, go to its Configuration, scroll to the Ranking and sorting section, and adjust the ranking formula to include the attribute you want to sort by. For development_strapi-store_price_asc price ascends and the price descends for development_strapi-store_price_desc, and Review and Save Settings.

Then update the Search component to use the names of these replica indices in the SortBy component as the items values.

//...
import { SortBy} from "react-instantsearch-dom";

//...
<Panel header="Sort by">
  <SortBy
    defaultRefinement="development_strapi-store"
    items={[
      { value: 'development_strapi-store', label: 'Featured' },
      { value: 'development_strapi-store_price_as', label: 'Price asc.' },
      { value: 'development_strapi-store_price_desc', label: 'Price desc.' },
    ]}
  />
</Panel>

Now you can sort the products by price in ascending and descending order.

Conclusion

That's it for this tutorial. You've learned how to add advanced search to a Strapi and Next.js project with Algolia. We began by setting up a Strapi and Next.js project, creating a collection type in the Strapi admin, building out the application UI, configuring the Algolia plugin, and syncing Strapi content with Algolia. Additionally, we enhanced the application by adding search features like faceting, filtering, and sorting. Now that you've learned how to incorporate advanced search into your Strapi and Next.js project using Algolia, how do you plan to use these technologies in your next project?

Resources

The code for this tutorial: GitHub repository.

Secure Your Node.js App with JSON Web Tokens

Claradev32 — Wed, 21 Sep 2022 13:36:29 +0000

A JSON Web Token (JWT) is an open standard (RFC 7519) that securely sends and receives data between parties (in the form of a JSON object).

In this article, we’ll implement JWT authentication to secure a Node.js application. We’ll also find out what JWT is all about and build a demo app.

Let's get going!

What is a JSON Web Token (JWT)?

As defined in open standard RFC 7519:

A JSON Web Token (JWT) is a compact, URL-safe means of representing claims to be transferred between two parties.

A JWT is encrypted and signed with a secret key (using the HMAC algorithm) or a cryptographically protected set of keys (with RSA or ECDSA).

This authentication contributes to a web application's integrity by ensuring the integrity of the claims within it, known as tokens. When tokens are signed with public/private key pairs, the signature also confirms that only the person holding the private key signed it.

The tokens consist of three compact parts:

Header: The header is divided into two sections: the type of token (JWT) and the signing algorithm used (HMAC-SHA256 or RSA).
Payload: Assertions about an entity and supporting data, known as claims.
Signature: Made up of an encoded header, an encoded payload, a secret, and an algorithm.

When to Use a JWT in Your Node.js App

Here are a couple of scenarios where JSON Web Tokens can be useful to your web application:

Authorization: The most common use of JWTs in most business applications.

JWTs enable businesses to protect or restrict access to a portion of an application for a select group of users. For each logged-in user, a JWT token is sent along with other subsequent requests. This allows a user to access routes, services, and resources permitted with that token.

Information Exchange: JSON Web Tokens are an excellent way to securely transmit data between parties.

Because JWTs can be signed (for example, with public/private key pairs), you can be confident that the senders are who they claim to be. Furthermore, because the signature is calculated using the header and payload, you can be certain that the content has not been tampered with.

Pre-requisites

Before you get started, ensure you have met the following requirements.

Node.js v14 or older installed
Postman installed
Prior knowledge of Node.js and Javascript

Create a New Project

Now let's create a project folder and a new Node.js project by running the commands below.

mkdir jwt-auth && cd jwt-auth
npm init -y

With the commands we:

Create a new folder called jwt-auth
Change the directory to the folder
Create a package.json file to document the project dependencies

Now open the package.json file and add the start script to run the application.

...
"scripts": {
    ...
   "start": "node index.js"
},

With the above configuration set up, run the command below.

npm start

Install Node.js App Dependencies

With the project created and configured, we'll now install the following dependencies:

Run the command below to install the required dependencies:

npm install express jsonwebtoken dotenv bcryptjs

Set up an Express Server

Once the required dependencies are installed, create an index.js file in the project folder, and set up an Express server with the code snippet below.

const express = require("express");

const app = express();
app.use(express.json());

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

You have successfully created an Express server listening on port 3000, with middleware to parse the request payload.

Create A `.env` File

A .env file is used in Node.js to store environment variables for security purposes. Ensure that your .env file is included in your .gitignore file to avoid exposing your application's secrets to the public.

Create a .env file in the project's root directory and add your JWT secret.

JWT_SECRET = "YOUR SECRET GOES HERE"

Then go back to the index.js file and configure the application to load the environment variables into your application, using dotenv.

...
require("dotenv").config();

Build App Routes

With the environment variables set up, let's create a route to get all registered users in the application.

In index.js, create a user array and route to return users with the code snippet below.

...
const users = [];

app.get("/api/users", (req, res) => {
  res.json(users);
});
...

If you are integrating a database management system, you can run queries to find and return all the users instead. One thing to point out here is that this route is accessible to all users.

Create An Auth Route

Now let's create other routes to register and authenticate users in the application. We'll do that in the index.js file, starting with the register route.

...
const bcrypt = require("bcryptjs");

...
app.post("/api/register", async (req, res) => {
  const user = req.body;
  if (!user.email || !user.password) {
    return res.status(400).send("Username and password are required.");
  }
  const hash = await bcrypt.hash(user.password, 10);
  user.password = hash;
  users.push(user);
  res.json(user);
});
...

We import bcryptjs to hash a user's password before saving it. Then we check if the user provides the required fields before adding them to the user's array.

Next, create another route to log in registered users.

...
const jwt = require("jsonwebtoken");

...
app.post("/api/login", async (req, res) => {
  const user = req.body;
  //check if user exists
  const foundUser = users.find((user) => user.email === req.body.email);
  if (!foundUser) {
    return res.status(400).send("Invalid email or password");
  }
  //check if password is correct
  const isPasswordValid = await bcrypt.compare(user.password, foundUser.password);
  if (!isPasswordValid) {
    return res.status(400).send("Invalid email or password");
  }
  //create token
  const token = jwt.sign({ user }, process.env.JWT_SECRET, {
    expiresIn: "1h",
  });
  res.json({ token });
});
...

Here, we import jsonwebtoken to sign a token for the registered users.

First, we check if the users exist in the user's array. You can also run your find query if you are integrating a database.

Then we compare the password with the saved hashed version. When the user satisfies these checks, we then sign a token for the user passing the user's details, the JWT_SECRET, and expiration time.

Verify Your User's Token with Middleware

Now that we can register and authenticate a user in the application, let's create middleware to verify the user's token and thus protect our route.

Ensure this code snippet is above the app routes.

const verifyUserToken = (req, res, next) => {
  if (!req.headers.authorization) {
    return res.status(401).send("Unauthorized request");
  }
  const token = req.headers["authorization"].split(" ")[1];
  if (!token) {
    return res.status(401).send("Access denied. No token provided.");
  }
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded.user;
    next();
  } catch (err) {
    res.status(400).send("Invalid token.");
  }
};

We send the token along with the request payloads in the request headers. We then check if the token was sent, and verify it using the jwt.verify method.

Once a user is verified, we can save their details in the request object to keep track of their activities in the application.

Let's protect the get users route. Restrict access to only authorized users by adding the verifyUserToken function as a middleware to the route.

...
app.get("/api/users", verifyUserToken, (req, res) => {
  res.json(users);
});
...

Now, your application should look like this:

const express = require("express");
require("dotenv").config();
const bcrypt = require("bcryptjs");
const jwt = require("jsonwebtoken");

const app = express();
app.use(express.json());

const users = [];
const verifyUserToken = (req, res, next) => {
  if (!req.headers.authorization) {
    return res.status(401).send("Unauthorized request");
  }
  const token = req.headers["authorization"].split(" ")[1];
  if (!token) {
    return res.status(401).send("Access denied. No token provided.");
  }
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded.user;
    next();
  } catch (err) {
    res.status(400).send("Invalid token.");
  }
};

app.get("/api/users", verifyUserToken, (req, res) => {
  res.json(users);
});

app.post("/api/register", async (req, res) => {
  const user = req.body;
  if (!user.email || !user.password) {
    return res.status(400).send("Username and password are required.");
  }
  const hash = await bcrypt.hash(user.password, 10);
  user.password = hash;
  users.push(user);
  res.json(user);
});

app.post("/api/login", async (req, res) => {
  const user = req.body;
  //check if user exists
  const foundUser = users.find((user) => user.email === req.body.email);
  if (!foundUser) {
    return res.status(400).send("Invalid email or password");
  }
  //check if password is correct
  const isPasswordValid = await bcrypt.compare(
    user.password,
    foundUser.password
  );
  if (!isPasswordValid) {
    return res.status(400).send("Invalid email or password");
  }
  //create token
  const token = jwt.sign({ user }, process.env.JWT_SECRET, {
    expiresIn: "1h",
  });
  res.json({ token });
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Test Your Node.js Application

Go ahead and test the application to see if it works as it should. Launch Postman and send a GET request to the endpoint localhost:3000/api/users without authentication.

You should get an Unauthorized request message.

Now, register an account by sending a POST request to the endpoint localhost:3000/api/register, with the following JSON data in the request body.

{
  "email": "clara@gmail.com",
  "password": "1234"
}

Then, log in by sending a POST request to the endpoint localhost:3000/api/login with the same data shown above.

JWT will generate a token for you, as shown here:

Finally, copy the auth token to the request headers and send a request to the get users endpoint again. The token should appear in the form's headers.

Bearer Token

Now you have access to all users, until the token expires in one hour.

Wrapping Up

In this tutorial, you secured a Node.js application using JWT. We started by introducing you to JWT and touched on when you should use it, before building a demo app.

Happy coding!

P.S. If you liked this post, subscribe to our JavaScript Sorcery list for a monthly deep dive into more magical JavaScript tips and tricks.

P.P.S. If you need an APM for your Node.js app, go and check out the AppSignal APM for Node.js.

Creating a theme in a Gatsby application with Stitches

Claradev32 — Mon, 25 Jul 2022 13:52:00 +0000

Gatsby is a popular React framework used to build webpages and apps. Its design prioritizes security, scalability, and performance. Gatsby is supported by a large ecosystem, which includes Plugins for integrating services, themes for simple configuration, and Recipes for automating routine tasks. In this tutorial, you'll learn how to create a theme in Gatsby with Stitches.

To get started with this tutorial, ensure you have the following

Node.js version 14 or later installed
yarn package manager installed.
Prior Knowledge of Stitches
Prior Knowledge of Gatsby

What is stitches?

Stiches is a React framework that allows you to confidently create and style reusable components. It includes support for other frameworks such as Vue, Svelte, and Vanilla HTML.
Stitches were created to help developers avoid unnecessary prop interpolations at runtime, thereby improving application performance. Let’s start by creating a new Gatsby application.

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

The above command will clone the Gatsby starter application with the folder structure below.

📦gatsby-site
┣ 📂src
┃ ┗ 📂pages
┃ ┃ ┗ 📜index.js
┣ 📂static
┃ ┗ 📜favicon.ico
┣ 📜.gitignore
┣ 📜.prettierignore
┣ 📜.prettierrc
┣ 📜LICENSE
┣ 📜README.md
┣ 📜gatsby-config.js
┣ 📜package-lock.json
┗ 📜package.json

Setup and Configuring Stitches

Now let's configure stitches with your Gatsby application. First, you need to install the Gatsby plugin for styling with Stitches with the command below.

yarn add gatsby-theme-stitches @stitches/react

Once the installation is completed, open the gatsby-config.js file and add Stitches to the array of plugins with the code snippet below.

module.exports = {
  /* Your site config here */
  plugin: ['gatsby-theme-stitches'],
}

At this point, you are ready to start styling your Gatsby application with Stitches. There are two ways around this.

You can choose to create your config by shadowing the gatsby-theme-stitches/src/config module
You can import the properties directly into your application.

import { styled } from 'gatsby-theme-stitches/src/config';

To use the first method, create a gatsby-theme-stitches/config.js file and add the following configurations.

import { createStitches } from '@stitches/react';

// You should exports all properties
export const {
  styled,
  css,
  globalCss,
  keyframes,
  getCssText,
  theme,
  createTheme,
  config,
} = createStitches({
   theme: {
    colors: {
      black500: "hsl(0, 0%, 0%)",
      white500: "hsl(0, 0%, 100%)",
      gray500: "hsl(206,10%,76%)",
      blue500: "hsl(206,100%,50%)",
      purple500: "hsl(252,78%,60%)",
      green500: "hsl(148,60%,60%)",
      red500: "hsl(352,100%,62%)",
    },
    space: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
    fontSizes: {
      1: "12px",
      2: "13px",
      3: "15px",
    },
    fonts: {
      untitled: "Untitled Sans, apple-system, sans-serif",
      mono: "Söhne Mono, menlo, monospace",
    },
    borderRadius: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
    borders: {
      1: "1px solid #ccc",
      2: "2px solid #ccc",
      3: "3px solid #ccc",
      4: "none",
    },
    paddings: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
    margins: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
    widths: {
      1: "100%",
      2: "50%",
      3: "25%",
    },
  },
});

In the above code snippet, you have exported all the available Stitches properties. So You can import and use them. Then we defined the themes for the elements in our application. We'll can use the theme properties to style our elements.

Create and style custom elements.

Now let's go ahead and use Stitches to create the style for the elements we'll use in our Gatsby application. For separation of concern sake, we'll create components folder in the root directory of the project for all the element's styles. In the component folder, create a new file named Button.js and add the code snippets below.

import { styled } from '../../stitches.config';

export const Button = styled("button", {
   // base styles
  display: "block",
  border: "$4",
  borderRadius: "$1",
  color: "$white500",

  variants: {
    size: {
      sm: {
        fontSize: "13px",
        height: "25px",
        paddingRight: "10px",
        paddingLeft: "10px",
      },
      lg: {
        fontSize: "15px",
        height: "35px",
        paddingLeft: "15px",
        paddingRight: "15px",
      },
    },
    bg: {
      primary: {
        backgroundColor: "#2196f3",
        "&:hover": {
          backgroundColor: "#64b5f6",
        },
      },
      secondary: {
        backgroundColor: "#009688",
        "&:hover": {
          backgroundColor: "#4db6ac",
        },
      },
      danger: {
        backgroundColor: "#f44336",
        "&:hover": {
          backgroundColor: "#ef9a9a",
        },
      },
      success: {
        backgroundColor: "#4caf50",
        color: "white",
        "&:hover": {
          backgroundColor: "#a5d6a7",
        },
      },
    },
  },
});

In the above code snippet, we imported the styled properties from Stitches config file, which will allow us to customize the component. We used the properties we defined in our theme to add the base style of the element using the $ symbol followed by the theme properties. Then we used the variants property to define the styling for the background color (bg) and size (size) of the component.
Next, create a Container.js and add the code snippets below.

import { styled } from "@stitches/react";

export const Container = styled("div", {
   // base styles
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  padding: "$2",
  backgroundColor: "$white500",

  variants: {
    fd: {
      column: {
        flexDirection: "column",
      },
      row: {
        flexDirection: "row",
      },
    },
    size: {
      sm: {
        width: "100%",
        height: "50px",
      },
      lg: {
        width: "100%",
        height: "60px",
      },
    },
    align: {
      center: {
        alignItems: "center",
      },
      left: {
        alignItems: "flex-start",
      },
      right: {
        alignItems: "flex-end",
      },
    },
  },
});

In the Container component, we base style themes and defined the styling to align and set the size of the container using the varriant property.
Next, create an Image.js file and add the code snippet below.

import { styled } from "@stitches/react"

export const Image = styled("img", {
  display: "block",
  width: "$1",
  height: "auto",
  maxWidth: "100%",
  maxHeight: "100%",
  margin: "0 auto",
  variants: {
    size: {
      sm: {
        width: "50%",
        height: "50%",
        maxWidth: "100%",
        maxHeight: "100%",
        margin: "0 auto",
      },
      lg: {
        width: "100%",
        height: "auto",
        maxWidth: "100%",
        maxHeight: "100%",
        margin: "0 auto",
      },
    },
  },
})

We also defined the styling to have a large and small image, we also defined the style to change the image alignment and we applied the themes to the base styles.

Next, create a Header.js file and add the code snippet below.

import { styled } from "@stitches/react";

export const Header = styled("nav", {
  // base styles
  display: "flex",
  flexDirection: "row",
  justifyContent: "space-between",
  alignItems: "center",
  padding: "$2",
  backgroundColor: "$white500",
  borderBottom: "1px solid #e6e6e6",

  variants: {
    size: {
      sm: {
        width: "100%",
        height: "50px",
      },
      lg: {
        width: "100%",
        height: "60px",
      },
    },
    bg: {
      primary: {
        backgroundColor: "#2196f3",
        "&:hover": {
          backgroundColor: "#64b5f6",
        },
      },
      secondary: {
        backgroundColor: "#009688",
        "&:hover": {
          backgroundColor: "#4db6ac",
        },
      },
      danger: {
        backgroundColor: "#f44336",
        "&:hover": {
          backgroundColor: "#ef9a9a",
        },
      },
      success: {
        backgroundColor: "#4caf50",
        "&:hover": {
          backgroundColor: "#a5d6a7",
        },
      },
    },
  },
});

Next, create a Card.js file and add the code snippets below.

import { styled } from "@stitches/react";

export const Card = styled("div", {
  display: "flex",
  justifyContent: "center",
  flexDirection: "column",
  padding: "$1",
  margin: "$2"

  variants: {
    align: {
      center: {
        alignItems: "center",
      },
      left: {
        alignItems: "flex-start",
      },
      right: {
        alignItems: "flex-end",
      },
    },
    boder: {
        none: { 
            border: "none"
        },
        solid: {
            border: "solid 1px #e6e6e6"
        }
    }
  },
});

Next, a new file Input.js and add the code snippet below.

import { styled } from "@stitches/react";

export const Input = styled("input", {
  display: "block",
  marginBottom: "10px",

  variants: {
    size: {
      sm: {
        fontSize: "13px",
        height: "25px",
        paddingRight: "10px",
        paddingLeft: "10px",
      },
      lg: {
        fontSize: "15px",
        height: "35px",
        paddingLeft: "15px",
        paddingRight: "15px",
      },
    },
  },
});

In the above code snippet, we have an Input element to handle users' input. In the above Input component, we want to have large and small inputs, and we defined the styles for that using the variants property.

Next, a new file Text.js and add the code snippet below.

import { styled } from "@stitches/react";

export const Text = styled('p', {
    fontFamily: '$mono',
    color: '$black5000',

    variants: {
      size: {
        1: {
          fontSize: '10px',
        },
        2: {
          fontSize: '12px',
        },
        3: {
          fontSize: '14px',
        },
      },
    },
  });

In the above code snippet, we created a component to allow us to add and style a paragraph.

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

Start enjoying your debugging experience - start using OpenReplay for free.

Creating Blog App

Now that we've styled the elements we need for this application, let's go ahead and create a blog application. First, we need to update the pages/index.js file to import all components we just created with the code snippet below.

import { Button } from "../components/Button"
import { Input } from "../components/Input"
import { Card } from "../components/Card"
import { Text } from "../components/Text"
import { Header } from "../components/Header"
import { Image } from "../components/Image"
import { Container } from "../components/Container"

Next, we'll use the component to update the Home component with the code snippet below.

export default function Home() {
  const [modal, setModal] = useState(false)

  const showModal = () => {
    setModel(!model)
  }
  return (
    <>
      <Container>
        <Header bg="primary">
          <Text size="1">My Blog App</Text>
          <Button bg="secondary" size="sm" onClick={showModal}>
            New Blog
          </Button>
        </Header>
        {model && (
          <Card boder="solid">
            <Text size="1">Titile:</Text>
            <Input />
            <Text size="1">Content</Text>
            <Input />
            <Text size="1">Cover Image</Text>
            <Input />
            <Button bg="primary" size="sm">
              Post
            </Button>
          </Card>
        )}
        <Text>Blog Posts</Text>
      </Container>
      <Container fd="row">
        {blogs.map(blog => (
          <Card boder="solid">
            <Image src={blog.cover} size="lg" />
            <Text size="3">{blog.title}</Text>
            <Text size="1">{blog.content}</Text>
            <Text size="1">{blog.date}</Text>
          </Card>
        ))}
      </Container>
    </>
  )
}

In the above code snippet, we updated the Home component using the components we styled using Stitches. We applied the different styles we want to each of the components used in our Home component. We have a form input field that will be toggled to hide or show it using the Modal state variable.

Then we looped through the blog details we'll be creating shortly using the map function and render them to the user.

Finally, add the following blog array objects to the Home component.

...
  const blogs = [
    {
      title: "How to build a website",
      content:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel",
      cover:
        "https://www.hostgator.com/blog/wp-content/uploads/2017/09/MakeOwnWebsite.png",
      date: "2020-01-01",
    },
    {
      title: "Getting started with OpenReplay",
      content:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel",
      cover:
        "https://opengraph.githubassets.com/2ddbe84dccfbcc774b1c9861dd327d2efd7e1cd49964dc01229c181bea751e60/openreplay/documentation",
      date: "2020-01-01",
    },
    {
      title: "Node.js Vs React",
      content:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel",
      cover:
        "https://miro.medium.com/max/1400/1*CpDidbInbG4Er_0j_hknFQ.jpeg",
      date: "2020-01-01",
    },
  ]
...

Test the application

With the blog demo application created, let's go ahead and test it out. Run the commands to change the directory to the project folder and start the application.

  cd gatsby-site
  gatsby develop

Then navigate http://localhost:8000/ and you should see the output below on the index page.

Conclusion

You’ve learned how to create a theme UI in a Gatsby application with Stitches by building a blog demo application. First, we started with an introduction to Gatsby and Stitches. You learned how to configure Stitches with Gatsby and styled some components.
Now that you've known how to integrate Gatsby and Stitches, how would you style your next Gatsby application?

Building a Node.js API with Hapi.js and MongoDB

Claradev32 — Thu, 26 Aug 2021 15:33:33 +0000

As our web applications scale, there is a need to reduce the development time by the use of a more reliable, and salable, tool, which gets the job done much faster.
In this tutorial, we will build a Book Store API with Hapi.js and MongoDB. We will set up MongoDB, Hapi.js and build a RESTful API.

Prerequisites

This tutorial will be a hands-on demonstration, you can find the source code on Gitbub. If you'd like to follow along, be sure you have the following:

MongoDB Database - This tutorial uses MongoDB.
Node.js - This tutorial uses Nodjs and NPM
Postman - This tutorial uses Postman to test the API

What is Hap.js

Hapi.js is a Nodejs framework used to build powerful, scalable applications, with minimal overhead and full out-of-the-box functionality. Hapi.js was originally developed to handle Walmart’s Black Friday scale, hapi continues to be the proven choice for enterprise-grade backend needs.

Get started

To get started to create a folder for your project and access it from your terminal. Open the folder in Visual Studio Code or any other IDE you prefer.

mkdir BookApp //create a folder for the project
cd \BookApp // change directory to the app folder

Then initialize NPM, which will create a package.json file in our app root directory where we store our dependencies.

npm init -y

Next, we need to install some packages for our project.

npm install @hapi/Hapi mongoose dotenv morgan --save

Next, let's take a look at our project structure.

Controllers - is where we handle the application logic
Model - is where we handle our database collection ## Setting Up Hapi.js Server

We will start by creating a server.js and **file. Which is our application entry point.
In your project root directory create and **server.js file, then import the Hapi package we installed in the previous section, create an instance of the Hapi server, specify the port you want the server to listen to, and host address*.*
Next, we will create the root route, of our application with a GET request and create a handler. For now, we will be sending a simple text to the client.
Finally, we start the Hapi.js server with the start method and display a message to the console.

Add this code to your server.js

const Hapi = require('@hapi/hapi');

const server = Hapi.server({
  port: 4000,
  host: '127.0.0.1'
});

server.route({
  method: 'GET',
  path: '/',
  handler: (req, h) => {

    return 'Hello I am Hapi!<';
  }
});

server.start();
console.log(`Server running on port ${server.info.uri}`);

It's to start our server. run this command on your command line to start the server.

node server.js

Next, open your web browser, navigate to localhost:4000. The server will respond with Hello I am Hapi!.

Creating a MongoDB Database

Now that you have learned how to create a Hapi server, let's go ahead and set up MongoDB for our project.
We will be using Mongoose to communicate with the MongoDB database.
Run this command to install Mongoose:

npm install mongoose

Next, let’s connect MongoDB to our application using Mongoose. We will require mongoose, create a connection using the mongoose connect method and pass in our local server address to the server.
If the database is up, you should see “DB started” on the console.
Add this code to your server.js:

const mongoose = require("mongoose");
mongoose
 .connect("mongodb://localhost:27017/BookStore")
 .then(() => {
  console.log("db started!");
 })
 .catch((e) => {
  console.log(e);
 });

Creating Book Schema

We now have our database up and running, let’s go ahead and create a book schema. Each book in our store will have a name, author, price, supplier, and createdAt.
Next, we define the type of data the documents should accept, then we validate the data from the users, to make sure they don’t submit empty records.
Add this code to model/BookModel:

const mongoose = require("mongoose");
const BookSchema = new mongoose.Schema({
 name: {
  type: String,
  required: [true, "Book price is required"],
 },
 author: {
  type: String,
  required: [true, "Authors name is required"],
 },
 price: { type: Number, required: [true, "Book price is required"] },
 ISBN: {
  type: String,
  required: [true, "Book ISBN is required"],
 },
 supplier :{
  type: String,
  required: [true, "Suppliers name is required"],
 },
 createdAt: {
  type: Date,
  default: Date.now(),
 },
});
module.exports = mongoose.model("Books", BookSchema);

Creating Books

Now that we have defined our database schema. let’s go ahead and add a handler to add books to the store.
First, we require the Books model, then create and export our handler function.

Next, we create an object from the book model and add a record of the collection using the create method. The data from the form is stored in the payload as JSON, so we need to convert it to an object using the JSON parse method.
Lastly, we return the created document as a response to the users.

Add this code to controller/BookControllers.

exports.createBook = async (req, h) => {
 const data = await Books.create(JSON.parse(req.payload));
 return status;
};

Now lets go ahead and create a route for this handler function.
add this code to your server.js

server.route({
 method: "GET",
 path: "/api/store",
 handler: controllers.getAllBooks,
});

Getting All Books

Now that we can now add books to our database, let’s get the books stored in the database.
First, we get the books from the form, which is stored as JSON in the payload. Then we need to convert the data to an object since we store data as objects to our collection.

Add this code to controller/BookController:

exports.getAllBooks = async (req, h) => {
 const books = await Books.find();
 return books;
};

Now let's go ahead and create a route for this handler function.
Add this code to server.js.

server.route({
 method: "POST",
 path: "/api/store",
 handler: controllers.createBook,
});

Getting a Book

Let's go now get a book by its id.
First, we need the id of the Book selected, then we use object destructing to the id from the params object.
Next, we query the book collection to get a book by its id, using the findById method. Then now return the book to the client.

Add this code to controller/BookController:

exports.getBook = async(req, h) => {
 const {id} = req.params
 const book = await Books.findById({_id:id});
 return book;
};

Next, let’s go ahead and create the getBook route with a patch request with an id parameter.

Add this code to server.js:

server.route({
 method: "GET",
 path: "/api/store/{id}",
 handler: controllers.getBook,
}

Updating a Book

Now, let create a handler function to update the book in our collection.
First, we need to get the book id from the params object, also get the update data from the request payload.
Next, we create an object from the books model and use the findByIdAndUpdate method to update the book whose id is specified in the request parameters. Then convert the payload to an object and pass it as the new value of the document.

Next, we return the updated document with the new option set to true and send the document to the client.

Add this code to controller/BookController:

exports.updateBook = async (req, h) => {
 const { id } = req.params;
 const data = JSON.parse(req.payload);
 const modifiedBook = await Books.findByIdAndUpdate({ _id: id }, data, {
  new:true,
 });
 return modified book;
}

Next, let’s go ahead and create the update route with a patch request and an id parameter.
Add this code to server.js:

server.route({
 method: "PATCH",
 path: "/api/store/{id}",
 handler: controllers.updateBook,
})

Deleting a Book

Let's go ahead and create our delete handler.
First, we need to get the book id from the params object, then delete the book from the collection from the id.
Next, we return null to the client, since the record no longer exists.

Add this code to controller/BookController.js:

exports.deleteBook = async (req, h) => {
 const { id } = req.params;
 await Books.findByIdAndDelete({ _id: id });
 return "null";
};

Next, let’s go ahead and create the delete route, which will listen to a delete request, then we pass an id as a parameter.

Add this code to server.js:

server.route({

 method: "DELETE",

 path: "/api/store/{id}",

 handler: controllers.deleteBook,

})

Testing our API

Now that we have implemented our RESTful API, let us go ahead and test them.
Open Postman, test the with these endpoints.

http://localhost:3000/api/store/ - GET request
http://localhost:3000/api/store - POST request with this request body

{
"name": "Advanced Javacript",
"price": 2000,
"ISBN" : "AD90976",
"supplier": "mark James",
"author": "james"
}

http://localhost:3000/api/store/{id} - GET request
http://localhost:3000/api/store/{id} - PATCH request
http://localhost:3000/api/store/{id} - DELETE request

Conclusion

Throughout this tutorial, you've learned how to create a RESTful API using Hapi.js. You've also experienced setting up MongoDB and testing API using Postman.
Now, how would you use Hapi in your next project to create APIs?

DEV Community: Claradev32

Best AI Tools That Apply to Jobs for You in 2025

Why AI is Your New Best Friend in the Job Search

Top AI Tools for Job Seekers in 2025

AI-Powered Resume and Cover Letter Optimizers

AI Tools for Interview Preparation

AI-Powered Job Matching and Application Platforms

AI for Skill Development and Career Planning

The Road Ahead: Embracing AI for Your Career

Advanced Topics in E2E Testing Introduction

Prerequisites

Testing Single-Page Applications (SPAs)

Setting Up Cypress for SPAs

Testing Progressive Web Apps (PWAs)

Setting Up Cypress for PWAs

Testing Mobile Applications with Appium

Setting Up Appium

Writing Tests for Mobile Apps

Visual Regression Testing

Setting Up Cypress for Visual Testing

Writing Visual Regression Tests

Accessibility Testing

Setting Up Cypress for Accessibility Testing

Writing Accessibility Tests

Security Testing

Setting Up a Security Testing Environment

Writing Security Tests

Conclusion

Integration Testing with Node.js

Setting Up the Project

Creating the Application

Defining the Application Structure

Creating the Express Application

Defining the User Model

Creating the User Service

Creating the User Routes

Integration Testing

Testing Interactions Between Modules and Components

Mocking Dependencies and External Services

Testing Database Interactions

Conclusion

Integration Testing with Node.js

Setting Up the Project

Creating the Application

Defining the Application Structure

Creating the Express Application

Defining the User Model

Creating the User Service

Creating the User Routes

Integration Testing

Testing Interactions Between Modules and Components

Mocking Dependencies and External Services

Testing Database Interactions

Conclusion

Adding advanced search to a Strapi and Next.js project with Algolia

Introduction

Prerequisites

Setting up Strapi Project

Setting up Next.js Project

Integrating Algolia with Strapi

Setting up an Algolia account and obtaining API keys

Create Collection Type

Configuring Algolia in the Strapi project to index content.

Building the Search Interface in Next.js

Installing Algolia search client in the Next.js project.

Creating search components to display results.

Syncing Strapi Content with Algolia:

Implementing search features like faceting, filtering, and sorting

Configure Sorting for Each Replica

Conclusion

Resources

Secure Your Node.js App with JSON Web Tokens

What is a JSON Web Token (JWT)?

When to Use a JWT in Your Node.js App

Pre-requisites

Create a New Project

Install Node.js App Dependencies

Set up an Express Server

Create A .env File

Build App Routes

Create A `.env` File