Gaheera Babbar Tri 2 Final Reflection

Gaheera Babbar College Board Video Notes Big Idea 4
Post Review Changes
- 1. Edit and Delete Feature
- 2. CPT Requirements: Sequencing
CPT Requirements

Gaheera Babbar College Board Video Notes Big Idea 4

Post Review Changes

1. Edit and Delete Feature

uppsetup Originally, when a user clicked edit, the text boxes where they enter their bio and favorite artists were empty. I changed the fetchProfile function so that when it loads the profile data, it automatically fills in the bio and favorite artists in the text boxes. This makes it easier for users because they don’t have to type everything from scratch—they can simply edit their existing information. To make this change, I added the following lines of code to the fetchProfile function.

document.getElementById('editBio').value = result.bio;
document.getElementById('editArtists').value = result.favorite_artist;

2. CPT Requirements: Sequencing

Understanding sequencing: The order of the steps in an algorithm is crucial to ensure that the algorithm works as intended. Sequencing is the order in which code statements are executed. The following reflects on the order of code statements that allow the user profile to be created successfully.
- Sequencing:
  - The function handleFormSubmission is the first user-driven event. The onsubmit event is used to trigger the profile creation process when the user submits the form, ensuring that the input is correctly captured.
  - The form is then validated using the wordCount and bioError checks. Before any data is processed or sent to the server, the bio field is validated to ensure that it contains between 1-25 words. This ensures that the form data is correct before proceeding. Otherwise, an error message is displayed. This process also demonstrates iteration as I make use of an if else statement to ensure that the bio does not exceed the 25 word limit.

  const bio = document.getElementById('bio').value.trim();
  const wordCount = bio.split(/\s+/).filter(word => word).length;
  if (wordCount < 1 || wordCount > 25) {
    errorDiv.textContent = "Bio must be between 1 and 25 words.";
    return false;
}    

The data from the form is then extracted into variables.

const name = document.getElementById('name').value;
const artists = document.getElementById('artists').value;
const profilePicture = document.getElementById('profilePicture').value;   

After the data is collected and validated, the createProfile function is called. This function sends the form data as a JSON object to the backend via a POST request to create the user profile.
After profile creation, the script authenticates the user by sending the profile’s username (uid) and a password (here hardcoded as “password”).
Once the profile is successfully created, a button is dynamically added to the page to allow the user to navigate to their newly created profile page.

Feature Purpose and Understanding

Project Breakdown

CSP Aspect	Description
Program Purpose and Function	The main goal of this application is to provide a seamless user experience for submitting and managing feedback in real time. The system ensures that user responses are collected efficiently and stored for later retrieval. The frontend consists of a structured form where users can enter feedback, which is then validated and stored by the backend. The program dynamically updates the database and provides real-time confirmation, demonstrating an interactive user experience.
Data Abstraction	The application uses an array-based structure to manage feedback efficiently. Each entry is uniquely identified for easy retrieval and modification. This structure allows for operations such as adding, filtering, and sorting feedback dynamically, ensuring scalability as more responses accumulate. Data abstraction simplifies access and improves maintainability.
Algorithm Implementation	The system follows a structured approach involving sequencing, selection, and iteration. User feedback is captured, validated to ensure correctness, and stored if it meets the criteria. The stored data is retrieved and formatted dynamically for real-time display. Iteration ensures all stored feedback entries remain accessible. These steps enhance the system’s logic and efficiency.
Procedural Abstraction	Functions are used to ensure code modularity and reusability. A dedicated function handles input validation, preventing empty or invalid feedback submissions. This reduces redundancy and enhances maintainability. Another function manages API requests for processing feedback efficiently. By using procedural abstraction, the system ensures clarity, consistency, and easy scalability.
Testing	Multiple test cases were designed to ensure system reliability. Tests included valid input submissions, rejection of invalid inputs, proper data retrieval and display, and scalability testing with large data sets. Testing confirmed that the system maintained data integrity and performed reliably under different conditions.

CPT Requirements

