rxyang0 / foothillsesl

Website for Foothills Intercultural Ministries built with React + Gatsby, SASS, GraphQL

Foothills Intercultural Ministries Website

Near the beginning of summer 2020, I proposed the creation of this website in hopes of improving the attendance of a local church's English classes and events. It quickly expanded into a full-stack endeavour. With a desire to uncap extensibility and scalability, I chose to learn and utilize the most modern frameworks. This project fully optimizes for a performant, mobile-first end-user experience by upholding best practices, the highest code quality, and excellent Lighthouse audit scores.

Software Stack

Framework	Features
React	Interactive and extensible UIs with encapsulated components
Gatsby	Incredible performance and SSG on top of React
gatsby-image	Optimized image compression and lazyloading
SASS	Powerful CSS preprocessing to reduce coupling
CSS Modules	Scoped styles and separation of concerns
GraphQL	Specific queries and transformations of content
Framer Motion	Intuitive and engaging animations!
Figma	UI design and prototyping

I opted not to use a CSS framework like Bootstrap or Tailwind CSS to have everything tailor-made. All code was carefully written to always hold purpose.

Content Source

Currently, all content and assets are sourced from YAML and image files that are committed to this repository. I am working on a GraphQL integration with a Node.js headless CMS backend to allow other teams to edit the content with ease.

Building Locally

1. Install Node.js and NPM.

2. Clone this repo and cd into this root folder.

3. Run npm install to install all dependencies including Gatsby.

4. Start the development server with gatsby develop, or create a production build with gatsby build.

5. Access the development server at localhost:8000, or serve the production build with gatsby serve at localhost:9000.

6. Any changes that you make to components and content will be hot-reloaded in the browser under the development server.