[ARCHIVED] Assignment 2 - Multimedia Compendium

[periode]

Translate your invisible story to a React application, using multiple components. In the process, add more content by including different kinds of media (video, audio).

Skills

• Learn how to use React
• Work with multimedia assets to contribute to a coherent whole
• Research on a topic and communicate it to a wide audience in an interactive format

Submission

• Upload a .zip file containing all of your HTML CSS, JS, but without the node_modules folder. (Using GitHub's upload, or a Google Drive link)
• Include at least 2 screenshots of the website.
• Write a short summary of the project: what did you intend to do? How well do you consider you managed? What would you continue to work on, if you had more time?

[Caythian]

https://drive.google.com/drive/folders/1GRo-uz37daZA01Lqrg8CTA-x2JwecP-1?usp=sharing
In this exercise, I converted an HTML website into a React app, transforming repeatable parts into components for later use on the page. This process resulted in a pleasing, clean layout which is very satisfying. Also, I noticed improvement in my coding skills, making fewer typos and becoming more familiar with keyboard shortcuts. I encountered challenges with Routing during the process, as one route would often stack directly after another, leading to incorrect paths. While the solutions provided by the online coding community seemed complex and didn't resolve my issue, my professor pointed out that it was a simple formatting problem. Even though I didn't find a direct solution online, the search was still a valuable learning experience.

[periode]

Grade: 100 (A)

Nice job translating the app to React!

[karldib]

https://drive.google.com/drive/folders/1eOOaZsf_WPkaZMH0tUz9lXYruRVC8cJa?usp=sharing
In this assignment I translated my HTML website into react app format. I was able to use the same css I used for my first website and I added multimedia components (youtube video). I had a lot of trouble creating links through the images to go to separate pages with more images in categories so I decided to pick the most relevant images and put them all in one page. I then uploaded a video of a night in Lebanon that meant a lot to me to youtube and embedded the video to integrate it into my website. This project is really meaningful to me, and is hitting especially deep with the unstable current situation in Lebanon, where all my family and closest friends still live. I am happy with my final result, and even though it was not easy, I still learnt a lot of the react logic and process while doing this assignment.

[periode]

Grade: 95 (A-)

Good job translating the app to React. It would have been nice to include some of the feedback from the last assignment, as well as to add some links to allow for navigation on the website.

[RobbinHezhengWu]

https://drive.google.com/drive/folders/1KyQ6qzZ-URwSnGk8Y_4EaG7yKIrP-vCY?usp=sharing

I continued the discussion on shamans on this exercise.

1. I've arranged the original pages in a more regular format, with all the fonts and images sized to fit perfectly on a variety of screen sizes and proportions.
2. I added a YouTube video and an MP3 file to the page to enrich its content.
3. I fixed the problem in the previous exercise where the hyperlinks were going to the wrong place when clicked, by creating a blank div in front of each section and connecting the link above it to it, to make sure the jumps are in the right place.

In addition to this, I realized that I may need to add more description to the design of the page with the Van Gogh images, but I didn't add it to the texts of the page because it's just a decorative image. Hopefully I will have a chance to explain to you in person why these images are deisgen the way they are.

If I had more time, I think I would try to add the responsive image finding method from the last exercise, but I still haven't found a suitable way to accomplish this.

[periode]

Grade: 100 (A)

Great job translating the app to React!

[Ambraaaliu]

https://github.com/Ambraaaliu/AugmentingGallery/tree/main/ambra-app%E6%8B%B7%E8%B2%9D
https://drive.google.com/file/d/1A6ARJYc3xcA8NqcbOXufAiWLJfRmllln/view?usp=sharing
In this assignment, I transferred the late assignment into the React layout. The design and the web elements set translation are not too hard, but I failed in transferring the javascript background though I spent 5 hours on it. I changed the p5.js code to adapt the React but it doesn't work and it doesn't show on the main page. I think there may be some problems with this and the main JS page.

Also, I try to add the autoplay and loop effect in audio and hide the loge but it seems different with normal HTML and CSS. It may need a js in the return part. If I have more time, I will keep dealing with this.

I can find it's more convenient and manageable than using normal HTML to do web design.

[periode]

Grade: 100 (A)

Good job on translating the app to React, and it's unfortunate you did not manage to translate the p5 sketch as well. We can take a look during office hours to see how we can use the react Wrapper for p5!

[lizalmonds]

In this assignment I attempted to translate the original HTML website into React. It was a steep learning curve for me as the concept of components kept confusing me. What I had trouble with was customizing the fonts and transforming the different elements onto the page. I wasn't sure what exactly was causing the issue (I would input certain commands and it wouldn't work), so I resolved to use the transform function. I was at least able to input the overall structure of the website. If I had more time I would have resolved the font issue, input sound effects, as well as styled the website a bit more. overall, I'm glad I was able to input a hovering function.

