Portuguese politics made easy.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
- Node
- Clone
git clone https://github.com/antoniojps/votos-client.git
- Install dependencies
cd votos-client
yarn install
- Start developing
yarn start
Your site is now running at http://localhost:8000!
Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.
The components structure follows Atomic Design:
- Atoms: elements, buttons, inputs
- Molecules: cards, the combination of atoms
- Organisms: sections of a page, the combination of molecules
Storybook is used to build components in isolation and document behaviors for potential reuse through storybook stories.
A molecule or organism that possibly recieves data through an asynchronous request should always consider the three stories:
- Loading
- Error
- Default
Other stories are created to demonstrate modifiers (props that modify the component).
Run storybook:
yarn storybook
Here's an example components folders struture:
components
└───atoms
│ └───Button
│ │ Button.js
│ │ Button.stories.js
└───molecules
│ └───Card
│ │ Card.js
│ │ Card.stories.js
└───organisms
│ └───Nav
│ │ Nav.js
│ │ Nav.stories.js
To understand how to deploy the website read the Gatsby documentation: Deploying and Hosting.
yarn build
Start the production server
yarn serve
- React - A JavaScript library for building user interfaces
- Gatsby - React-based, GraphQL powered, static site generator.
- styled-components - CSS in JS for React.
- Storybook - Tool for developing UI components in isolation for React, Vue, and Angular.
- António Santos - antoniosantos.me
- Henrique Silva - github
- Vasco Silva - github