DEV Community: Victor Del Carpio

Phase 5: CampusNest

Victor Del Carpio — Fri, 21 Feb 2025 21:05:39 +0000

Introduction

For the Phase 5 project of my Flatiron Software Engineering Bootcamp, I developed CampusNest, a platform designed to centralize student sublets and nearby campus housing into an accessible database. Finding student housing can be a hassle—whether it’s subletting a dorm room or locating off-campus accommodations, students often struggle with scattered information and unreliable listings. CampusNest was my attempt to streamline this process, providing a seamless way for students to browse, list, and find housing.

The inspiration came from a friend’s thesis project at Yale, which focused on creating an open dormitory database. I wanted to take that concept further by enabling students to browse, list, and find housing seamlessly, all while implementing the technical requirements of my Phase 5 project.

Tech Stack

CampusNest was built using Flask and SQLAlchemy on the backend, with a React frontend powered by React Router. While Flask served its purpose, I personally prefer a React/Node stack due to its better documentation and smoother workflow—constantly switching between Python and JavaScript felt inefficient.

Backend:

Flask & SQLAlchemy for data handling and ORM
Google Places API for location search
Haversine formula to calculate the closest properties
RESTful API structure with full CRUD on the bookings and properties models, utilizing Marshmallow for serialization.

Validations & error handling to prevent data inconsistencies

Frontend:

React Router for client-side navigation
Lazy loading with Suspense to optimize performance
useContext for state management
Google Maps integration for enhanced search functionality

Implementing Key Features

React Router Setup

The application follows a structured routing system, allowing users to navigate between authentication pages, property listings, and profile dashboards. I utilized useRoutes for cleaner route management, implementing layouts like MainLayout, AuthLayout, and ProfileLayout.

Here’s a snippet of the routing setup:

export default function Router() {
    return useRoutes([
        {
            path: "/auth",
            element: <AuthLayout />,
            children: [
                { path: "login", element: <LoginPage /> },
                { path: "register", element: <SignupPage /> },
            ],
        },
        {
            path: "/",
            element: <MainLayout />,
            children: [
                { path: "", element: <HomePage /> },
                { path: "properties/:id", element: <PropertyPage /> }
            ],
        },
        {
            path: "/",
            element: <ProfileLayout />,
            children: [
                { path: "hosts/:id", element: <HostPage/>},
                { path: "profile", element: <ProfilePage /> },
                { path: "host-home", element: <HostHomePage /> },
                { path: "bookings/:id", element: <BookingPage />},
            ],
        },
    ]);
}

Search & Location-Based Filtering

One of the biggest challenges was implementing a search feature that finds properties closest to a given location. I solved this by integrating the Google Places API for search and using the Haversine formula to calculate distances between properties.

CRUD Operations & Many-to-Many Relationships

CampusNest includes at least four models with a many-to-many relationship. Users can list properties, book sublets, and manage their listings through full CRUD functionality, ensuring proper validation and error handling.

New Feature: Google Maps & Search Optimization

As required, I implemented something new beyond the curriculum. Instead of using the default SerializerMixin taught in class, I opted for Marshmallow for serialization, which provided far more powerful and flexible data handling. Additionally, I integrated the Google Maps API to allow users to visualize listings dynamically and optimized search queries for better performance.

Challenges & Lessons Learned

Data Type Errors: I lost a few days debugging an issue where property ids were strings instead of integers. It reinforced the importance of data consistency.
Search Optimization: Implementing geolocation-based filtering took time, but learning about the Haversine formula was valuable.
Flask vs. Node: While Flask worked, I still believe React/Node is a more efficient pairing due to seamless full-stack JavaScript development.

Future Improvements

If I had more time, I’d add:

Payments integration for direct transactions.
School verification to ensure only students can list/book properties.
Interactive maps & better filtering for an improved user experience.
Scalability improvements to support more listings and high-traffic loads.

Final Thoughts

CampusNest was a challenging but rewarding project that combined backend logic with frontend usability. Despite my preference for React/Node, working with Flask/SQLAlchemy pushed me to improve my adaptability.

For anyone tackling Phase 5, my advice is:

Plan your database schema early to avoid refactoring issues.
Test API endpoints thoroughly before moving to frontend integration.
Don’t underestimate debugging—small mistakes (like string vs. int IDs) can cost days.

Overall, CampusNest was a step toward simplifying student housing searches. With future improvements, it could become a fully functional marketplace for students looking to sublet or rent rooms near campus.

Phase 4 Project

