Final Exam: Trimester 2 Retrospective

📋 5 for 12; Five things I did for the past twelve weeks

5 things you did over 12 weeks, Issues, personal blog

🔥 Burndown List

Aesthetihawk

Goals: My main objective was to analyze the JavaScript code which connects to the backend API endpoints and refine it so it connects to Aesthetihawk. I cleaned up a lot of the code and updated the endpoints since some of them were not working properly. The following is a list of completed tasks and upcoming tasks.

Update the endpoint code so that it connects to the backend properly. Some endpoints were not working.
Standardize the formats between the toolkit and profile pages on Aesthetihawk for cohesion
Overhaul how you view and update your user information. I did this by taking inspiration from existing companies and reading up on their design guidelines and analysis portfolios. You shouldn’t reinvent the wheel if it’s already rolling.
Colors, animations, and spacing are meaningful. Nothing exists without a purpose.
LIQUID!!! All my pages use Liquid. Everyone really underestimates the power of Liquid. It’s so easy to define things once and have an adaptive template without repeating code a million times.
Each window uses a modal which is adaptive. A lot of code is rewritten several times because there are small differences. However, they still follow the same general format. I want to adapt DRY (Don’t Repeat Yourself) principles when coding.
All toolkits shouldn’t show if you are not logged in so you are forced to authenticate before using a tool. This is better for security and prevents malicious users from spamming or abusing systems which don’t require authentication. For example, someone could abuse SAGAI and waste API credits.
Work with Dylan on the backend’s frontend to unify aesthetics between frontend and backend (at Mr. Mortensen’s request).

Bathroom

Goals: My main objective was to help Srijan and Matthew with the barcode scanning technology because I am well versed in hardware. I also worked on the login system to handle user authentication AND to handle user specific data, such as their pass status or queue status.

User authentication for bathroom works. User authentication works for email AND for student ID. I did this by using a regex to handle different cases.
Users can create an account. Previously, you had to be logged in to create an account. I changed this so that anyone can create an account since it doesn’t make sense to have to log in to make an account.
User data, such as where they are, their queue status, and more is handled in the DB.
Barcode scanner is connected to local code on the RPI which handles scanning requests. You can SSH into the RPI to upload local code. Serial bus protocol can be used to transfer data. The whole process should work locally with the only connection to the “outside world” being a connection to the internet/backend.

📺 Lesson and Presentation

Recursion lesson planning

Goals: we had to watch the College Board videos on recursion and distill the information into something easy to understand. As most people have found out, their videos are really boring and really long. We watch all the videos as well as discussing how to teach complex, abstract concepts like merge sort. Recursion is also a generally difficult concept, so we worked on that.

Watch every video and create a write up. Each section includes a list of key concepts and skills.
Create interactive content for students. We made popcorn hacks and homework. However, we also showed recursive code and went through each step individually. We also gave the code to the students and encouraged them to run the code step-by-step.
Recursion is difficult. We added many images to give visuals to students to explain the concepts.
Produce videos for the lesson. All of us created presentations for our respective section. Because I was doing merge sort, I made a presentation on how it works. I included many animations and colors to make the topic easy.
Grade all of the homework assignments. We were a team of three, so I graded a third of the homework assignments. I made the grading easy by putting in formulas in each cell so that all we had to do was input the scores and everything was auto graded.

📊 Analytics

🖥️ Full Stack Feature Demo

Step 1: Send a GET request to the backend to fetch a user’s image. The image is encoded in a base64 string and is validated and decoded upon arrival.

Step 2: When clicking the save changes button, the image is encoded into base64. A helper function will add the required data header to indicate the image type. The payload is sent to the backend.

Step 3: Backend schema changes were successfully done! The image is encoded and stored in the database where it can be retrieved later. Due to how JavaScript works, the user has to reload the page to see their new profile image because the function is an await.

📃 Summary

File payload handling
- Converting files to base64 and encoding the header within
Database schema updates
- Changes are persistent and instant (can depend on server load though)
Changes reflected visually
- Updated profile picture upon reload

🗣️ N@TM Feedback