Instructions for Input

User Input:
- The user provides input through an HTML form that collects their name, bio, top five favorite artists, and profile picture URL.
- This triggers the handleFormSubmission event when the user submits the form.
- Example:
```
<form id="profileForm" onsubmit="handleFormSubmission(event); return false;">
    <label for="name">Your Name:</label>
    <input type="text" id="name" name="name" required>
</form>
```

Use of a Collection Type

List:
- The artists input is stored as a comma-separated list and then converted into an array.
- Storing this data in a list makes it easier to manipulate and display users’ favorite artists dynamically.
- The list simplifies the process of iterating over artists to display them later.
- Example:
```
const artists = document.getElementById('artists').value.split(',');
```

PPR: Pesronalized Project Reference

Procedure: createProfile

Purpose: Handles sending user input to the backend API for profile creation.
Parameters:
- name (string)
- artists (list)
- bio (string)
- profilePicture (string)
Return Type: None (performs an API request and handles response asynchronously)

Implementation:

const createProfile = async (name, artists, bio, profilePicture) => {
    const url = `${pythonURI}/api/profile`;
    const data = {
        name: name,
        uid: name,
        pfp: profilePicture,
        bio: bio,
        favorite_artist: artists
    };
    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });
        if (!response.ok) {
            const errorData = await response.json();
            console.error("Error:", errorData.message);
        }
    } catch (error) {
        console.error("Network error:", error);
    }
};

Algorithm with Sequencing, Selection, and Iteration

Sequencing:
- The function createProfile first constructs the data object, then sends it to the backend using a fetch request.

Selection:

The program checks if the response.ok condition is met before proceeding.

Example:

if (!response.ok) {
    const errorData = await response.json();
    console.error("Error:", errorData.message);
}

Iteration:
- Iterates over the words in the bio to count them and validate length constraints (1–25 words).
- Example:
```
const wordCount = bio.split(/\s+/).filter(word => word).length;
```

Calling the Student-Developed Procedure

The createProfile function is called inside handleFormSubmission after validating the input:

async function runProcess() {
    await createProfile(name, artists, bio, profilePicture);
    showProfileLinkButton();
}
runProcess();

Output Mechanism

Visual Output:

A success message is displayed in an alert box when the profile is successfully created.

Example:

alert("Profile created successfully!");

A dynamically created button allows users to navigate to their newly created profile.

Example:

function showProfileLinkButton() {
    const button = document.createElement('button');
    button.textContent = "Go to Profile";
    button.addEventListener('click', function () {
        window.location.href = "/gaheera_2025/melodymates/created_profile.html/";
    });
    document.getElementById('formContainer').appendChild(button);
}

MCQ Reflection

Score: 51/67

Strongest Skills:

Program Design and Development: 100%
Data Compression: 100%
Strings: 100%
Boolean Expressions: 100%
Conditionals: 100%
Nested Conditionals: 100%
Iteration: 100%

Weakest Skills:

Identifying and Correcting Errors: 29%
🔹 Correction: Index should be decremented after checking each list element to ensure all elements are checked.
Algorithmic Efficiency: 50%
🔹 Correction: An algorithm must take a number of steps less than or equal to a polynomial function. Accessing 10 elements is a reasonable time.
Developing Algorithms: 50%
🔹 Correction: The flowchart sets available to true whenever weekday is true and miles is less than 20, and sets false otherwise.
Fault Tolerance: 50%
🔹 Correction: It is possible to have redundant routing in both configurations. Possible routes include Q-P-V, Q-T-V in 1, and Q-S-V and Q-T-T-V in 2.
Crowdsourcing: 50%
🔹 Correction: Using an application to enlist a large number of people to help find a lost pet is an example of crowdsourcing, which obtains input into a task by leveraging many individuals via the internet.

NATM Reflection and Involvement

NATM Role: I took the responsibility of demonstrating each of the features to all visitors and guiding them through the process of creating their profile on our website.

