Add a unit testing library (jest) to your project. Write unit tests for
your code. Organize your API call to log in as a thunk if you
haven’t done it before and cover it with the following test
scenarios:
a. Mock request to the server (in unit tests, we shouldn’t
depend on a server, so we simulate its response via
jest.mock()).
b. Write a first unit test that covers the scenario when auth
is a success, then success action is dispatched,
c. Write a second unit test that covers the scenario when
auth is failed, then error/fail action is dispatched. actions.js 
export const FETCH_CARDS_SUCCESS = 'FETCH_CARDS_SUCCESS';

export const fetchCardsSuccess = (cards) => ({
    type: FETCH_CARDS_SUCCESS,
    payload: cards
});

export const fetchCards = (searchValue = '') => {
    return async (dispatch) => {
        try {
            const queryParam = searchValue ? `?search=${encodeURIComponent(searchValue)}` : '';
            const response = await fetch(`http://localhost:5000/api/cards${queryParam}`);
            const data = await response.json();
            dispatch(fetchCardsSuccess(data));
        } catch (error) {
            console.error('Error fetching cards:', error);
        }
    };
}; reducer.js import {
    FETCH_CARDS_SUCCESS,
} from './actions';

const initialState = {
    cards: []
};

export const cardsReducer = (state = initialState, action) => {
    switch (action.type) {
        case FETCH_CARDS_SUCCESS:
            return {
                ...state,
                cards: action.payload
            };

        default:
            return state;
    }
}; store.js import { createStore, combineReducers, applyMiddleware } from 'redux';
import {thunk} from 'redux-thunk';
import { cardsReducer } from './reducer';
import { authReducer } from './authReducer';

const rootReducer = combineReducers({
    cards: cardsReducer,
    auth: authReducer
});

export const store = createStore(rootReducer, applyMiddleware(thunk)); CardSection.jsx import React, { useEffect, useContext, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchCards } from '../../../Redux/actions';
import { SearchInput } from '../SearchInput/SearchInput';
import { Card } from '../Card/Card';
import { ThemeContext } from '../../../Selector/ThemeContext';
import classNames from 'classnames';
import style from './CardSection.module.css';

export function CardSection() {
    const dispatch = useDispatch();
    const { cards } = useSelector((state) => state.cards);
    const { theme } = useContext(ThemeContext);

    const [searchValue, setSearchValue] = useState('');
    const [debouncedSearchValue, setDebouncedSearchValue] = useState(searchValue);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedSearchValue(searchValue);
        }, 300);

        return () => {
            clearTimeout(handler);
        };
    }, [searchValue]);

    useEffect(() => {
        dispatch(fetchCards(debouncedSearchValue));
    }, [dispatch, debouncedSearchValue]);

    const handleSearchChange = (value) => {
        setSearchValue(value);
    };

    return (
        <div>
            <SearchInput value={searchValue} onSearch={handleSearchChange} />
            <div
                className={classNames(style.cardSection, {
                    [style.darkTheme]: theme === 'dark'
                })}
            >
                {cards.length > 0 ? (
                    cards.map((cardObj) => (
                        <Card key={cardObj.id} cardObj={cardObj} />
                    ))
                ) : (
                    <p>No results found</p>
                )}
            </div>
        </div>
    );
} Card.jsx import React from 'react';
import PropTypes from 'prop-types';
import style from './Card.module.css';

export const Card = ({ cardObj }) => {
    return (
        <div className={style.MainCardOutline}>
            <div className={style.main__card}>
                <img
                    className={style.main__card_image}
                    src={cardObj.card.image.src}
                    alt={cardObj.card.image.alt}
                />
                <div>
                    <h3>{cardObj.card.text.heading}</h3>
                    <p>{cardObj.card.text.description}</p>
                </div>
            </div>
        </div>
    );
};

Card.propTypes = {
    cardObj: PropTypes.shape({
        card: PropTypes.shape({
            cardClass: PropTypes.string.isRequired,
            image: PropTypes.shape({
                imageClass: PropTypes.string.isRequired,
                src: PropTypes.string.isRequired,
                alt: PropTypes.string.isRequired
            }).isRequired,
            text: PropTypes.shape({
                heading: PropTypes.string.isRequired,
                description: PropTypes.string.isRequired
            }).isRequired
        }).isRequired
    }).isRequired
}; index.js: require('dotenv').config();
const express = require('express');
const cors = require('cors');
const cards = require('./cards');
const app = express();
const PORT = 5000;

app.use(cors());
app.use(express.json());
app.use('/img', express.static('img'));

const validUsername = process.env.USERNAME;
const validPassword = process.env.PASSWORD;

app.post('/login', (req, res) => {
    const { username, password } = req.body;
    if (username === validUsername && password === validPassword) {
        res.status(200).json({ message: 'Login successful' });
    } else {
        res.status(401).json({ message: 'Invalid username or password' });
    }
});

app.get('/api/cards', (req, res) => {
    const { search } = req.query;

    if (search) {
        const searchLower = search.toLowerCase();
        const filteredCards = cards.filter(cardObj => {
            const title = cardObj.card.text.heading.toLowerCase();
            const description = cardObj.card.text.description.toLowerCase();
            return title.includes(searchLower) || description.includes(searchLower);
        });

        return res.status(200).json(filteredCards);
    }

    res.status(200).json(cards);
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});