“Adding photos of students!”
- Developer response: this feature is actually implemented! Students can upload their own profile picture if they want to. We won’t force people to upload a photo nor will we force them to upload a photo of themselves though. This is due to privacy reasons as well as the fact that students may want a different profile picture.
“UX responsiveness and optimization?”
- Developer response: Aesthetihawk has had changes made due to responsiveness issues. In fact, this issue was first pointed out by Aadit in the pre-beta testing. Since my computer has a large screen, I didn’t notice! Most of these issues should be fixed by now though.
“Have images that don’t clash on the student toolkit.”
- Developer response: We actually have a solution for this! With Mr. Mortensen’s approval, we would like to host a contest to redesign the toolkit logos! Currently, the logos are a placeholder which is why they don’t look good.
“Add a teacher admin hub”
- Developer response: We are currently working on this! However, due to time constraints, we chose to focus more on features that would benefit students primarily for the fact that many more students access these features a lot more.
“Have an accessibility color scheme”
- Developer response: that’s a great idea! We might implement accessibility settings in the near future. However, this is a lot more difficult than it seems because such changes need to be made across the ENTIRE site and over every web page. We would also need to research accessibility guidelines scientifically. Great future idea!
“People who don’t have a profile picture look a bit odd”
- Developer response: actually, we have a default profile picture which should display if you’re logged in but didn’t upload an image. Unfortunately, we think someone may have bricked this feature since it was working in the pre-beta testing. We will sort this out in the future and fix it though.

📸 N@TM Pictures

✍️ Key Feature Blog Writeup

🧠 Déjà Vu

The planning and writeup process below might sound familiar. That’s because this process is what is actively used at Qualcomm!

As described by product manager job listings, a scrum master would need to:

Execute project plans with scheduling, resource forecasting, and stakeholder identification.
Scope and prioritization of deliverables
Ensure project objectives are met, present the vision to management, and gain stakeholder buy-in
Identify team skills, create project teams, and schedule task assignments.
Communicate with stakeholders to establish needs and goals.
Manage project performance (timeliness, quality, scope, complexity)
Secure project compliance
Facilitate collaboration

What I wrote was no coincidence! I looked on LinkedIn for posts and job offerings related to a Qualcomm product manager and formatted my write-up just like how you would in a real job!

🤔 What is covered?

I worked on two projects/features: bathroom pass and Aesthetihawk. Bathroom pass was more in the first ⅔ of the trimester with Aesthetihawk taking the focus in the last ⅓.

🎫 Bathroom Pass

This writeup will focus on how to handle authentication using the scanner and the interplay between hardware and software, something commonly seen in the real world (ex: Qualcomm or Apple).

📖 Contextualization

When developing a product, you need to ask some key questions first:

Who is this product for?
1. You cannot develop a product without knowing who it’s for. Almost every product you see was developed for a specific purpose and audience. In our case, our product is for students AND teachers.
What is the product’s purpose?
1. The goal of our product is to let students use a digital bathroom pass. For teachers, they should be able to manage their students and see if someone is using the bathroom for a suspiciously large amount of time.
Why should you care about our product?
1. Physical bathroom passes suck. They waste resources and are often tampered with. They may be lost, destroyed, or can get dirty (trust me; you don’t want to shine a blacklight on one of those things). Digital bathroom passes solve this. Furthermore, they are tamper proof. You can’t abuse the pass as easily, and your usage is tracked so you can’t cheat the system or lie to your teacher.
What would our audience want?
1. Teachers hate when students bring their phones to the bathroom. A digital bathroom pass may seem like the antithesis of that. However, we want to implement a system that lets students scan their school-issued IDs to authenticate without having to take their phone with them.
2. Students won’t use the pass if it’s hard to use. Most products that fail are due to friction. We cannot have any friction between the user and the product. It has to be easy to use, quick to deploy, and intuitive. In fact, the same principle applies for teachers who want something easy to manage and not something that they have to worry about.
What does our product need?
1. We need a way to scan a student’s ID to track who is leaving. We need to have these changes synced to the cloud so a teacher can view who is going where. We might also want other quality of life features, like a bathroom queue or a way to report issues with bathrooms.

🖥️ Understanding how the Technology Works