Victor Del Carpio — Wed, 15 Jan 2025 22:23:41 +0000

Building My Trip Journal with Flask and React: A Phase 4 Flatiron Project

For the Phase 4 project of my Flatiron Software Engineering Bootcamp, I developed Trip Journal, an application designed to help users document their travel experiences. The app allows users to record the places they visited, the activities they participated in, and their overall reflections on their trips. This was an exciting opportunity to combine a Flask API backend with a React frontend and explore the intricacies of building a full-stack application.
The Project Goals

This project was guided by a set of specific technical requirements:

Flask Backend with React Frontend: The app had to use Flask for the API and React for the client.
Database Models:
At least three models with two one-to-many relationships and one many-to-many relationship.
The many-to-many association required an additional user-submittable attribute.
Full CRUD actions for at least one resource and Create/Read actions for all resources.
Client-Side Functionality:
Use Formik for form handling and validation.
Implement client-side routing with React Router.
Connect the frontend and backend using fetch().
User Experience: Provide a responsive and intuitive interface for managing trips, places, and activities.

Database Design

The backend was built using Flask and SQLAlchemy, with three primary models: Trip, Place, and Activity. These models represented the relationships between a trip, the places visited, and the activities undertaken.

Trip: The central model with attributes like name, start_date, end_date, and description. It includes a one-to-many relationship with Activity.
Place: Represents destinations. It shares a one-to-many relationship with Activity.
Activity: A join table connecting trips and places, forming a many-to-many relationship with user-submittable attributes like name and description.

Here’s a snapshot of the models.py file for context:

class Trip(db.Model, SerializerMixin):
    __tablename__ = 'trip'

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    start_date = db.Column(db.Date, nullable=False)
    end_date = db.Column(db.Date, nullable=False)
    description = db.Column(db.Text)

    activities = db.relationship('Activity', back_populates='trip', cascade='all, delete-orphan')
    places = association_proxy('activities', 'place', creator=lambda place_obj: Activity(place=place_obj))


class Place(db.Model, SerializerMixin):
    __tablename__ = 'places'

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    description = db.Column(db.Text)

    activities = db.relationship('Activity', back_populates='place', cascade='all, delete-orphan')
    trips = association_proxy('activity', 'trip', creator = lambda trip_obj : Activity(trip = trip_obj))

class Activity(db.Model, SerializerMixin):
    __tablename__ = 'activity'

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    description = db.Column(db.Text)

    place_id = db.Column(db.Integer, db.ForeignKey('places.id'), nullable=False)
    trip_id = db.Column(db.Integer, db.ForeignKey('trip.id'), nullable=False)

    place = db.relationship('Place', back_populates='activities')
    trip = db.relationship('Trip', back_populates='activities')

API Implementation

The Flask API provided endpoints for managing trips, places, and activities, supporting full CRUD actions. Here’s an example of the API design:

GET /trips: Fetch all trips with associated places and activities.
POST /trips: Create a new trip, ensuring validation for required fields.
PATCH /trips/:id: Update specific fields of a trip.
DELETE /trips/:id: Remove a trip and its related activities.

I used flask-restful to structure the resources, making the code modular and maintainable.

One significant challenge involved ensuring the correct relationships between trips, places, and activities when sending data to the frontend. For example, if Place A belonged to both Trip 1 and Trip 2, the activities list for Place A needed to be filtered based on the trip. My mentor and I worked on the following code in the backend to address this issue:

class TripListResource(Resource):
    def get(self):
        trips = Trip.query.all()

        result = []
        for trip in trips:
            trip_dict = trip.to_dict(only=('places', 'id', 'name', 'description', 'start_date', 'end_date'))
            for place in trip_dict['places']:
                place['activities'] = [
                    activity for activity in place['activities'] if activity['trip_id'] == trip.id
                ]
            result.append(trip_dict)

        return result, 200

This ensured that each trip received the correct set of activities for its associated places.

React Frontend

On the frontend, I used React to create a dynamic and user-friendly interface. The application included the following key features:

Routing: Using React Router, users could navigate between the home page, trip journal entries, and activity logs seamlessly.
Forms and Validation:
    Formik handled form validation with constraints like:
        Data Type Validation: Ensuring date formats (e.g., YYYY-MM-DD) were correct.
        String Validation: Restricting trip names to at least three characters.
Fetching Data: The fetch API connected the React frontend to the Flask backend, enabling data retrieval and manipulation.

