https://github.com/juliolmuller/american-election

Project developed as part of College Assignment.
https://github.com/juliolmuller/american-election

election javascript react ufpr

Last synced: 3 months ago
JSON representation

Project developed as part of College Assignment.

• Host: GitHub
• URL: https://github.com/juliolmuller/american-election
• Owner: juliolmuller
• License: mit
• Created: 2020-11-12T23:52:42.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2025-01-24T16:26:59.000Z (4 months ago)
• Last Synced: 2025-01-24T17:24:11.658Z (4 months ago)
• Topics: election, javascript, react, ufpr
• Language: JavaScript
• Homepage: http://american-election.vercel.app/
• Size: 1.83 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  🤪 American Election





  Lessons Learned   |   

  Technologies   |   

  Environment Setup





  

  

  

  

  



![Application snapshot](./src/assets/app-overview.jpg)

Application developed as an assignment to college, subject Development for Mobile Devices, at UFPR, in order to learn building React applications firstly on web, so we can move on to React Native. The project seeks to apply knowledge in functional components, components communication (via *props* and *lifting state up*) and state management with Hooks.

[Check out the application running!](https://american-election.vercel.app/)

The proposal was to build a simple **votes counter system** with hard-coded candidates and, after finishing the input, display the rank of the most voted ones. A good-looking app may earn extra points 😍.

## :trophy: Lessons Learned

- Functional components;

- React Hooks (and custom Hooks);

- Synchronized state update ([see nice article](https://medium.com/javascript-in-plain-english/commons-mistakes-with-react-usestate-hook-and-how-to-prevent-them-43c811ca7451));

## :rocket: Technologies & Resources

**Frontend:**

- React.js 17

- Create-React-App

- Animate.css

**Development:**

- Visual Studio Code

- NPM routines

## :hammer: Setting up the Environment

Make sure to have **Node.js 10+** installed in your machine and its **npm** available in the command line, then use the following routines:

```bash

$ npm install     # download dependencies

$ npm run serve   # run development server

$ npm run build   # build files for production

```