Barcode scanning
1. The barcode scanner is going to be our “window” to the outside world, letting the Raspberry PI (a microcontroller) “see” the student IDs
2. The scanner shines a light at an ID, capturing the reflected light back. Reflections are strong in white areas and weak in black ones. The analog signal received is converted into a digital one via an A/D converter.
Interface
1. The scanner interfaces with the RPI using the Universal Serial Bus protocol. A synchronization packet is first sent to sync the clocks on each hardware device. The binary data is then relayed to the controller.
Raspberry PI
1. This microcontroller reads the data and decodes it with a library. Most scanners use a standard decoding method, so off-the-shelf libraries work well. Some might not though, so keep this in mind.
2. The decoded data is the student ID.
Backend API connection
1. The data needs to be sent to the backend where the backend will verify the student and mark them for check-in/check-out. Everything is synced in the cloud.

➡️ Flowchart

🎨 Aesthetihawk

This writeup will focus on Aesthetihawk. Aesthetihawk is visual and function overhaul that aims to bring visual cohesion to the Java profile system and student toolkit and to improve user intractability and experience. The goal is to bring a sleek look to the profile page. Apart from looks, important key features will be more easily accessible and easier to control. This will bring a beautiful, seamless, and unified experience to nighthawk-coders.

📖 Contextualization

When developing a product, you need to ask some key questions first:

Who is this product for?
1. My audience is students because they will have access to their profiles and the student toolkit. Teachers will have access to the teacher toolkit, but the main focus will be for current and future students.
What is the product’s purpose?
1. The goal of my product is to make two extremely important tools, profile and toolkit, easy to use and just look better. Students should be able to understand the system with little to no prior instructions. This makes it easier for the teacher since they don’t have to explain much. It also makes it easy for students because it eliminates confusion and redundancy.
Why should we care about my product?
1. Students access these important tools all the time. For a student, anything to improve this experience will make their class life much easier and can improve overall happiness and efficiency. For a teacher, you won’t have to worry about students being confused with the old system. It’s my way of creating something you can “set and forget,” and something that will impact future generations/students.
What would my audience want?
1. My audience will want a frictionless experience. Many older folks joke that kids these days go “too fast,” or don’t have enough attention. While we can’t really change how students act, we can change the technologies they interface with to adapt to these needs. My audience wants something that is easy to you. It needs to work in a snap. It must be quick, visually appealing, and logical. This applies to both the UI and UX.
What does my product need?
1. My product doesn’t need specific hardware unlike the Bathroom Pass. Instead, it will need to be able to communicate with critical backend endpoints pertaining to user data. It should also ease the load on the backend. Let’s be honest here: most student-written backend code is a spaghetti mess. It’s a lot easier for me to create well-made code in JavaScript than it is to make a new API and contribute to noodle-code. For those reasons, all the data processing and validation is handled in JavaScript. The only thing that the backend receives is a neat little package of data. All the hard work is taken care of by Aesthetihawk which lessens the needs on the backend. After all, real products need balance, right?

🖥️ Understanding how the Technology Works

Liquid
1. Liquid, which most students don’t use, is the greatest thing invented for web development. I don’t like to repeat my code and nor does the next developer who will see it. Liquid lets me create modules and templates which I can drop in anywhere. For example, the student toolkit and the profile page have a navigation pane on the left-hand side. They share the same pane and the same code logic there. Without Liquid, I would have to write the code twice and any changes made on one page need to be pasted over. In fact, I had this problem which took several hours. That problem was the reason I switched to Liquid. There were others too, but that was the main one. Man-hours are important, and we shouldn’t waste them as laborers.
Backend API connection
1. Once again, most logic is handled with JavaScript. I needed to analyze how the API endpoints work. I also had to fix some of them like the profile picture endpoint, requiring changes in the backend and the frontend. Most importantly, I refactored and redid most of the JavaScript codebase because there were redundant functions and code which didn’t follow DRY principles.

➡️ Flowchart

📝 MCQ / FRQ Work

2015 MCQ

Q31:

Which of the following represents the board after this code segment is executed?

Why the question is wrong: Incorrect. This image would require the second set of nested loops to initialize row to val – 1, increment both row and col in each iteration inner loop (instead of row being decremented) and change the condition on the inner loop to col < 5 && row < 5. Essentially, I ran the code backwards and messed up the battens of the diagonals. I misunderstood how the X placement logic works within the nested loop. The loop positions X diagonally whenever the value is odd. It begins at (row = val, col = 0) and moves diagonally downward, ensuring it remains within the boundaries of the 5x5 grid. I accidentally selected an option that didn’t align with the expected diagonal pattern of X placements.