Additionally, I implemented responsive layouts using CSS Flexbox and Grid, ensuring the app looked great on both desktop and mobile devices. This was crucial for making Trip Journal intuitive for users who might want to log their travel experiences on the go.

Challenges and Learning Outcomes

Challenges:

Fixing Relationships in API Data: The biggest hurdle was ensuring that the relationships between trips, places, and activities were filtered correctly before sending the data to the frontend. Addressing this issue improved my understanding of how to manage complex relationships in SQLAlchemy.

Data Validation: Implementing robust validation for the models required careful thought, especially for relationships and date constraints.

Client-Server Communication: Debugging fetch calls and handling API error messages taught me the importance of clear and consistent data handling between the frontend and backend.

Lessons Learned:

Building Association Proxies: Working on many-to-many relationships deepened my appreciation for SQLAlchemy’s flexibility.
Formik's Power: Using Formik simplified form handling while ensuring a polished user experience.
Backend-Frontend Synergy: This project underscored the importance of ensuring both the backend and frontend communicate effectively.

Conclusion

Developing Trip Journal was a rewarding experience, merging technical requirements with creativity. It allowed me to apply the concepts I learned throughout the bootcamp to a real-world application. The project not only deepened my knowledge of Flask and React but also strengthened my problem-solving skills in full-stack development.

This project is a testament to how software engineering enables us to create tools that enhance personal experiences—like preserving the memories of a great adventure.

Building a CLI for creating playlists: an evolution

Victor Del Carpio — Wed, 18 Sep 2024 17:16:10 +0000

Introduction

For my Phase 3 final project at the Flatiron School's Software Engineering program, I developed a CLI that allows the user to create and manage playlists. I’ll take you through the development of a Playlist Manager CLI project, discussing some key improvements made along the way, including the use of loop control techniques and code refinement.

Background

In this project, I used Python to create a user-friendly CLI that would allow the user to create and manage playlists and the songs within them. I used simple-terminal-menu for the CLI.

Initial Implementation

When starting out with the Playlist Manager CLI, the code was designed to manage playlists and songs via a terminal menu interface. Here’s a glimpse of the initial approach:

def list_playlists():
    menu_items = ["Back"] + [playlist.name for playlist in Playlist.get_all()]
    terminal_menu = TerminalMenu(menu_items, title="Select a Playlist")
    while (choice := terminal_menu.show()) != 0:
        playlist = Playlist.find_by_name(menu_items[choice])
        if playlist_menu(playlist):
            break  # Exit the loop if the playlist menu indicates a change

In this version, break was used to exit the loop if a change occurred in the playlist menu. While this worked, it wasn’t the most elegant solution.
Refining Loop Control with Flags

In the refined version, we replaced the break statement with a flag (exit_loop) to manage loop control more gracefully. Here’s the updated list_playlists function:

def list_playlists():
    menu_items = ["Back"] + [playlist.name for playlist in Playlist.get_all()]
    terminal_menu = TerminalMenu(menu_items, title="Select a Playlist")
    exit_loop = False
    while (choice := terminal_menu.show()) != 0 and not exit_loop:
        playlist = Playlist.find_by_name(menu_items[choice])
        if playlist_menu(playlist):
            exit_loop = True  # Set flag to exit loop

Using a flag to control the loop’s exit condition improves readability and maintains clarity about the loop's intended behavior. This approach also avoids unexpected exits from nested or complex loops.

Enhanced Loop Control in Playlist Menu

Similarly, the playlist_menu function was adjusted to use a flag instead of break:

def playlist_menu(playlist: Playlist):
    menu_items = ["Back", "Edit Playlist name", "Delete Playlist", "Add Song to Playlist"] + [f"{song.title}" for song in playlist.songs()]
    terminal_menu = TerminalMenu(menu_items, title=f"Select a Song from {playlist.name}")
    exit_loop = False
    while (choice := terminal_menu.show()) != 0 and not exit_loop:
        if choice == 1:
            edit_playlist_name(playlist)
            exit_loop = True
        elif choice == 2:
            return delete_playlist(playlist)
        elif choice == 3:
            add_song_to_playlist(playlist)
            exit_loop = True
        elif choice >= 4:
            song = Song.find_by_title(menu_items[choice])
            return song_menu(song)
    return False

The use of exit_loop here provides a clear and consistent way to control when to exit the loop, improving overall code clarity and making the logic easier to follow.
Embracing the Walrus Operator