Feedback: We received a lot of positive feedback on our feature due to the creativity of our idea and the visual appeal of our website. I received praise for my profile picture feature, which allows users to select any image from the web as their profile picture.

Projects Visited: Booklist, Bathroom Hall Pass, Travel Guide, Cookbook

Outside Feedback and Preperation for Final

Before NATM, we decided to practice our demo in front of Ms. Pataki to ensure that we were able to present our feature to parents who had no prior knowledge of our project.

She suggested that we adjust our frontend to have a matching color scheme across features, so we all took the time to adjust to a pink theme. She also noted that the artist recommendation feature had many requirements when entering artists' names, which we also worked on. We decided to alter the feature to allow users to modify their favorite artists after submission.

I also recieved feedback on my blog from my friends who took CSA in the past like Tanisha, who helped me review my CPT requirements and practice my review.

Overall, the feedback helped us make final refinements that allowed us to have a successful final reflection.

Personal Strengths and Weaknesses as Scrum Master

Strengths	Weaknesses
Leadership: Took charge in organizing the project structure through Kanban board and delegating tasks effectively by managing user stories.	Delegation Challenges: Sometimes found it difficult to trust others with key components, leading to extra workload.
Taking Initiative: Proactively researched and implemented best practices for data abstraction and API communication.	Overcommitting: Set mind on larger goals rather than focusing on a step-by-step procedure initially.
Problem-Solving: Successfully adapted the API request method to handle errors and improve robustness.	Debugging Efficiency: Spent more time than expected troubleshooting minor syntax errors.
Adaptability: Adjusted the implementation approach when initial design ideas didn't work as expected.	Handling Uncertainty: Faced difficulties when encountering unexpected API responses and took time to adjust.
Attention to Detail: Feature focuses on a user-friendly design and is organized well.	CRUD Methods and Bugs: Not all aspects of the bio are able to be edited, such as the profile picture and the username.

Future Applications

Applications in Electrical Engineering:

Embedded Systems & IoT:
🔹 Many electrical engineering applications involve integrating hardware with software, such as designing microcontroller-based systems that communicate with web interfaces.
Data Processing & Automation:
🔹 Understanding how backend systems handle data is crucial for tasks like sensor data processing in robotics and automation.
UI/UX for Engineering Tools:
🔹Future electrical engineers often develop simulation tools—my experience in frontend development could help design better interfaces for circuit analysis or signal processing applications.

Career Applications:

Internships in Embedded Software Development:
🔹 Many EE internships require firmware programming, API handling, and data visualization, all of which tie back to my web development experience.
Collaboration in Engineering Teams:
🔹 Working with both frontend and backend mirrors real-world engineering projects where cross-functional teamwork is essential.
Innovation in Electrical Engineering Fields:
🔹Whether it's AI-driven electrical systemsmor hardware-software integration, my background in web development will allow me to bridge the gap between data-driven applications and hardware engineering.

Self-Evaluation & Reflection

Topic	Score	Reasoning
Big 5 Accomplishments	4.5/5	I highlighted my key achievements well and referenced code snippets to show the key components of my code. However, my burndown could have been more thorough and
Full Stack Project DEMO	2/2	Effectively demonstrated all features with working edit and delete methods, as well as interactive and visually appealing interface.
CPT Requirements and Writeup	0.5/1	All CPT requirements were covered. I have a list data collection method and also an algorithm with sequencing, selection, and iteration. I but some are incoporated less than others. For example, I make use of lists and arrays only once.
MCQ	1/1	Performed well overall and need to improve in error identification, algorithmic efficiency, and crowdsourcing concepts. Made sure to complete mcq corrections and reflect on topics of weakness.
Overall Reflection	1/1	I took many steps to reflect on my contributions this trimester. I made sure to send my outline to Mr. Mort 24 hours in advance, reflected on NATM feedback, practiced our live demo in front of Ms. Pataki, and reflected on the skills I gained and how I can apply them to my future career goals. I also reflected on my personal stregnths and weaknesses as srum master and group contributor.

Overall Score: 9/10