How to improve: As much as paper is discouraged in class, it will be important on the exam because it will help me to keep track of variables. I should trace through the loops and write down what is happening.

Q3:

What is printed as a result of executing the following code segment?

Why the question is wrong: Incorrect. References declared of the superclass type can be assigned objects of the subclass. Since there is a show method in the superclass a runtime error does not occur. With inheritance we are allowed to override a method from the superclass in the subclass. For some reason, I thought that the function would not be overloaded. I don’t know why I thought this, but that is not what happens. I thought you needed a key like @Override or something similar, but it works normally without anything too.

How to improve: I should go to previous lessons on classes to remember the topics. It has been a while since I reviewed those topics, so it makes sense that I may have forgotten them.

Q1:

Which of the following can be used to replace / condition / so that numDivisors will work as intended?

Why the question is wrong: Incorrect. This would be the correct solution if we wanted to know if k was evenly divisible by inputVal. I wasn’t paying attention and flipped the variables, but that is not what the function is looking for.

How to improve: One thing I noticed was that College Board uses vaguely named variables and function names with no comments. In real life, you don’t do that. However, we just have to deal with that here. I think that may be why I wasn’t paying attention and flipped the variables. Instead, I should try inputting a test value and write down the result to see which answer is correct.

2015 FRQ

Rubric Grade

Description	Pts	Done?
Used the correct class, constructor, and method headers	1	✔️
Declared private instance variable	1	✔️
Initialized the instance variable properly in the constructor	1	✔️
Implemented getHint method:
Looped through all letters in both guess and hiddenWord without index errors.	1	✔️
Implemented getHint method >> Processed each letter correctly:
Extracted and compared letters from guess and hiddenWord	1	✔️
Checked if letters were in the same position	1	✔️
Checked if letters were in the word but in the wrong spot	1	✔️
Added the correct character (letter, +, or *) to the hint	1	✔️
Constructed and returned the hint string	1	✔️

public class HiddenWord {

    private final String word;

    public HiddenWord(String word) {

        this.word = word;
    }

    public String getHint(String guess) {

        StringBuilder hint = new StringBuilder();

        int[] letterFrequencies = new int[26];

        // Count occurrences of letters in hidden word

        for (char c: word.toCharArray()) {

            letterFrequencies[c - 'A']++;
        }

        // First pass: Identify exact matches

        for (int i = 0; i & lt; word.length(); i++) {
            if (guess.charAt(i) == word.charAt(i)) {

                hint.append(guess.charAt(i));

                letterFrequencies[guess.charAt(i) - 'A']--;
            } else {

                hint.append('.');
            }
        }

        // Second pass: Identify misplaced letters

        for (int i = 0; i & lt; word.length(); i++) {
            if (hint.charAt(i) == '.') {

                char guessChar = guess.charAt(i);

                if (letterFrequencies[guessChar - 'A'] > 0) {

                    hint.setCharAt(i, '+');

                    letterFrequencies[guessChar - 'A']--;
                } else {

                    hint.setCharAt(i, '*');
                }
            }
        }



        return hint.toString();
    }

    public static void main(String[] args) {

        HiddenWord puzzle = new HiddenWord("HARPS");

        System.out.println(puzzle.getHint("AAAAA")); // Expected Output: "*A+++"

        System.out.println(puzzle.getHint("HARPS")); // Expected Output: "HARPS"

        System.out.println(puzzle.getHint("SHARP")); // Expected Output: "+HARP"
    }
}

🔁 Recap

🎯 5 Major Points

Aesthetihawk Enhancements: Refining JavaScript code, updating backend endpoints, standardizing the toolkit/profile UI, and leveraging Liquid for modular templates.
Digital Bathroom Pass: Implementing a barcode scanning system, improving user authentication, and integrating hardware with software for seamless pass management.
Recursion Lesson Development: Crafting an engaging lesson on recursion with interactive content, visual aids, and clear step-by-step explanations including merge sort.
Full Stack Feature Demo: Demonstrating complete front-to-back integration—from fetching and encoding images in base64 to updating database schemas and reflecting changes in the UI.
Exam Analysis & Product Management Insights: Reviewing MCQ/FRQ exam work with code analysis and improvements, and drawing parallels with real-world project management practices.

📦 Summary

