Function fetchProjects

client/src/component/Projects.jsx:16–25

()

    useEffect(() => {
        // Fetch the data from the API when the component mounts
        const fetchProjects = async () => {
            try {
                const response = await axios.get(`${VITE_SERVER_PORT}/api/showcaseProjects/all-projects`);
                setProjects(response.data);  // Store the fetched projects in state
                setLoading(false);  // Set loading to false after data is fetched
            } catch (err) {
                setError('Error fetching projects');
                setLoading(false);  // Set loading to false if an error occurs
            }
        };

        fetchProjects();  // Call the function to fetch data
    }, []);  // Empty dependency array means this effect runs once on mount