Key Involvements in Group Project

As our final project, me and my team decided to create a geoguesser inspired game of Del Norte. Once you get to the website, you would have to press the start button in order to get to the game where you would be shown an image of a classroom or other part of our school and you would have to click on the Del Norte map where you think the location is. If you get it right you get one point, if wrong you get zero points. In this project I had many key involvements.

Frontend

Engaging in frontend development and collaborating closely with my teammates has been a profoundly enriching experience that has allowed me to witness the power of effective teamwork. As a member of the frontend development team, my primary focus was on crafting user interfaces that seamlessly combined functionality and aesthetics. I actively participated in design discussions, providing valuable insights and ideas to enhance the user experience. My contributions extended beyond individual coding tasks; I embraced collaboration by engaging in regular code reviews, offering constructive feedback, and incorporating suggestions from my peers. This collaborative atmosphere not only accelerated the development process but also cultivated a sense of shared ownership and pride in our work. We navigated through challenges together, brainstorming innovative solutions and learning from one another in the process. Through this journey, I came to appreciate the strength that diversity of thought brings to a team, as each teammate brought their unique skills and perspectives to the table. Our collective efforts resulted in the successful delivery of a frontend that not only met but exceeded expectations, highlighting the significance of teamwork in achieving outstanding outcomes in the realm of frontend development.

Backend

In collaborating with backend developers to test an API, I found the experience both rewarding and enlightening. Working closely with the development team, I played a pivotal role in ensuring the reliability and functionality of the API. Our collaboration involved creating and executing comprehensive test cases, scrutinizing various endpoints, and validating data integrity. Through this process, I gained a deeper understanding of the intricacies of the API and its interactions with different components. The close communication with backend developers allowed for a seamless exchange of insights and prompt issue resolution. This hands-on involvement not only sharpened my testing skills but also fostered a sense of teamwork and shared responsibility. As we collectively navigated through potential challenges, I realized the significance of a collaborative approach in delivering a robust and efficient API. This experience underscored the importance of effective communication and mutual understanding between testing and development teams, ultimately contributing to the overall success of the project.

Key commits

First Map Design The first ever draft of what our game would look like and would eventually be the design we go with for our final project.

First Coordinate Implementation This would be the first coordinate system made of javascript so that we can scale the image properly and be able to but the buttons in more precise locations

Random Button Positions I added a change to our code that would store where the button last appeared and made sure that the user would not get the same location twice in a row

First Output of Map At first our frontend was only running code on external websites and code testers and this was the first time me and my teammates implemented it so that it would actually work on a local host and on our server.

Issue

Double Message Pop-Up Very inconvenient porblem in our game that lowered user experience, however the fix was very simple and eneded up being an important part of improving quality of our game

Important code to remember

This is an important piece of code that I have highlighted so that I can look back at this review and find more easily

function getMessage() {
            const apiUrl = "https://teaminfluencerinnovator.stu.nighthawkcodingsociety.com/api/locations/";

            fetch(apiUrl, {
                method: "GET"
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                var tempstring = "";
                data.forEach(location => {
                    const { location_name, image } = location;

                    const img = new Image();
                    img.onload = () => {
                        imageContainer.appendChild(img);
                    };

                    try {
                        // Decode the base64 image data and create a data URL
                        const decodedImage = atob(image);
                        const dataURL = "data:image/png;base64," + decodedImage;
                        img.src = dataURL;

                        // Display the image within the image container
                        imageContainer.appendChild(img);
                    } catch (error) {
                        console.error("Error decoding image:", error);
                        // Log the input data to inspect it
                        console.log("Invalid base64 data:", image);
                    }

                    locationContainer.innerHTML += `<div>${location_name}</div>`;

                    const coordinates = location_name.match(/\(([^)]+)\)/);

                    if (coordinates && coordinates[1]) {
                        const coordinateVariable = coordinates[1];
                        console.log("Coordinates:", coordinateVariable);
                    }
                });
            })
            .catch(error => console.error("Error:", error));
        }

Night at the Museum Grading

Austins Group: Had a functional weather app was very unique didnt see any other projects like it, unfortunately they didnt get up their feature’s due to the backend crash so I cannot grade it It was made supposedly using a weather api that they called from and then utilizing it they were able to predict weather trend’s and then using a seperate api that they had built in thier fronted they were able to display the temperature actively.(3.8) because its very unique but isnt as hard to implement very cool to display Had a very nice UI and was definitely something I would be willing to use, especially if it worked with the 5 year prediction graph of weather 1/1 Overall I would give it a 4.8/5 I excluded key features because a lot of it wasnt working unfortunately due to the backend crash.