In this presentation, I’ve walked through the 12-week journey of working on multiple projects that merged technical innovation with hands-on teaching and product management. I’ve highlighted how I refined the Aesthetihawk system, improving both user interfaces and backend connections. Additionally, I developed a digital bathroom pass that integrates barcode scanning with secure authentication. I also created an engaging recursion lesson designed to simplify a complex concept, and demonstrated a full-stack feature that efficiently manages user images from frontend to database. Lastly, I shared the insights I gained from analyzing exam questions, which reflect real-world product management practices and the continuous evolution of my coding skills.

Final Exam: Trimester 2 Retrospective

📋 5 for 12; Five things I did for the past twelve weeks

5 things you did over 12 weeks, Issues, personal blog

🔥 Burndown List

Aesthetihawk

Update the endpoint code so that it connects to the backend properly. Some endpoints were not working.
Standardize the formats between the toolkit and profile pages on Aesthetihawk for cohesion
Overhaul how you view and update your user information. I did this by taking inspiration from existing companies and reading up on their design guidelines and analysis portfolios. You shouldn’t reinvent the wheel if it’s already rolling.
Colors, animations, and spacing are meaningful. Nothing exists without a purpose.
LIQUID!!! All my pages use Liquid. Everyone really underestimates the power of Liquid. It’s so easy to define things once and have an adaptive template without repeating code a million times.
Each window uses a modal which is adaptive. A lot of code is rewritten several times because there are small differences. However, they still follow the same general format. I want to adapt DRY (Don’t Repeat Yourself) principles when coding.
All toolkits shouldn’t show if you are not logged in so you are forced to authenticate before using a tool. This is better for security and prevents malicious users from spamming or abusing systems which don’t require authentication. For example, someone could abuse SAGAI and waste API credits.
Work with Dylan on the backend’s frontend to unify aesthetics between frontend and backend (at Mr. Mortensen’s request).

Bathroom

User authentication for bathroom works. User authentication works for email AND for student ID. I did this by using a regex to handle different cases.
Users can create an account. Previously, you had to be logged in to create an account. I changed this so that anyone can create an account since it doesn’t make sense to have to log in to make an account.
User data, such as where they are, their queue status, and more is handled in the DB.
Barcode scanner is connected to local code on the RPI which handles scanning requests. You can SSH into the RPI to upload local code. Serial bus protocol can be used to transfer data. The whole process should work locally with the only connection to the “outside world” being a connection to the internet/backend.

📺 Lesson and Presentation

Recursion lesson planning

Watch every video and create a write up. Each section includes a list of key concepts and skills.
Create interactive content for students. We made popcorn hacks and homework. However, we also showed recursive code and went through each step individually. We also gave the code to the students and encouraged them to run the code step-by-step.
Recursion is difficult. We added many images to give visuals to students to explain the concepts.
Produce videos for the lesson. All of us created presentations for our respective section. Because I was doing merge sort, I made a presentation on how it works. I included many animations and colors to make the topic easy.
Grade all of the homework assignments. We were a team of three, so I graded a third of the homework assignments. I made the grading easy by putting in formulas in each cell so that all we had to do was input the scores and everything was auto graded.

📊 Analytics

🖥️ Full Stack Feature Demo

Step 1: Send a GET request to the backend to fetch a user’s image. The image is encoded in a base64 string and is validated and decoded upon arrival.

📃 Summary

File payload handling
- Converting files to base64 and encoding the header within
Database schema updates
- Changes are persistent and instant (can depend on server load though)
Changes reflected visually
- Updated profile picture upon reload

🗣️ N@TM Feedback

“Adding photos of students!”
- Developer response: this feature is actually implemented! Students can upload their own profile picture if they want to. We won’t force people to upload a photo nor will we force them to upload a photo of themselves though. This is due to privacy reasons as well as the fact that students may want a different profile picture.
“UX responsiveness and optimization?”
- Developer response: Aesthetihawk has had changes made due to responsiveness issues. In fact, this issue was first pointed out by Aadit in the pre-beta testing. Since my computer has a large screen, I didn’t notice! Most of these issues should be fixed by now though.
“Have images that don’t clash on the student toolkit.”
- Developer response: We actually have a solution for this! With Mr. Mortensen’s approval, we would like to host a contest to redesign the toolkit logos! Currently, the logos are a placeholder which is why they don’t look good.
“Add a teacher admin hub”
- Developer response: We are currently working on this! However, due to time constraints, we chose to focus more on features that would benefit students primarily for the fact that many more students access these features a lot more.
“Have an accessibility color scheme”
- Developer response: that’s a great idea! We might implement accessibility settings in the near future. However, this is a lot more difficult than it seems because such changes need to be made across the ENTIRE site and over every web page. We would also need to research accessibility guidelines scientifically. Great future idea!
“People who don’t have a profile picture look a bit odd”
- Developer response: actually, we have a default profile picture which should display if you’re logged in but didn’t upload an image. Unfortunately, we think someone may have bricked this feature since it was working in the pre-beta testing. We will sort this out in the future and fix it though.

