https://github.com/jwc20/twler-frontend-new

Frontend application for displaying weightlifting results and visualizing with charts. Also has a barbell calculator.
https://github.com/jwc20/twler-frontend-new

d3 javascript p5 react tailwindcss

Last synced: about 1 month ago
JSON representation

Frontend application for displaying weightlifting results and visualizing with charts. Also has a barbell calculator.

• Host: GitHub
• URL: https://github.com/jwc20/twler-frontend-new
• Owner: jwc20
• Created: 2022-05-31T18:16:41.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-21T07:56:58.000Z (about 2 years ago)
• Last Synced: 2023-03-29T03:54:43.735Z (almost 2 years ago)
• Topics: d3, javascript, p5, react, tailwindcss
• Language: JavaScript
• Homepage: https://twler-app.herokuapp.com/events
• Size: 6.94 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Twler Frontend

Live Demo: [Heroku App](https://twler-app.herokuapp.com/events)

The frontend client for rendering IWF (International Weightlifting Federation) results data.

Twler (Top Weightlifter) is an app that will **_directly_** render data that is scraped with iwf_ruby

(Not from a postgresql database!)

## Screenshots:

### Login

![login page](./public/login.png)

### Sign Up

![signup page](./public/signup.png)

### Events

![event table](./public/event-table.png)

### Results

![result 1](./public/result-1.png)

![result 2](./public/result-2.png)

### Calculator

![calulator 1](./public/calc1.png)

![calulator 2](./public/calc2.png)

## As a user, I can:

- signup and login

- see the event table accordance to year

  - select year from the dropdown menu to filter events

  - search the events using a global filter

  - filter and sort events by clicking on the headers

- click on the event to see the full result

- see the result statistics (work in progress)

- see the result table

  - search results using a global filter

  - filter and sort results by clicking the headers (work in progress)

- see the scatterplot charts

- use a working barbell calulator (kinda buggy with the change plates)

### Tools:

- react, tailwindcss, d3.js, p5.js

### Note:

This client is used alongside the backend:

```

https://github.com/jwc20/twler-backend

```

and the gem library:

```

https://github.com/jwc20/iwf_ruby

```