Development History

Final week:

Author: Christopher Le

• We made itttt!
• Presentation date
• Code was added with doc strings
• AI Dall-E image generation was added. Enjoy!!
• We also added Steve on the front-page so that people can play with him when visiting our site. Have funs! !

(https://hackmd.io/_uploads/BJGRdqpH3.png)

Week 14:

Author: Nhi After much struggle, Nhi has had a working setting menu for the slideshow which gives the host the ability to manipulate slide add-ons. This settingModal will feed all states into /slideshow route and adjust the slide content accordingly.

Going forward, Nhi will continue to improve the front-end, clean up any redundant and make everything consistent.

Week 13:

Author: Mahlet Amare

• Mahlet did her parts on About and Contact me.

Week 12:

Author: Anh Au These two weeks we worked on improving functionality with some added features.

Nhi finally has a working slideshow with some customs. There was certain difficulties when using immature library (ie. react-responsive-carousel library) as the documentation is not very thorough and customization is limited. But we found ways to go around that issues :) The next step is providing the host the ability to modify the slideshow: toggle autoplay, infinite looping; time duration of each slide; whether to include art title, description, contributor,... But for now, a slide with full information looks like this:

Week 11:

• Chris finally managed to fully move from Firebase Storage to FireStore. Now, everything is updated in real-time.

There was a bug that caused infinity onSnapShot loop. It was fixed with calling unsub function.

• We figured that it was not supported to fetch image url on react three. Another workaround was to change the background and keep the images static.

Week 10:

Sprinting towards Sprint 2, we target to bring back a functional Slideshow which used to work but did not display images in full-screen. For the old version of Slideshow, we use LightGallery library but it provides little customizations so we have been looking for alternatives. For Sprint 2 demo, we're using react-responsive-carousel as it gives us more control over our "slides", i.d autoplay, infinitely looping, callbak handles... Still, the slides are only "100% full viewport" instead of "100% screen size", which is a problem we still need to address.

Mahlet and Nhi build functions that allow the host to have customizations when creating a room as well as editing right. Chris migrated our services from Firebase Storage to Firebase FireStore to facilitate the realtime update function of our rooms.

Quin is working on the 3D components and learning how to use Three.js in React via react-three-fiber library as we intend to build a virtual 3D gallery.

Now that we have the core functionalities for Vicky's use case, we have been doing some research on what other features we might be interested in building. We also improve the front-end and clean up our codebase a little along the way.

Week 9:

Author: Christopher Le

• Added comment box but later deleted it since this is not a social app.

Week 7, 8:

Author: Nhi Hoang

• This 2 weeks we focused on improving the front-end CSS.
• Mahlet and Chris added a functions to have private and public rooms. Private rooms won't be found unless you know the passcode.

Weel 6:

Author: Mahlet Amare

• Anh experimented with 3D figure and tried to work on react fiber three
• Mahelt worked on developing the contact page.
• Nhi updated the create room with more modal CSS

Week 5:

Author: Christopher Le

• Added more information in the photos (metadata)

  • imageStamp
  • Host information
  • imageUrl

• Started to move to FireStore to have real-time updates when new photos are uploaded

Week 4:

Author: Anh Au

• Added host history. With host history, the host can see the list of rooms they created and join easily.

Week 3:

Author: Nhi Hoang Nhi took a step up with the front-end. She helped redesigned the front-page, add more CSS in the waiting room.

Mar 9, 2023

• Added share component which led to QR code and passcode.
• Added comment section (comment section only appears when there are pictures).

Week 2:

Author: Mahlet Amare

We made a big jump in the back-end. Most basic functions like upload to Firebase storage was done or login with Google was done. Hurrah.

Mar 8, 2023

• Fixed mapping index issue

Challenge: the caption and image are not correctly mapped. Solution: Remove index, use uuid as key in the HTML tag.

• Added back to previous screen button
• Moved input to the center for better view on phone.

Mar 7, 2023

• Fixed infinite UseEffect issue:

Challenge: without useEffect, new data from RealTimeDB and Firease Storage will not be fully updated. However, with roomData inside [], it occurs infinite loop. Solution: Wrap everything in onValue(roomRef, (snapshot) => { // content }

• Added delete photo and room function.
• Made the gallery an Art Board component
• Added Host room history.
• Added art caption, and description.
• Added slideshow with LightGallery [no longer used].

Mar 4, 2023

• Styled dashboard.

Mar 2, 2023

• Added Page not found (404).
• Added protected URLs so that unauthenticated users cannot access dashboard.
• Added QR Code to page (react-qr-code).
• Styled login page.

Mar 1, 2023

• Added Page not found (404).
• Security: Added protected URLs so that unauthenticated users cannot access dashboard.
• Added QR Code to page (react-qr-code) so that you can share the room easier.
• Merged new front-end interface for the landing page.

Week 1:

Author: Christopher Le

Hey guys,

We just decided to work with Dr. Vickie Phipps (our sweet art professor) to help her create art show easily.

Why: The problem was that manytimes when she created an digital art show, people had to do a lot of authentication. And then Dr. Phipps had to download photos from email and put it on the site. It was a hastle. And we gonna change that.

How: We are gonna use Firebase to make a quick prototype. The idea is to create a website that let people upload their photos without login (of course, you need a passcode for security).

Feb 28, 2023

• Added upload picture function (Firebase Storage).
• Added join room function (Firebase Storage + RealTime DB).
• Added GPS (react-geolocated).

Feb 24, 2023

• Added random code generator for passcode feature.
• Added "login with Google" function.
• Handled slow Firebase API calls with Promise, caching, and loading screen.

Feb 23, 2023

• GitHub repo created.
• Created React application with Firebase and Routes (react-router-dom) for navigation.
• React hooks were applied.