📸 N@TM Pictures

✍️ Key Feature Blog Writeup

🧠 Déjà Vu

The planning and writeup process below might sound familiar. That’s because this process is what is actively used at Qualcomm!

As described by product manager job listings, a scrum master would need to:

Execute project plans with scheduling, resource forecasting, and stakeholder identification.
Scope and prioritization of deliverables
Ensure project objectives are met, present the vision to management, and gain stakeholder buy-in
Identify team skills, create project teams, and schedule task assignments.
Communicate with stakeholders to establish needs and goals.
Manage project performance (timeliness, quality, scope, complexity)
Secure project compliance
Facilitate collaboration

What I wrote was no coincidence! I looked on LinkedIn for posts and job offerings related to a Qualcomm product manager and formatted my write-up just like how you would in a real job!

🤔 What is covered?

I worked on two projects/features: bathroom pass and Aesthetihawk. Bathroom pass was more in the first ⅔ of the trimester with Aesthetihawk taking the focus in the last ⅓.

🎫 Bathroom Pass

This writeup will focus on how to handle authentication using the scanner and the interplay between hardware and software, something commonly seen in the real world (ex: Qualcomm or Apple).

📖 Contextualization

When developing a product, you need to ask some key questions first:

Who is this product for?
1. You cannot develop a product without knowing who it’s for. Almost every product you see was developed for a specific purpose and audience. In our case, our product is for students AND teachers.
What is the product’s purpose?
1. The goal of our product is to let students use a digital bathroom pass. For teachers, they should be able to manage their students and see if someone is using the bathroom for a suspiciously large amount of time.
Why should you care about our product?
1. Physical bathroom passes suck. They waste resources and are often tampered with. They may be lost, destroyed, or can get dirty (trust me; you don’t want to shine a blacklight on one of those things). Digital bathroom passes solve this. Furthermore, they are tamper proof. You can’t abuse the pass as easily, and your usage is tracked so you can’t cheat the system or lie to your teacher.
What would our audience want?
1. Teachers hate when students bring their phones to the bathroom. A digital bathroom pass may seem like the antithesis of that. However, we want to implement a system that lets students scan their school-issued IDs to authenticate without having to take their phone with them.
2. Students won’t use the pass if it’s hard to use. Most products that fail are due to friction. We cannot have any friction between the user and the product. It has to be easy to use, quick to deploy, and intuitive. In fact, the same principle applies for teachers who want something easy to manage and not something that they have to worry about.
What does our product need?
1. We need a way to scan a student’s ID to track who is leaving. We need to have these changes synced to the cloud so a teacher can view who is going where. We might also want other quality of life features, like a bathroom queue or a way to report issues with bathrooms.

🖥️ Understanding how the Technology Works

Barcode scanning
1. The barcode scanner is going to be our “window” to the outside world, letting the Raspberry PI (a microcontroller) “see” the student IDs
2. The scanner shines a light at an ID, capturing the reflected light back. Reflections are strong in white areas and weak in black ones. The analog signal received is converted into a digital one via an A/D converter.
Interface
1. The scanner interfaces with the RPI using the Universal Serial Bus protocol. A synchronization packet is first sent to sync the clocks on each hardware device. The binary data is then relayed to the controller.
Raspberry PI
1. This microcontroller reads the data and decodes it with a library. Most scanners use a standard decoding method, so off-the-shelf libraries work well. Some might not though, so keep this in mind.
2. The decoded data is the student ID.
Backend API connection
1. The data needs to be sent to the backend where the backend will verify the student and mark them for check-in/check-out. Everything is synced in the cloud.

➡️ Flowchart

