Project Showcase: Building A React Site For A Non-Profit School In Africa
Tags: react, showdev, webdev, design
Published: 2021-06-20 17:03:24

####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](https://genhybridsystems.com/)

#### [🔗 View GitHub Repository](https://github.com/GedalyaKrycer/genhybridsystems)

---

<a name="Table-Of-Contents"></a>
## Table Of Contents
* [The Project Brief](#section1) 
* [Logo Concepts](#section2) 
* [Web Design](#section3) 
* [Tech Used](#section4)
* [Custom Navigation](#section5)
* [Mailchimp Intergration](#section6)
* [Slideshow Hero Banner](#section7)
* [Dynamic "Back To Top" Buttons](#section8)
* [Crisis Accordion & Vertical Tabs](#section9)
* [YouTube Playlist API Intergration](#section10)
* [Netlify Contact Form](#section10)


---

#The Project Brief

![Kids in class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nxqz4my1o93ziv8w366.jpg)

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](#Table-Of-Contents)


---

##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:

* [Adobe Illustrator](https://www.adobe.com/products/illustrator.html)
* [Adobe Color](https://color.adobe.com/)
* [Figma](http://figma.com/)

![Computer and Book logo concept](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbcx2i4aom4qmsj2xwod.png)

![Badge logo concept](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7i3fdeu4oaf5bjlp6s0.png)

![Thick logo concept](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5c8lcekoj4kimjmooctz.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jk2jwktasvmy96n9q66.png)

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](#Table-Of-Contents)

--- 

##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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sza04y9tunodzyv6za55.jpg)

[*Credit: Render mockup downloaded from ebhy | www.freepik.com*](https://www.freepik.com/psd/mockup)

I used [Figma](http://figma.com/) primarily to design and prototype the site. 

![Mobile Screen Mockups](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htqjmzi71g5ilddlhytt.jpg)


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

[Back To Top](#Table-Of-Contents)

--- 

##Tech Used


* [React](https://reactjs.org/)
* [SASS](https://sass-lang.com/guide)
* [Mailchimp](https://mailchimp.com/)
* [GitHub](https://github.com/)
* [`axios`](https://www.npmjs.com/package/axios)
* [`react-ga`](https://www.npmjs.com/package/react-ga)
* [`react-icons`](https://react-icons.github.io/react-icons/)
* [`react-mailchimp-subscribe`](https://www.npmjs.com/package/react-mailchimp-subscribe)
* [`use-scroll-position`](https://www.npmjs.com/package/@n8tb1t/use-scroll-position)
* [Netlify](https://www.netlify.com/)
* [Network Solutions](https://www.networksolutions.com/) 
* [YouTube API](https://developers.google.com/youtube/v3/docs/playlistItems/list)
* [Popsmart](https://popupsmart.com/)


[Back To Top](#Table-Of-Contents)

--- 

##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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klkytmo04v18mlp3u40s.gif)

On mobile, I ended up using a custom React hook called [`use-scroll-position`](https://www.npmjs.com/package/@n8tb1t/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xjd6m67vosflvyvhrtr.gif)
 

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

* [View SCSS Code →](https://github.com/GedalyaKrycer/genhybridsystems/blob/main/src/components/header/Navbar/navbarStyles.scss#L53-L118)

[Back To Top](#Table-Of-Contents)

--- 

##Mailchimp Intergration

![Modal with Mailchimp form opening](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yaz2smx3d14ul1gvuvo.gif)

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. 

{% link https://dev.to/gedalyakrycer/create-an-email-list-with-react-mailchimp-965 %}


[Back To Top](#Table-Of-Contents)


--- 

##Slideshow Hero Banner

![Hero Banner Image Fading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0ltcnlweqf9ao88sh6j.gif) 


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. 

* [View JSX Code →](https://github.com/GedalyaKrycer/genhybridsystems/blob/main/src/components/header/HeroContainer/HeroContainer.js#L22-L28)

* [View SCSS Code →](https://github.com/GedalyaKrycer/genhybridsystems/blob/main/src/components/header/HeroContainer/heroStyles.scss#L48-L118)

* [View CSS Animation Code →](https://github.com/GedalyaKrycer/genhybridsystems/blob/main/src/sassStyles/_animations.scss#L75-L112)

[Back To Top](#Table-Of-Contents)

--- 

##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`](https://www.npmjs.com/package/@n8tb1t/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u53tvi2k4q4943ftk4ak.gif)

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

* [View JSX Code →](https://github.com/GedalyaKrycer/genhybridsystems/blob/main/src/components/MobileBackToTop/MobileBackToTop.js)

![Back To Top Button Mobile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0c25b06skbtmycxdkdg.gif)


[Back To Top](#Table-Of-Contents)

--- 

##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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kq4qo1y5rz6s5t08z3bk.gif)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63u9t1dqb2ya16bc5bzl.gif)

The whole section also has slight a parallax scroll. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01vj52rgggbnc760o4qe.gif) 

* [View JSX Code →](https://github.com/GedalyaKrycer/genhybridsystems/blob/main/src/components/crisis/CrisisContainer/CrisisContainer.js)

[Back To Top](#Table-Of-Contents)

--- 

##YouTube Playlist API Intergration

![Scrolling through YouTube videos on the Gen Hybrid website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6s9crzmrq6fuv8xkzi6.gif)

I used YouTube's API, (specifically the [`PlaylistItems`](https://developers.google.com/youtube/v3/docs/playlistItems/list) 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](#Table-Of-Contents)

--- 

##Netlify Contact Form

![Filling out contact form so the submit button enables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2nj0q892jc3993hi2z4.gif)

Leveraging the custom input fields (mentioned above) and [Netlify's super simple (& free) mail server](https://www.youtube.com/watch?v=5oOhoBI7b8M) 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](#Table-Of-Contents)


---

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](https://www.figma.com/)*