igords-goncalves / apuracoes-app

Aplicativo web para apurações dos resultados das eleições para presidente do Brasil onde uma API provida pelo TSE será consumida. https://dadosabertos.tse.jus.br/

APP de Apurações dos Resultados das Eleições de 2022

Trata-se de um aplicativo React minimalista com o objetivo de apresentar os resultados das eleições de 2022 para presidente, com um botão que atualiza os resultados sempre que clicado.

Dados do TSE https://dadosabertos.tse.jus.br/dataset

O aplicativo está consumindo uma API disponibilizada pelo TSE.

API utilizada https://resultados.tse.jus.br/oficial/ele2022/544/dados-simplificados/br/br-c0001-e000544-r.json

Abaixo está o modelo de layout do aplicativo todo contruído no figma com toda parte de estilo feita com Tailwind CSS

Figma: https://www.figma.com/file/Kvu8piwHTKX1OsNKhFxII1/Apura%C3%A7%C3%B5es-App?node-id=3%3A99&t=l6CoXCAa9eu92ejd-1

Tailwind: https://tailwindcss.com/

Todo o deploy do site foi feito no netlify

https://apuracoes-eleicoes-2022.netlify.app/

Tela primeiro turno

Tela segundo turno

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

apuracoes-app's Issues

Fix logic of political party

Currently I'm not consuming the political party from coming API. It has been made manually sending a string as a prop, so I need consuming this data from API, and manipulate them using a logical to get the main political party of candidate generally first 3 or 4 letters of political party datas from JSON.

1. How it receives props currently
   

2. How it sends currently the political party as a string manually
   

3. How it comes from API in JSON

In that case bellow you can see the political party as MDB

Fix button "Atualizar" functionality

The functionality of button "Atualizar" currently reloads all page, but I need this reloading just the datas from candidates.

Change tab icon

Currently tab icon used is that default of React. I wanna change it and put something with the same purpose of the application, something about Brazilian elections.

I was thinking that it's also better change title to Portuguese once the application is in the Portuguese language.

Here you are some suggestions

• pt_br = Resultados das Eleições
• pt_br = Eleições Brasileira
• pt_br = Apurações

Changes on header to second round feature

With the feature second round some changes on header have to be made.

• Change current date of results
• Change only the button label without render a new component, using the same component
• Exclude candidates of first round
• Consume datas of API second round

Originally posted by @igords-goncalves in #8 (comment)

[refactor] Refactor code using Axios

Refactor all code using Axios instead Fetch API.

[documentation] Implement changes on README

Implement changes like a new screen with no button on main component and explain with more details about project.

Create new feature to "2º Turno" or second round

Create a new feature to change screen between first and second round called in Portuguese "2º Turno" of Brazilian's elections.

A button has been created to this functionality, so when user click on button new results about the candidates on second round and new datas will be rendered on screen. The ideia is to do everything using React Router and to consume a new API of second round.

[component] Remove component button "Atualizar"

Button "atualizar" doesn't have any utility on project, so it could be removed.