🎨 Aesthetihawk

📖 Contextualization

When developing a product, you need to ask some key questions first:

Who is this product for?
1. My audience is students because they will have access to their profiles and the student toolkit. Teachers will have access to the teacher toolkit, but the main focus will be for current and future students.
What is the product’s purpose?
1. The goal of my product is to make two extremely important tools, profile and toolkit, easy to use and just look better. Students should be able to understand the system with little to no prior instructions. This makes it easier for the teacher since they don’t have to explain much. It also makes it easy for students because it eliminates confusion and redundancy.
Why should we care about my product?
1. Students access these important tools all the time. For a student, anything to improve this experience will make their class life much easier and can improve overall happiness and efficiency. For a teacher, you won’t have to worry about students being confused with the old system. It’s my way of creating something you can “set and forget,” and something that will impact future generations/students.
What would my audience want?
1. My audience will want a frictionless experience. Many older folks joke that kids these days go “too fast,” or don’t have enough attention. While we can’t really change how students act, we can change the technologies they interface with to adapt to these needs. My audience wants something that is easy to you. It needs to work in a snap. It must be quick, visually appealing, and logical. This applies to both the UI and UX.
What does my product need?
1. My product doesn’t need specific hardware unlike the Bathroom Pass. Instead, it will need to be able to communicate with critical backend endpoints pertaining to user data. It should also ease the load on the backend. Let’s be honest here: most student-written backend code is a spaghetti mess. It’s a lot easier for me to create well-made code in JavaScript than it is to make a new API and contribute to noodle-code. For those reasons, all the data processing and validation is handled in JavaScript. The only thing that the backend receives is a neat little package of data. All the hard work is taken care of by Aesthetihawk which lessens the needs on the backend. After all, real products need balance, right?

🖥️ Understanding how the Technology Works

Liquid
1. Liquid, which most students don’t use, is the greatest thing invented for web development. I don’t like to repeat my code and nor does the next developer who will see it. Liquid lets me create modules and templates which I can drop in anywhere. For example, the student toolkit and the profile page have a navigation pane on the left-hand side. They share the same pane and the same code logic there. Without Liquid, I would have to write the code twice and any changes made on one page need to be pasted over. In fact, I had this problem which took several hours. That problem was the reason I switched to Liquid. There were others too, but that was the main one. Man-hours are important, and we shouldn’t waste them as laborers.
Backend API connection
1. Once again, most logic is handled with JavaScript. I needed to analyze how the API endpoints work. I also had to fix some of them like the profile picture endpoint, requiring changes in the backend and the frontend. Most importantly, I refactored and redid most of the JavaScript codebase because there were redundant functions and code which didn’t follow DRY principles.

➡️ Flowchart

📝 MCQ / FRQ Work

2015 MCQ

Q31:

Which of the following represents the board after this code segment is executed?

Q3:

What is printed as a result of executing the following code segment?

How to improve: I should go to previous lessons on classes to remember the topics. It has been a while since I reviewed those topics, so it makes sense that I may have forgotten them.

Q1:

Which of the following can be used to replace / condition / so that numDivisors will work as intended?

2015 FRQ

Rubric Grade

Description	Pts	Done?
Used the correct class, constructor, and method headers	1	✔️
Declared private instance variable	1	✔️
Initialized the instance variable properly in the constructor	1	✔️
Implemented getHint method:
Looped through all letters in both guess and hiddenWord without index errors.	1	✔️
Implemented getHint method >> Processed each letter correctly:
Extracted and compared letters from guess and hiddenWord	1	✔️
Checked if letters were in the same position	1	✔️
Checked if letters were in the word but in the wrong spot	1	✔️
Added the correct character (letter, +, or *) to the hint	1	✔️
Constructed and returned the hint string	1	✔️

public class HiddenWord {

    private final String word;

    public HiddenWord(String word) {

        this.word = word;
    }

