About our Project + The Journey

We created an online farmers market called FreshCart. Our vision was to enable individuals to access fresh, wholesome produce right from the comfort of their own homes. Using APIs and front-end development, we had much fun developing our APIs; the items in our store, a login API, and an add-to-cart function. Our journey continued with a frontend repository where we utilized primarily HTML and JavaScript to style the entire site, ensuring a user-friendly experience. We were also able to connect it to our backend so that the user could interact with the elements on the site!

More about my role

I was the lead of frontend, so I was in charge of everything frontend. I was also responsible for making sure that my frontend coder, knew what she was supposed to be doing, and got it done. Organization was relaly important, and we were able to collaborate on slack as well as messages on how to split up the work. Once the styling and html of the site was done, I had to make sure backend was able to connect, and our site was operateable by a user.

My Key Commits + Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fruits</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <h1>Fruits</h1>
    <table>
        <tr>
            <th>Product</th>
            <th>Price $</th>
            <th>Action</th>
        </tr>
        <tbody id="data"></tbody>
    </table>

    <script>
        // Function to make the API request and populate the table
        function fetchData() {
            fetch('http://localhost:8350/api/inventory/fruits')
                .then(response => response.json())
                .then(data => {
                    const tableBody = document.getElementById('data');

                    if (data && Array.isArray(data.fruits)) {
                        data.fruits.forEach(item => {
                            const row = document.createElement('tr');
                            const productCell = document.createElement('td');
                            const priceCell = document.createElement('td');

                            productCell.textContent = item.name;
                            priceCell.textContent = item.unitCost;

                            row.appendChild(productCell);
                            row.appendChild(priceCell);

                            tableBody.appendChild(row);
                        });
                    } else {
                        console.error('Data is not in the expected format:', data);
                    }
                })
                .catch(error => {
                    // Handle errors
                    console.error('Error:', error);
                });
        }

        // Call the fetchData function when the page loads
        fetchData();
        function fetchData() {
            fetch('http://localhost:8350/api/inventory/fruits')
                .then(response => response.json())
                .then(data => {
                    const tableBody = document.getElementById('data');

                    if (data && Array.isArray(data.fruits)) {
                        data.fruits.forEach(item => {
                            const row = document.createElement('tr');
                            const productCell = document.createElement('td');
                            const priceCell = document.createElement('td');
                            const actionCell = document.createElement('td'); // Create a new cell for the "Add to Cart" button

                            productCell.textContent = item.name;
                            priceCell.textContent = item.unitCost;

                            // Create the "Add to Cart" button
                            const addToCartButton = document.createElement('button');
                            addToCartButton.textContent = 'Add to Cart';
                            addToCartButton.addEventListener('click', () => {
                                addToCart(item.name, item.unitCost); // Call the addToCart function when the button is clicked
                            });

                            actionCell.appendChild(addToCartButton);

                            row.appendChild(productCell);
                            row.appendChild(priceCell);
                            row.appendChild(actionCell); // Add the "Add to Cart" button to the table row

                            tableBody.appendChild(row);
                        });
                    } else {
                        console.error('Data is not in the expected format:', data);
                    }
                })
                .catch(error => {
                    // Handle errors
                    console.error('Error:', error);
                });
        }

        // Call the fetchData function when the page loads
        fetchData();

        // Your existing addToCart function for interacting with the cart API
        function addToCart(productName, price) {
            // ...
        }
    </script>
</body>
</html>

After the “basic” HTML of the site was complete, I had to get the endpoints and localhost links from backend. A major commit during this whole project, was this code. This is specifically for the fruits page in our store, but once I had this, I was able to replicate the same thing on the rest of the pages. In the script section, I had javascript code that fetched the localhost link.

Once the endpoint was fetched and put on the frontend site, another big complication for me was figuring out how to style the code. When I connected the endpoints, all that showed was an empty page, or it would just list out the elements of our API. I did a lot of research, and found out how to organize the data in a table that is user-friendly.

Before

After