Frontend Engineer

Rock and Rope | E-learning

- View the website -

Responsive: Mobile Only

Check My Code: GitHub

Zoe Lin- Full Stack Developer and Web Designer

Ting-Huei Chen - Full Stack Developer

Juliette Wilson - Web Designer & Content Writer

Yumi Choi - Graphic Designer

Rock and Rope showcase

- Brief -

Rock and Rope is an e-learning web app for young adults and teens who are new to rock climbing. If you've ever struggled with whether to play a video at the gym or the sound/music of the video always embarrasses you, this is the app for you.

- Why -

Since the most current online climbing courses are video-based, our goal is to change the way, make it quicker and easier for you to navigate through it in a climbing gym, and feel comfortable learning without the distractions, embarrassment, and interruptions of video.

- How -

Instead of traditional video tutorials, we present each step with rich, vivid, and clear illustrations. To show dynamic user interaction, we display social media post images with the custom hashtag on the homepage. In addition, JavaScript is utilized to validate level tests and other dynamic web app pages, while PHP cookies are used to track various user learning progress data. We have also embedded Google Maps in the Alberta Top 10 selected rock climbing gyms so users can easily access the nearest climbing gym.

  • PHP - The primary back-end development language
  • JavaScript - Main development language for front-end animation
  • CSS - Front-end page design and animation development programming language
  • Illustrator - Main design authoring tool
  • Adobe XD - Design authoring tool
  • Visual Studio Code - Used as the primary development tool.
  • GitHub - Version control and collaboration tools
  • Instagram API - Real-time post