DEV Community

loading...
Cover image for Project Showcase: Building A React Site For A Non-Profit School In Africa

Project Showcase: Building A React Site For A Non-Profit School In Africa

Gedalya Krycer
Front-End Developer and Designer with a focus on React.
・6 min read

TLDR:

The following was my process in creating a marketing site for a new type of hybrid learning school in Sierra Leone.

🔗 View Deployed Version

🔗 View GitHub Repository


Table Of Contents


The Project Brief

Kids in class

Gen Hybrid Systems is a new nonprofit with one mission... To build a hybrid learning school in Sierra Leone, Africa.

Hybrid learning is where a student can take classes either in a physical school building or online. For some in Sierra Leone, this means they won't have to walk 5-8 miles to get to class. It will be a game-changer for them.

My job was to first help flesh out the branding with some logo concepts, then design and build their initial website.

The goal of the website was to first introduce the education crisis in Sierra Leone and how Gen Hybrid Systems will help. Secondly, provide them with a way to share progress and build a follower base.

Back To Top


Logo Concepts

The project kicked off with creating several logo concepts to help represent the new organization. I don't really offer logo design as a services these day, but it was a helpful exercise to get started.

Tools used:

Computer and Book logo concept

Badge logo concept

Thick logo concept

In the end, Gen Hybrid went in a different direction and created this final logo mark with one of their other partners.

Final logo concept

Even though my suggested concepts were not used, this was not time wasted by any means. I ended up using my research for the logo comps, to help inform the next stage — designing the website's UI and structure.

Back To Top


Web Design

My approach to the design was to have it first and foremost serve the goals of Gen Hybrid.

  1. Stand out from other educational organizations visually
  2. Educate site visitors about the crisis in Sierra Leone
  3. Enable visitors to follow the progress of this mission

To stand out visually I used deep brown colors with yellow and blue as accents. (Interactive elements specifically use the yellow highlight color.) I chose the brown and serif font to tie into a "book" theme, but not be overly scholastic.

Desktop Screen Mockups

Credit: Render mockup downloaded from ebhy | www.freepik.com

I used Figma primarily to design and prototype the site.

Mobile Screen Mockups

The following sections will highlight ways how the site educates visitors about the crisis and ways to follow Gen Hybrid Systems.

Back To Top


Tech Used

Back To Top


Custom Navigation

The site as a whole does not use a CSS framework but relies on custom SCSS styles. (With some help from Stack Overflow. 😇)

This posed an interesting challenge for the navbar, as it behaves very differently on mobile than desktop. It was a wonderful learning experience in the end though!

sticky mobile nav

On mobile, I ended up using a custom React hook called use-scroll-position to help calculate how much of the page has been scrolled. Once down 100px – 200px or so, the menu becomes sticky and receives a background color.

Mobile Menu Toggle

For the toggle menu button, there is a fun little CSS animation. It is also a11y friendly, with some hidden screen reader text.

Back To Top


Mailchimp Intergration

Modal with Mailchimp form opening

To help build a following there is a subscription form in the navigation that stores contact information in Mailchimp.

For a complete guide on integrating Mailchimp with React, check out my previous article.

Back To Top


Slideshow Hero Banner

Hero Banner Image Fading

It was really important to visually showcase the ability to study in school and at home. After all, this is one of the main benefits of hybrid learning.

The main hero banner archives this with two responsive images, that fade back-and-forth between each other. It took a lot of googling but ended up achieving with the help of absolute positioning and CSS animations.

Back To Top


Dynamic "Back To Top" Buttons

Because this was a single-page site that was rather long, I felt it important to add a "back to top" button. However, it isn't helpful to show this button when the viewer is already at the top of the page.

Once again the custom React hook use-scroll-position came to the rescue.

On desktop screens, I used it to calculate when a button should appear/disappear within the social media pinned sidebar.

Desktop back to top

On mobile screens the same button shows up past a certain scroll distance, but this time on the bottom right of the screen.

Back To Top Button Mobile

Back To Top


Crisis Accordion & Vertical Tabs

One of the more complex challenges to design and build was the Crisis section. I wanted to illustrate in an interactive way, what issues Gen Hybrid Systems is looking to solve.

Using a bunch of tutorials I created a vertical tab menu that also acts as accordion.

Desktop Crisis Tabs

When a tab is clicked, an image animates in and the accordion opens to reveal more text and a button. On mobile the images go away, with the focus being on the vertical tab accordions.

Alt Text

The whole section also has slight a parallax scroll.

Alt Text

Back To Top


YouTube Playlist API Intergration

Scrolling through YouTube videos on the Gen Hybrid website

I used YouTube's API, (specifically the PlaylistItems endpoint) to bring in the latest Gen Hybrid System videos. This gave them an easy way to keep the site's visitors up to date, without needing to touch any code.

Back To Top


Netlify Contact Form

Filling out contact form so the submit button enables

Leveraging the custom input fields (mentioned above) and Netlify's super simple (& free) mail server I built in a contact form.

Netlify does a lot of the heavy lifting with spam protection, but I built in some additional validation to ensure the correct info is captured.

The "Send" button will not "enable" until all the form fields are filled out and the email field contains an @ in it.

Back To Top


I hope you enjoyed viewing this project and maybe even got a few ideas for your next one! Please share in the comments what you come up with. Always love seeing how people approach designing and building freelance sites.


Thumbnail designed with Figma

Discussion (1)

Collapse
jonrandy profile image
Jon Randy

React seems like the wrong tool for this kind of site