    public String getHint(String guess) {

        StringBuilder hint = new StringBuilder();

        int[] letterFrequencies = new int[26];

        // Count occurrences of letters in hidden word

        for (char c: word.toCharArray()) {

            letterFrequencies[c - 'A']++;
        }

        // First pass: Identify exact matches

        for (int i = 0; i & lt; word.length(); i++) {
            if (guess.charAt(i) == word.charAt(i)) {

                hint.append(guess.charAt(i));

                letterFrequencies[guess.charAt(i) - 'A']--;
            } else {

                hint.append('.');
            }
        }

        // Second pass: Identify misplaced letters

        for (int i = 0; i & lt; word.length(); i++) {
            if (hint.charAt(i) == '.') {

                char guessChar = guess.charAt(i);

                if (letterFrequencies[guessChar - 'A'] > 0) {

                    hint.setCharAt(i, '+');

                    letterFrequencies[guessChar - 'A']--;
                } else {

                    hint.setCharAt(i, '*');
                }
            }
        }



        return hint.toString();
    }

    public static void main(String[] args) {

        HiddenWord puzzle = new HiddenWord("HARPS");

        System.out.println(puzzle.getHint("AAAAA")); // Expected Output: "*A+++"

        System.out.println(puzzle.getHint("HARPS")); // Expected Output: "HARPS"

        System.out.println(puzzle.getHint("SHARP")); // Expected Output: "+HARP"
    }
}

🔁 Recap

🎯 5 Major Points

Aesthetihawk Enhancements: Refining JavaScript code, updating backend endpoints, standardizing the toolkit/profile UI, and leveraging Liquid for modular templates.
Digital Bathroom Pass: Implementing a barcode scanning system, improving user authentication, and integrating hardware with software for seamless pass management.
Recursion Lesson Development: Crafting an engaging lesson on recursion with interactive content, visual aids, and clear step-by-step explanations including merge sort.
Full Stack Feature Demo: Demonstrating complete front-to-back integration—from fetching and encoding images in base64 to updating database schemas and reflecting changes in the UI.
Exam Analysis & Product Management Insights: Reviewing MCQ/FRQ exam work with code analysis and improvements, and drawing parallels with real-world project management practices.

📦 Summary

🎓 Self-Grade

📌 Main

Subject	Possible Points	My Points	My Reflection
5 Things Over 12 Weeks	5	4.51	All my analytics are documented. My PR’s have descriptive explanations of what is happening.
Full Stack Feature Demo	2	1.79	My feature was comprehensively documented and I talked about it well. Although I could have more java, I also got a lot of feedback from N@TM and I liked many of the ideas suggested. I think my explanation was well thought out.
Key Feature Blog & Visualization	1	1	I had extensive draw IO diagrams and an extensive knowledge of product management. As important as coding is, this will be better in the future. I developed extremely detailed diagrams both for Aesthetihawk and Bathroom pass. I also developed a roadmap for Mr. Mortensen to understand the Aesthetihawk timeline since the project might seem vague.
FRQ/MCQ	1	1	I did all of the FRQ’s and MCQ’s and did a good reflection on them. I am very proud of my MCQ score since I did much better than I thought!
The Tenth Point ✨	1	0.96	I don’t think any other student would have gone on LinkedIn to analyze what major companies, like Qualcomm, do for project presentations. That is something I did. I also reflect on what I want to do in the future (most of this is verbal though because I feel it is better since it’s more dynamic).
Total	10	9.26	I think I made really good progress on my projects and carried them out in an elegant and efficient manner. I did most of what was required (we can’t be perfect and we make mistakes; that’s what learning is for!).

🤝 Collaboration Reflection

Subject	Possible Points	My Points	My Reflection
Team Collaboration	3	2.58	I think I could've done a lot better here. I had excellent communication at the start of the bathroom project, but that started to diminish a little once I started my shift towards Aesthetihawk.
Communication & Feedback	2	1.91	I talked to Mr. Mortensen a lot on what Aesthetihawk should be. I showed him my roadmaps, drawIO diagrams, and what the interface will turn out (which I got approval for). I also showed my project to many other students and got valuable feedback, especially from Aadit.
Time Management & Reliability	2	1.94	My part of the bathroom project was completed on time and worked well. A similar statement can be said for Aesthetihawk with pretty much everything being complete and done. In fact, my philosophy was to completely finish Aesthetihawk before merging so create a clean merge with little issues. Although I did have to squash bugs, it was super minimal and everything works reliably. However, just for safety measures, I did add a “Beta” tag to the features so people are aware and can send feedback.
Total	7	6.43	I feel that I showed strong collaboration and leadership skills and that I did good with most of my soft skills. However, I could’ve worked with my team to a greater extent (although we did have decent communication over Discord).