Pia Kim
front end developer
Pia Kim

Peak Education Center

stack:
  • React
  • SCSS
  • Gatsby
  • Javascript
  • HTML
  • Netlify

Overview

Peak Education Center is an after-school academy that offers small-group classes, tutoring, and other academic services for students in all grades. As a teacher/tutor and assistant, I was also in charge of maintaining the main website. Throughout my learning of web development I was able to use what I learned to build multiple iterations of the site, starting with simple HTML and CSS, to the newest version using Gatsby.

The site contains information about current programs, schedules, and registration process.

One recent version was built with React, Sass, and GSAP, and deployed using Netlify (view demo.

Then, I decided that switching to Wordpress would be the most ideal in order to give easy access to other admin and future maintainers.

Currently, for the most recent version, I used React and Gatsby. Gatsby is a static site-generator that has become increasingly popular. Although it may not be the most ideal for dynamic sites, it's a fast and simple way to get started with a static-based one, which this website is. It's SEO features are also one of its many pros, as opposed to using only React.

Going through different versions has provided the opportunity for me to practice what I've learned and experience managing the web content and site for an educational institution.

Next, I plan to create a more dynamic web experience for users, including a student and parent login system and other functionalities for teachers.

Challenges

I had to think of a way for the organization to stand out among the rest of similar learning centers in the local area, and to highlight what makes Peak different. My goal was to shift from an outdated feel to a more modernized one, through imagery, animations, and a slightly different type of layout. I still had to be mindful that it is an educational institution and that it should provide a convenient experience for the user base, who might just want to find out basic information quickly. The most important aspect was the content and services offered.

Another challenging aspect was optimizing analytics. It's a very small organization with a very specific target audience, but also had a lot of competition locally. I was able to learn more about organic SEO techniques. What made it harder was that the content was very heavily based on images - posters and banners - more than actual written content, which does not make things easier to be read on search engines, etc. I tried to combine as much text as well, and optimized images such as the alt texts and more descriptions with keywords. I researched on SEO information for Gatsby, and tried to optimize accordingly. I was able to easily implement things like lazy loading and site metadata. I was amazed at how easy it was to implement many features with Gatsby.

Takeaways

  • In the very early stages I used the traditional way of FTP to exchange files, then switched to faster deployment.

  • It reinforced the importance of keeping the target audience in mind when building a website, and in this case to try to keep things simple and informative for parents and students.

  • Gained more experience with analytics and different SEO tools and tactics.

©2021 Pia Kim