Hanlun’s Group: I thought it was very unique how they were able to get chess up and working specifically through Yeongsu Demo was relatively elegant. Unfortunately it was extremely laggy at the event but in class I was able to view it and it worked amazing so I would give it a 4/4. The Whisp chatting system was also very elegant with it looking like discord or similar and having a nice UI that I could see myself using. So overall I give it a 4/4. I would say the how it was made is also unique because its able to communicate move changes to aws via post requests and then using get requests displays the move on the other user’s side to make a functional chess game which I think is super unique. And the whisp I think its cool how they are able to edit the database by typing in a url which allows them to clear it allowing for a nice set of moderation etc. (4/4) I would say applicationally its a 0.8 because I dont think the whisp is good enough without some key features like user managament etc. But the chess game is very well developed and usable. Overall I would give it a 8.8/9

Advik’s Group: I thought the appeal was funny had a clear group they were attending to, made a nice hook with a breaking bad theme. I also thought the song finder concept was good although it didnt work because the server crashed and the breaking bad simulator was also pretty fun and hilarious to look at 4/4. I think the knowledge is also pretty cool with them housing a backend, that effectively communicated with their frontend for there music, which was unable to work but with there code you could see the get requests working effectively. So I would give it a 4/4. I think that the usability of it is where the project again lack’s because the UI is not done extremely well, which I think can be fixed with some more focus on frontend over features. However I do like that it does work so with some touchup it could be amazing. 0.7/1 I would give it in all a 8.7/9

Improvements that could be made

Although our prject turned out well, there were still improvements that we as a team could have done: One was collaboration during presentations. When we presentented our project and other assignments lots of times one person would be the main speaker and presenter when we should have got everyone to speak and contribute to the presentation. This is something that all of us should remember and carry on into the next rimester to ensure success and better learning. Another aspect of our project specifically that we should have done is to add more features that would make our game more aimed towrds a general audience instead of a specific group of people. Having a lerger target audience allows us to make code that is relevant and beneficial to everyone and allows us to make better code.

Psuedo Code

pic

# your code here
PROCEDURE movetoarea {
    #uses iteration to repeat the task multiple times
    REPEAT 2 TIMES {
        MOVE_FORWARD()
        #moves the traingle forward two times
    }
    
    ROTATE_RIGHT()
    # turns the traingle clockwise to the right one time
    #moves the traingle to the next location it needs to go in order to reach the destination
    REPEAT 4 TIMES {
        MOVE_FORWARD()
    }
    #turns the trangle one more time counterclockwise to the left a final time
    ROTATE_LEFT()
    #moves forward to the final destination
    REPEAT 2 TIMES{
        MOVE_FORWARD()
    }
}

College Board MCQ

Questions I Got Wrong

Question 8: Metadata About Photos I got thiquestion wrong because I misunderstood the data provided. I thought that the data would be able to provide the anme of the person that took the most recent photo however, it the data provided would not be able to. So the correct answer was the the data could only provide the particular geographic location and and the number of photos that were taken in the last year.

Question 24: Compression by replacing TH and IS with Characters I got this question wrong because I didn’t understand why Byte pair encoding is an example of lossless transformation. Specifically what lossless transformation is. Orginally, I my answer said that byte pair encoding is a lossless transformation because it could be used to transmit imformation securely but now I understand that it’s because the encoded string could be reverted back to the original form by replacing the symbols with TH or IS.

Question 25: Shortening string by replacing TH and IS I got this question wrong because I still didn’t understand that byte pair encoding is. Byte pair encoding is only possible when a pair of characters show up more than once. So the answer I chose (BANANA) was wrong because the character pair AN could be replaced with a symbol like “*” to shorten it. So my answer was wrong and the correct answer was LEVEL_UP because this word is not able to be shortened because a pair of character don’t repeat more than once.

Question 29: Diagram with Three Logic Gates I got this question wrong because I didn’t have a full understanding of how logic gates worked. I didn’t understand what type of output the AND and OR gates would produce. After some research on how Logic gates worked, I learned that the the correct answer is correct because the AND gate would produce false, and the first OR gate would also produce false. Because both the outputs in the second OR gate would be false, the circuit will have an output of false.

Question 64: Cloud Computing and the Internet I got one out of two of the correct answers for this question. The one I got wrong is wrong because cloud computing did not affect internet communication by eliminating the need to provide redundancy in Internet routing. Redundant routing provides false tolerance, which enables a cloud storage site to continue to operateif some part of the network fails. So this answer is wrong. The correct answer is correct because cloud computing sites must consider security concerns in order to protect their users’ private data. So cloud computing has affected Internet communication because cloud computing has introduced new data security concerns.