Camp Pride | Devpost

Welcome to Camp Pride!

Inspiration

As a kid, I looked forward to summers full of sun, friends, and learning in a non-traditional way (aka not in a classroom). Being a city kid, I got to experience the outdoors through summer camps. I can only imagine what it's like to have that taken away from me due to COVID.

It’s never been more important for camps to offer programs in the online space. While the focus behind the push for virtual camps in 2020 was to stay compliant with social distancing recommendations, camps discovered that today’s campers and families expect flexible online programs that complement their busy schedules—and allow them to stay active and engaged from the comfort of their own homes.

For the LGBT+ community, there's a need to have safe spaces that provide a break from judgment, unsolicited opinions, and having to explain oneself.

I created Camp Pride to combine the two ideas of summer fun in an open and loving community. My goal is to expand my front end horizons from the basic website and see if I can seamlessly piece them together.

What it does

Camp Pride is a virtual summer camp program designed for queer, trans, questioning, and allied youth to not only explore their identify, the history of LGBT activism and the outdoors, but also connect with others who share their values and feel supported and respected.

Virtual activities include:

escape room - be a hero and rescue Camp Pride's mascot!
scavenger hunt on symbols for LGBT activism
listen to music in nature - to immerse ourselves in nature's healing effect, listen to ambient music for a calming effect, or jam to Korean pop group BTS (an avid supporter of LGBTQ community)
firework celebrations - to celebrate small wins and bring a little of the outdoors indoors
fireside chats - to connect with others who get you
scrapbooking - learn more about the different symbols you find and come across at Camp Pride

How we built it

HTML, JS, CSS for the general site. Node, Express, Moment, Socket.io for the chatroom. Also worked with Wolfram API for the Escape Room. HTML canvas was used to allow users to point and click to create their own firework bursts.

Challenges we ran into

Putting it all together - especially getting the interactions down for the scrapbook! Basically, adding more layers and pieces and using same components means breaking something else down the road. I'm still learning how to code more modularly.

I also attempted to use Wolfram API to build a notebook for use in the escape room to reverse search images, but in putting together everything and how some items broke as I added more to the page, I couldn't make this work.

Zoom also decided to share its recording bar as I recorded the video - a first!

Accomplishments that we're proud of

Did a lot of research on LGBTQ history an little known facts! Also gained more experience with CSS and interactivity with JavaScript! Also did more for loops instead of creating items one by one.

What we learned

I learned where to add JavaScript scripts - it matters whether you add it before or after the body! I also learned how finicky CSS and DOM manipulation can be between hyphens and underscores and ID names, and I got to play more with CSS and the power of JavaScript interactivity and build using loops and refer to all specific elements except for the last child.