womenandcolor / women-and-color-static

Find talented women, people of colour and LGBTQA+ professional to speak at your next event.
https://www.womenandcolor.com/
MIT License
0 stars 4 forks source link

Women and Color - Frontend

Women and Color is an online community of subject matter experts who identify as women and/or people of color.

Located in cities across Canada and the United States, each of our subject matter experts is available for speaking opportunities at tech-related events.

Tech Stack

The frontend is built on the Gatsby framework, using React and Redux.

We use the Material-UI component library, as well as CSS Modules for styling.

The backend is build on Django and is a separate app. The repo and instructions for running it locally are here: women-and-color-backend.

Getting Started

Bridge Contributors!!

Using Git

Developing with Gatsby

Gatsby is a static site builder framework that uses React and GraphQL. They have great documentation, make sure to check it out. Basically, you develop your app in React and Gatsby takes care of compiling the javascript and rendering it into a static site that can deployed anywhere as a set of HTML, CSS, and JS files.

Routing and adding new pages

Gatsby handles routing, and the routes are based on the structure of the /src/pages directory. So to create a new page at womenandcolor.com/job-board, you would need to create a component at /src/pages/job-board.js that renders the content of that page. You can create sub-directories, so if you wanted a page at the url womenandcolor.com/jobs/new, you'd create a component at /src/pages/jobs/new.js'. Then when you run yarn start, Gatsby will generate those routes for you.

Server-side rendering limitations

An important "gotcha" with Gatsby is that since it's rendered server-side, there can't be any references to the DOM or window or any other browser API that wouldn't be available in a node environment. It's easy to get tripped up because those errors won't come up in development mode, you'll only see them when you run yarn build to build the app for production.

Data in Gatsby

There are two ways to bring data into a component when building with Gatsby - either you provide the data at build-time and use a graphQL query to pull it into your component, or you fetch the data after the component mounts and update the state with the data so the component re-renders. The more React-y way to do it is the second option, but if you want to try the graphQL way you can find the documentation here: https://www.gatsbyjs.org/docs/querying-with-graphql and you can see an example here: https://github.com/womenandcolor/women-and-color-static/blob/master/src/components/templates/speaker.js

Using Redux

Redux is already set up in the app, so just add your modules to the /src/redux/modules directory and just make sure you include the reducer in /src/redux/reducers.js/

Deployment

[Heroku][heroku] is a platform for easily deploying applications.

A [buildpack][buildpack] provides framework and runtime support for apps running on platforms like Heroku.

License & Copyright

Copyright (C) 2017 Women and Color This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, version 3.0.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

See the LICENSE file for details.