https://drive.google.com/drive/folders/1qfg3cIwoJ7WlxxJy6BfRLFIMiZfQTAmm?usp=sharing

[periode]

Grade: 95 (A-)

Good job on translating the app to React! It's just missing some multimedia elements (sound/video/pictures) to make it a bit more compelling!

[alkashiwag]

For this website I intended to improve the design and capabilities since the original version. This time there is more visual elements and less text for visitors to read. Overall I think there are big improvements. If I had more time I would try and include multiple pages of the website instead of one long page.
https://drive.google.com/file/d/1Jd5IyzsXS8zK3zFY9dn7GjSKiBc-oWqw/view?usp=drive_link

[periode]

Grade: 100 (A)

Good job translating the app to React. One design point would be to tune down the shadow on the text, since it makes it quite hard to read (you can keep it for the headings, though).

[jacksonkkingg]

I had an extremely difficult time creating my website, because life presented itself and my computer broke! That being said, I still coded the website, but I wasn't able to run it. Because of this, I would say it definitely looks a little rough around the edges. When I finally had access to a computer that was able to run my website, it wasn't working-- a white screen would pop up. Soon I found out that is because I didn't have the node-modules folder installed, so I would have to go into terminal and run 'sudo npm install' while I was in my react-app folder. Luckily, I was able to fix it, but because of my troubles I wasn't able to do as much as I wanted to. I wasn't able to change my fonts, or mess with the react-router; to do so, I would have to camp out in St. Agnes! I have uploaded a screen recording rather than two screenshots to my google drive folder that I am linking below.

https://drive.google.com/drive/folders/1ry-3E3e9WZxe0i2oifP6XIQpPJjdBF-Z?usp=sharing

[periode]

Grade: 100 (A)

Sorry to hear about the computer, but great job on the translation to React!

[bhornik]

https://drive.google.com/drive/folders/1ACJv95Q05tovYAdMg7R6GeIKLT94clK6?usp=share_link

I inteded to recreate my previous website exactly as I had turned it in last time. I failed to do this, and for this version had to remove pretty much all of its funcitonality and design. I was unable to recreate the same CSS or properly create links, so this is essentially the bare bones version. If i were to continue to work on this, which I defintely will, I need to figure out these two major flaws: incorporating my previous CSS as well as creating links in order to navigate mulptiple pages within the site.

[periode]

Grade: 95 (A-)

Good job on translating the app to React, but it's unfortunate that you had to give up the navigation and the multimedia content (even external links to youtube could have worked!)

[zbyiii]

https://drive.google.com/drive/folders/1Y2Gd6Y_cZOC3kDNQbrejCdb2vBojC7aV?usp=drive_link

In this project, I continued on the representation of nushu, the secret language exclusively used by women in JIangyong County, Hunan province, China. I included a brief introduction of nushu, the historical origins of nushu, and a selection of works written in nushu.

I found limited resources when conducting the research, mainly due to the scarcity of historical documentation and the contemporary dwindling of Nushu usage. Given more time, I would expand upon the current situation and preservation efforts. Additionally, I would learn some of the characters and try to create original works in this intriguing script.

[periode]

Grade: 100 (A+)

Great job on taking into account the feedback during your translation to React!

[chaerin-d]

Link to project: http://localhost:3001/

For this project, I added a home button, which gives access to people by just clicking the header "SSAM" to go to the main page, I got a comment about having clear division for the illustrations, so I made an individual box for each illustration. One of the most entertaining parts that several people commented about was the mini-game(screenshot), I thought if I added music while people were playing, it would be more entertaining, so I decided to use music that I created and added from SoundCloud. I tried to practice using "react" so I used insert {} and replaced the image which is a benefit that I can make a guideline, which wasn't available in HTML.
I hope I can have more interaction with the user like vegetables pop up as AR effect through their phone as I continue to learn about UI/UX Design.

*Screen recording and all the files are in Google Drive.
https://drive.google.com/drive/folders/1wkV8H5kQIqe0fafJXKvmiThJRet2vYaL?usp=sharing

[periode]

Grade: 100 (A)

The translated website looks great, and the embed from soundcloud is a very nice touch.