У меня уже есть сервер, который обрабатывает запросы на логин. Тебе надо туда добавить:  GET request to get/search a list of cards. 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 (


{cardObj.card.image.alt}

{cardObj.card.text.heading}

{cardObj.card.text.description}





);
};
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});
});  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.'
            }
        }
    }
];