Pia Kim
front end developer
Pia Kim
Front end developer

Peak Education Center

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

Overview

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

The site contains primarily information about the currently-offered programs, such as schedules and descriptions, as well as flyers/posters/ and contact information.

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

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.

For the most recent version, I used React and Gatsby. Gatsby is a static site-generator that has become increasingly popular, and it has become a really enjoyable experience for me learning and implementing it for various static sites. 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.

Challenges

Because there is an abundance of similar learning centers in the area, I had to think of way for the organization to stand out among the rest and 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. However, it is still an educational institution, which I had to be mindful of, to provide a convenient user experience. 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 in the local area. 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 (with gatsby images) and site metadata. I was amazed at how easy it was to implement many features with Gatsby.

Takeaways

  • In the 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