One of the significant enhancements in Python 3.8 is the introduction of the walrus operator (:=). This operator allows assignment within an expression, which simplifies the loop control structure. Before this feature, the code often involved separate lines for assignment and condition checks.

In the initial code, the assignment and condition check were separate:

choice = terminal_menu.show()
if choice != 0:
    # Code here

With the walrus operator, you can streamline this into a single line:

while (choice := terminal_menu.show()) != 0:
    # Code here

This not only makes the code more concise but also keeps the loop’s condition and assignment together, reducing the likelihood of errors and improving readability.

Summary

The evolution of this Playlist Manager CLI project showcases several key improvements:

Using Flags for Loop Control: Replacing break statements with flags provides clearer control over loop exit conditions and enhances readability.
Leveraging the Walrus Operator: The introduction of the walrus operator in Python 3.8 simplifies loop and condition logic, making code more concise and easier to understand.
Cleaner Code Practices: These changes reflect a broader trend toward cleaner, more maintainable code, which is essential in any software development project.

By embracing these best practices, developers can create more robust and readable code, paving the way for easier maintenance and scalability in their projects.

Building a Spotify Journal

Victor Del Carpio — Tue, 23 Apr 2024 20:25:46 +0000

Introduction

For my Phase 2 final project at the Flatiron School's Software Engineering program, I developed an online journal that integrated a user's Spotify history so they could write about the music they listen to.

Background

In this project, I used Vite and React to create the online journal. The key functionalities were implemented using axios for making asynchronous HTTP requests to Spotify's API endpoints, as well as the json-server. I used Material UI for the styling and used Yup as the form provider.

Implementation

For the sake of code organization, I made a file that handled all of the API calls and would make each of the GET requests easy to run. This file would specifically make calls to Spotify API endpoints and to the json-server. The code looked like the following:

import axios from "axios";

export async function getUserId(token) {
    const endpoint = `https://api.spotify.com/v1/me`;
    const response = await axios.get(endpoint, {
        headers: {
            Authorization: `Bearer ${token}`,
        }
    });
    return response.data;
}

export async function getUserFavorites(type, time_range, limit = 20, token) {
    const endpoint = `https://api.spotify.com/v1/me/top/${type}`;
    const response = await axios.get(endpoint, {
        headers: {
            Authorization: `Bearer ${token}`,
        },
        params: {
            time_range: time_range,
            limit: limit,
        },
    });
    return response.data.items;
}

export async function getRecentTracks(token) {
    const endpoint = "https://api.spotify.com/v1/me/player/recently-played";
    const response = await axios.get(endpoint, {
        headers: {
            Authorization: `Bearer ${token}`,
        },
        params: {
            limit: 50,
        },
    });
    const filtered = response.data.items.map((track) => track.track);
    return filtered;
}

export async function getTrack(token, id) {
    const endpoint = `https://api.spotify.com/v1/tracks/${id}`;
    const response = await axios.get(endpoint, {
        headers: {
            Authorization: `Bearer ${token}`
        }
    });
    return response.data;
}

export async function getJournalEntries(id) {
    const endpoint = `http://localhost:4000/entries?user_id=${id}`;
    const response = await axios.get(endpoint);
    return response.data;
}

Implementing User Authentication

To enable user login without relying on an Express server, I implemented a straightforward authentication process. Users accessed a designated URL for authentication, which then provided an access token upon successful login. This access token was centrally stored in a context to ensure universal accessibility across all application pages and components.

Designing the Web Application

The web application's architecture revolved around React's Router, enabling seamless navigation between its four distinct pages. Leveraging useRoutes, certain pages shared a cohesive layout, enhancing user experience and maintaining visual consistency.

The application's components are methodically organized within designated folders, ensuring clarity and maintainability within the project structure.

Crafting the Journal Entry Form

One of the project's highlights was the intricate design of the Journal Entry form. Powered by tools like Material UI and Yup for styling and form validation, respectively, the form offered a user-friendly interface for inputting journal entries. Notably, the form included:

Text input fields with character limits for titles and descriptions.
A date picker component facilitated by RHFDatePicker for selecting precise dates.

import PropTypes from 'prop-types';
import { FormProvider as Form } from 'react-hook-form';
import React from 'react';

FormProvider.propTypes = {
    children: PropTypes.node,
    methods: PropTypes.object,
    onSubmit: PropTypes.func,
};

export default function FormProvider({ children, onSubmit, methods }) {
    return (
        <Form {...methods}>
            <form onSubmit={onSubmit}>{children}</form>
        </Form>
    );   
}

From here on out the code generally looks like the following:

<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
    <Stack spacing={3} sx={{ my: 2, width: "50vw" }}>
        {/* Display error alert if submission fails */}
        {!!errors.afterSubmit && (
            <Alert severity="error">{errors.afterSubmit.message}</Alert>
        )}

        {/* Display track information if available */}

        {/* Text input for title with character limit */}
        <RHFTextField name="title" label="Title" charLimit={100} />

        {/* Multiline input for description with character limit */}
        <RHFTextField name="description" label="Description" multiline rows={5} charLimit={3000} />

        {/* Date picker for selecting a date */}
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <RHFDatePicker name="date" label="Date" />
        </LocalizationProvider>
    </Stack>

    {/* Submit button */}
    <Button>
        Post Entry
    </Button>
</FormProvider>

In the context of my project, I integrated a custom form controller named RHFTextField to facilitate text input with enhanced functionality. This component, derived and adapted from a previous project, underwent slight modifications to align with the specific requirements of my journal application.

Component Overview

The RHFTextField component leverages Material UI's TextField and Controller from react-hook-form to encapsulate text input within a controlled form environment.

import React from "react";
import { InputAdornment, TextField } from "@mui/material";
import PropTypes from "prop-types";
import { Controller, useFormContext } from "react-hook-form";

RHFTextField.propTypes = {
    name: PropTypes.string,
    helperText: PropTypes.node,
    charLimit: PropTypes.number, // Character limit for text input
    // Additional props from Material UI TextField
};

export default function RHFTextField({ name, helperText, charLimit, ...other }) {
    const { control } = useFormContext();

    return (
        <Controller
            name={name}
            control={control}
            render={({ field, fieldState: { error } }) => {
                const remainingCharacters = charLimit - (field.value ? field.value.length : 0);

                return (
                    <TextField
                        {...field}
                        fullWidth
                        inputProps={{ maxLength: charLimit }}
                        value={typeof field.value === 'number' && field.value === 0 ? '' : field.value}
                        error={!!error}
                        helperText={error ? error?.message : helperText}
                        InputProps={{
                            endAdornment: (
                                <InputAdornment position="end">
                                    {`${remainingCharacters}`}
                                </InputAdornment>
                            ),
                        }}
                        {...other}
                    />
                );
            }}
        />
    );
}

Implementing the RHFTextField Form Controller

Component Overview

The RHFTextField component leverages Material UI's TextField and Controller from react-hook-form to encapsulate text input within a controlled form environment.

import React from "react";
import { InputAdornment, TextField } from "@mui/material";
import PropTypes from "prop-types";
import { Controller, useFormContext } from "react-hook-form";

RHFTextField.propTypes = {
    name: PropTypes.string,
    helperText: PropTypes.node,
};

export default function RHFTextField({ name, helperText, charLimit, ...other }) {
    const { control } = useFormContext();

    return (
        <Controller
            name={name}
            control={control}
            render={({ field, fieldState: { error } }) => {
                const remainingCharacters = charLimit - (field.value ? field.value.length : 0);
                return (
                    <TextField
                        {...field}
                        fullWidth
                        inputProps={{ maxLength: charLimit }}
                        value={typeof field.value === 'number' && field.value === 0 ? '' : field.value}
                        error={!!error}
                        helperText={error ? error?.message : helperText}
                        InputProps={{
                            endAdornment: (
                                <InputAdornment position="end">
                                {`${remainingCharacters}`}
                                </InputAdornment>
                            ),
                        }}
                        {...other}
                    />
                );
            }}
        />
    );
}

Key Features and Functionality

Props Definition

name: The name of the input field within the form.
helperText: Additional helper text to provide guidance or feedback.
charLimit: Maximum character limit for the text input field.
Other Material UI TextField Props: Pass-through props for configuring text input behavior (e.g., label, variant, onChange, etc.).

Form Control with Controller

The Controller component from react-hook-form manages the state and validation of the input field, ensuring seamless integration with the form's overall state.

Character Limit Handling: Limits the input length based on charLimit and displays the remaining character count dynamically.
Error Display: Highlights input errors and displays relevant error messages using Material UI's TextField component.
Input Adornment: Includes an input adornment (end adornment) showing the remaining character count for real-time feedback.

Building an Art Gallery SPA with the Met Museum API

Victor Del Carpio — Mon, 04 Mar 2024 01:40:01 +0000

Introduction

