WebPix - Project 2 Connections Lab

Key Concept & Intentions

Originally we were thinking about making a photosharing app like instagram with comments and all that but we quickly realized that without paying for render the workaround this would have been way longer and more challenging than we thought. We decided to tone our idea down and pivot to something more achievable which ended up being way cooler anyway. We went with a myspace tumblr early 2000s social media webbrowser aesthetic, basically full y2k nostalgia vibes the whole vibe was about recreating that raw early internet experience where everyone had wild customizable profiles and chatrooms. we wanted it to feel authentic to that era not just like modern design trying to look retro. After sharing our ideas with the class and discussing with Craig it was clear we wouldn't be able to achieve our original vision thus we pivoted to focusing on how we could deliver our concept without having all the features we previously imagined.

FRONTEND

Production Decisions

From the start we made clear guidelines on who's working on what. I asked Veyda if I can work frontend since I'm more comfortable with CSS and HTML. After that I shared the themes I'm wanting to incorporate in the styling of the website and Veyda seemed cool with it so I started cooking and went to town in the CSS.

5 themes included:

• Pink Blingy (Y2K girly pop aesthetic)

• Cartoon Gangster (Looney Tunes meets 90's rap vibes)

• Emo Skeleton (colorful emo)

• Goth Purple (dark myspace emo look)

• Rainbow Psychedelic (trippy maximalist doodles)

For the layout I went with two columns. Left side has user bio section and live chatroom called PixChat, right side is the photo gallery. I wanted this specific aesthetic where backgrounds work in layers so the main page has tiled repeating patterns but then each section has the theme background stretched out behind it. Ended up calling it a polaroid frame design.

One cool decision was using nostalgic emoticons for photo reactions instead of modern emojis. Things like heart eyes, happy face, shrug, crying, fight me. Just felt more authentic to that era.

Collaboration

I handled all the frontend which was HTML structure, all the CSS styling, and some JavaScript for theme switching and making the bio editable. Veyda was on backend doing server setup, Socket.io for real time chat, and handling emoji reaction tracking.

We used GitHub for version control with Veydas repo and honestly this was a learning curve for both of us.

Major Challenges and Solutions

The most difficult part for me was the JavaScript (frontend). Initially I told Veyda I wasnt really wanting to do much in the JavaScript field but I quickly realized how swamped Veyda was in backend so I took the challenge of doing a little JavaScript specifically for theme changing by adding event listeners. And then after I finished all my styling (which CSS was my priority) I chose to make the user bio section editable so users can change their username, location, status but I wasnt able to figure out how to make it stay if you refresh the page.

CSS wise the biggest headache was making the layout work for different desktop screen sizes. Stuff was getting cut off on smaller laptop screens and people couldnt scroll. The problem was I had overflow hidden on the container. Had to remove that but keep the height calculations so the photo gallery could still scroll internally.

Git and GitHub was honestly one of the biggest challenges. We kept running into issues with divergent branches and merge conflicts because we were both working on files at the same time.

AI Usage Acknowledgment

I used Claude extensively when it came to push and pull. We were both very confused on how we can both publish our changes on the repo. See my convo here:

Committing frontend changes to shared GitHub repo | Claude

I used AI to debug certain things in CSS that werent working the way I wanted them to work. The scroll feature in the photo gallery and then making the browser accommodate all screen sizes.

When I worked in frontend JavaScript to debug theme changes that werent switching properly as well. And in the end added a shit ton of console.log messages to figure it out on my own.

When working in CSS https://developer.mozilla.org/en-US/docs/Web/CSS/Reference this website was my go to before asking AI. I was trying to find existing examples and then execute them myself. There were times where I really wasnt sure what to look for so I would screenshot specific sections in archived Myspace pages and asked Claude step by step instructions in achieving that aesthetic.

AI definitely helped me get unstuck faster especially with Git. But the times I learned the most were when I used console.log to debug myself or looked at MDN docs first. The best use of AI for me was getting pointed in the right direction or having concepts explained in simpler terms, not just having it write all my code.

BACKEND (VEYDABASE)

Production Decisions

We had decided that the feature that was most important to us was the chat room so I focused primarly on making sure we could get that working. I made the base of the page before even beginning, downloading nodes as I knew these would be neccessary before we went any further. I relied heavily on my previous code from the chat room I had made, the socket drawing app code and the original data storage code we had used. I found that in doing this I was actually understanding what I was doing a lot more and it was not as difficult as I had imagined as all the features I wanted to add I had already previously done on other pages or examples. I worked primarily in index.js and app.js to get my features to run.

I set up index.js to have our serving running on localhost:3000 at first and later had to change this in order to get it running well on Render. Within index.js I set up lowdb, the server and the message handling sockets. If running on a local server the sockets and lowdb allow the user to load all previously submitted messages, when running on Render the sockets allow the user to "live chat" but wipe the messages when the user leaves or the page is reloaded. This could easily be fixed with a new data storage solution which I plan on getting to in the future, looking at using mongodb. I planned on getting the emoticon reaction handling working but the chat room took me much longer than expected as well as the issues we ran into with pushing/pulling but this is another feature that I plan on fixing in the future.

Challenges (things that made me want to cry)

• Push & Pull

  • A big challenge I ran into was pushing and pulling on Github. Alexandros and I had been working on the code simutaneously and Alex uploaded his code first. I didn't immediately pull and kept working from our original code so when I did go to push my code onto Github it did not work because my file was not identical to the one actively on Github. After trying to figure it out myself I went to Claude, which told me I could combine two versions to make one code. I tried doing this but ran into problems as well as it said it couldn't sync both versions. Eventually I decided the easiest thing to do was manually copy and paste my new code from my VS Code file to our Github repo. I kind of wish I had just decided to do that at first because my debugging + looking for other solutions didn't work out well and took a while.

• Script placement on html

  • Another challenge I ran into was the script placement on html. After I had added some of Alexandros' html code into my file on VS Code the page stopped working. I started trying to debug by looking through my code and comparing it to my previous code. I looked up the error code that I got in the terminal but it didn't give me very specific suggestions. Eventually after trying to debug myself I put my code into Claude and asked why it was not showing up in my browser if it had been working earlier and I couldn't find anything wrong with the code. The problem as Claude said was that it was running the script tags before the html so I simply had to move two of the script tags (app.js + socket.io) to after the rest of the html code. After changing that and adding a note to myself my page was back and running on localhost:3000.

Collaboration

I really enjoyed working in this group as we both worked together to find solutions and ideated on the original concept together. Alexandros felt more comfortable working with the style and since I had successfully made a chat room I felt I could use that to apply it to the back end that we had imagined. Overall I feel like we worked really well together and we have similar ideas which helped land us with a concept that we both agreed upon. I would like to finish this social network with Alexandros and continue to practice my back end skills on it.