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.
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.
yarn global add gatsby-cliyarn. (See the installation instructions if you don't have yarn installed)yarn startlocalhost:8080 on your browser to see the appfeature branch should be your base branch for this project. feature branch. Make your changes on that branch, then open a pull request back into the feature branch. Once your PR is approved and the code is merged, pull from feature and start a new branch for the next step in your development process.feature branch, it gets automatically deployed to Heroku, so you can see the live app here: https://job-board-bridge.herokuapp.com.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.
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.
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.
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
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/
[Heroku][heroku] is a platform for easily deploying applications.
A [buildpack][buildpack] provides framework and runtime support for apps running on platforms like Heroku.
staging branch to our staging website on Heroku:
[women-and-color-staging.herokuapp.com][site-staging]. (So merging a
pull request also auto-deploys!)heroku/nodejs and heroku-buildpack-staticCopyright (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.