For my Phase 1 final project at the Flatiron School's Software Engineering program, I developed an Art Gallery Single Page Application (SPA) utilizing the Metropolitan Museum of Art's API. This project allows users to explore artworks from specific artists in the Met's vast collection.

Background

In this project, I used JavaScript, HTML, and CSS to create the SPA. The key functionalities were implemented using event listeners and Fetch API for making asynchronous HTTP requests to the Met Museum's API endpoints.

Implementation

The core functionality of the application revolved around fetching data from the Met Museum's API endpoints. Here's how we achieved this:

API Integration

We made use of the Met Museum's API endpoints to gather information about artworks and artists. The primary endpoints utilized were:

Search Endpoint: https://collectionapi.metmuseum.org/public/collection/v1/search?q={query}
This endpoint allowed us to search for specific artists or artworks based on user input.

Object Details Endpoint: https://collectionapi.metmuseum.org/public/collection/v1/objects/{objectID}
With this endpoint, we could retrieve detailed information about individual artworks using their unique object IDs.

The following is how we use the API to collect the artwork information.

async function fetchArtworks(query) {
        const response = await fetch(`https://collectionapi.metmuseum.org/public/collection/v1/search?q=${query}`);
        const data = await response.json();
        const limitedObjectIDs = data.objectIDs.slice(0, 30);
        return limitedObjectIDs;
    }

async function fetchArtworkDetails(objectID) {
        const response = await fetch(`https://collectionapi.metmuseum.org/public/collection/v1/objects/${objectID}`);
        const data = await response.json();
        return data;
    }

async function displayArtworks(query) {
        const objectIDs = await fetchArtworks(query);
        artworksGrid.innerHTML = '';
        objectIDs.forEach(async objectID => {
            const artworkDetails = await fetchArtworkDetails(objectID);
            if (artworkDetails.primaryImageSmall) {
                const artworkImage = artworkDetails.primaryImageSmall;
                const artworkTitle = artworkDetails.title;

                const artworkElement = document.createElement('div');
                artworkElement.innerHTML = `
                <div class="card">
                    <img src="${artworkImage}" class="card-img-top" alt="${artworkTitle}">
                    <div class="card-body">
                        <h5 class="card-title">${artworkTitle}</h5>
                        <button class="btn btn-primary btn-sm view-details-btn" data-artwork-id="${objectID}">View Details</button>
                    </div>
                </div>
                `;
                artworksGrid.appendChild(artworkElement);
        }
    });
}

Scraper Script

To populate our database file db.json with initial artwork data, we utilized a Python script. This script scraped data from the Met Museum's API using the requests library and saved it in JSON format. Here's a snippet of the scraper script:

import requests
import json

object_endpoint = "https://collectionapi.metmuseum.org/public/collection/v1/objects/"

def fetch_object_details(object_id):
    response = requests.get(object_endpoint + str(object_id))
    if response.status_code == 200:
        return response.json()
    else:
        return None

def fetch_and_save_objects(object_ids, filename):
    objects_data = {"artworks": []}
    for object_id in object_ids:
        object_details = fetch_object_details(object_id)
        if object_details:
            objects_data["artworks"].append(object_details)
        if len(objects_data["artworks"]) >= 100:
            break

    with open(filename, 'w') as f:
        json.dump(objects_data, f, indent=4)

if __name__ == "__main__":
    response = requests.get("https://collectionapi.metmuseum.org/public/collection/v1/search?medium=Paintings|Sculpture&q=europe")
    if response.status_code == 200:
        print(response.json()["total"])
        object_ids = response.json()["objectIDs"]
        fetch_and_save_objects(object_ids, "db.json")
        print("Objects fetched and saved successfully.")
    else:
        print("Failed to fetch objects.")

Implementation

To start, I set up event listeners to handle user interactions such as submitting a search query or clicking on an artwork for more details. Here's a snippet of the JavaScript code:

// Event listeners for search functionality and modal display
searchForm.addEventListener('submit', function (event) {
    event.preventDefault();
    performSearch();
});

searchButton.addEventListener('click', function (event) {
    event.preventDefault();
    performSearch();
});

modal.addEventListener('click', function (event) {
    if (event.target && event.target.classList.contains('close')) {
        modal.style.display = 'none';
    }
});

artworksGrid.addEventListener('click', function (event) {
    if (event.target && event.target.classList.contains('view-details-btn')) {
        const objectID = event.target.getAttribute('data-artwork-id');
        displayModal(objectID);
    }
});

This code sets up event listeners for search functionality, modal display, and artwork details viewing.

The following images is a demo of the website.