У меня уже есть сервер, который обрабатывает запросы на логин. Тебе надо туда добавить get запрос, заменив редакс код, который будет отображать карточки, а также отображать их при поиске пользователем. arraycards.jsx: import springBootLogo from '../../../../img/spring-boot.svg';
import springFrameworkLogo from '../../../../img/spring-framework.svg';
import springDataLogo from '../../../../img/spring-data.svg';
import springCloudLogo from '../../../../img/spring-cloud.svg';
import springDataFlowLogo from '../../../../img/spring-data-flow.svg';
import springSecurityLogo from '../../../../img/spring-security.svg';
import style from './cardsarray.module.css';

export const CARDS = [
    {
        id: 1,
        card: {
            cardClass: style.main__card,
            image: {
                imageClass: style.main__card_image,
                alt: 'Spring Boot Logo',
                src: springBootLogo
            },
            text: {
                heading: 'Spring Boot',
                description:
                    'Provides core support for dependency injection, transaction management, web apps, data access, messaging, and more.'
            }
        }
    },
    {
        id: 2,
        card: {
            cardClass: style.main__card,
            image: {
                imageClass: style.main__card_image,
                alt: 'Spring Framework Logo',
                src: springFrameworkLogo
            },
            text: {
                heading: 'Spring Framework',
                description:
                    'Takes an opinionated view of building Spring applications and gets you up and running as quickly as possible.'
            }
        }
    },
    {
        id: 3,
        card: {
            cardClass: style.main__card,
            image: {
                imageClass: style.main__card_image,
                alt: 'Spring Data Logo',
                src: springDataLogo
            },
            text: {
                heading: 'Spring Data',
                description:
                    'Provides a consistent approach to data access - relational, non-relational, map-reduce, and beyond.'
            }
        }
    },
    {
        id: 4,
        card: {
            cardClass: style.main__card,
            image: {
                imageClass: style.main__card_image,
                alt: 'Spring Cloud Logo',
                src: springCloudLogo
            },
            text: {
                heading: 'Spring Cloud',
                description:
                    'Provides a set of tools for common patterns in distributed systems. Useful for building and deploying microservices.'
            }
        }
    },
    {
        id: 5,
        card: {
            cardClass: style.main__card,
            image: {
                imageClass: style.main__card_image,
                alt: 'Spring Cloud Data Flow Logo',
                src: springDataFlowLogo
            },
            text: {
                heading: 'Spring Cloud Data Flow',
                description:
                    'Provides an orchestration service for composable data microservice applications on modern runtimes.'
            }
        }
    },
    {
        id: 6,
        card: {
            cardClass: style.main__card,
            image: {
                imageClass: style.main__card_image,
                alt: 'Spring Security Logo',
                src: springSecurityLogo
            },
            text: {
                heading: 'Spring Security',
                description:
                    'Protects your application with comprehensive and extensible authentication and authorization support.'
            }
        }
    }
];
CardSection.jsx import React, { useCallback, useContext } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { filterCards, setSearchValue } 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 displayedCards = useSelector((state) => state.cards.displayedCards);
    const { theme } = useContext(ThemeContext);

    const handleSearchChange = useCallback(
        (value) => {
            dispatch(setSearchValue(value));
            dispatch(filterCards(value));
        },
        [dispatch]
    );

    return (
        <div>
            <SearchInput onSearch={handleSearchChange} />
            <div
                className={classNames(style.cardSection, {
                    [style.darkTheme]: theme === 'dark'
                })}
            >
                {displayedCards.length > 0 ? (
                    displayedCards.map((cardObj) => (
                        <Card key={cardObj.id} cardObj={cardObj} />
                    ))
                ) : (
                    <p>No results found</p>
                )}
            </div>
        </div>
    );
}
CreateSlice.jsx import { CARDS } from '../cardsarray/arraycards';
import { SET_SEARCH_VALUE } from './actions';

const initialState = {
    cards: CARDS,
    displayedCards: CARDS
};

export const cardsReducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_SEARCH_VALUE: {
            const searchValueLowerCase = action.payload.toLowerCase();
            const filteredCards = state.cards.filter((cardObj) => {
                const title = cardObj.card.text.heading.toLowerCase();
                const description = cardObj.card.text.description.toLowerCase();
                return (
                    title.includes(searchValueLowerCase) ||
                    description.includes(searchValueLowerCase)
                );
            });

            return {
                ...state,
                displayedCards: filteredCards
            };
        }

        default:
            return state;
    }
};
SearchInpur.jsx import React, { useState, useEffect, useContext } from 'react';
import PropTypes from 'prop-types';
import { ThemeContext } from '../../../Selector/ThemeContext';
import classNames from 'classnames';
import style from './SearchInput.module.css';

const DEBOUNCE_DELAY = 300;

export const SearchInput = ({ onSearch }) => {
    const [searchValue, setSearchValue] = useState('');
    const [debouncedValue, setDebouncedValue] = useState(searchValue);
    const { theme } = useContext(ThemeContext);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(searchValue);
        }, DEBOUNCE_DELAY);

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

    useEffect(() => {
        onSearch(debouncedValue.toLowerCase());
    }, [debouncedValue, onSearch]);

    const handleSearchChange = (event) => {
        setSearchValue(event.target.value);
    };

    return (
        <div
            className={classNames(style.searchContainer, {
                [style.darkTheme]: theme === 'dark'
            })}
        >
            <input
                type="text"
                className={style.searchInput}
                placeholder="Поиск..."
                value={searchValue}
                onChange={handleSearchChange}
            />
        </div>
    );
};

SearchInput.propTypes = {
    onSearch: PropTypes.func.isRequired
};
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={cardObj.card.cardClass}>
                <img
                    className={cardObj.card.image.imageClass}
                    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 (server):  require('dotenv').config();
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 5000;

app.use(cors());
app.use(express.json());

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

const projects = require('./projects');

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('/projects', (req, res) => {
  const searchValue = req.query.search?.toLowerCase() || '';
  const filteredProjects = projects.filter((project) => {
    const title = project.card.text.heading.toLowerCase();
    const description = project.card.text.description.toLowerCase();
    return title.includes(searchValue) || description.includes(searchValue);
  });
  res.json(filteredProjects);
});

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