Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alfredosumosav/trallo
A Single-page App inspired by Trello, where users can create and favorite boards, create and share cards and add descriptions and comments
https://github.com/alfredosumosav/trallo
Last synced: 13 days ago
JSON representation
A Single-page App inspired by Trello, where users can create and favorite boards, create and share cards and add descriptions and comments
- Host: GitHub
- URL: https://github.com/alfredosumosav/trallo
- Owner: alfredosumosav
- License: mit
- Created: 2019-10-30T02:56:46.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-14T19:41:53.000Z (over 3 years ago)
- Last Synced: 2023-03-10T00:46:22.076Z (almost 2 years ago)
- Language: JavaScript
- Homepage: https://trallo-fsp.herokuapp.com
- Size: 1.04 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Trallo
A Single-page App inspired by Trello, where users can create and favorite boards, create and share cards and add description and comments
Technologies •
Key Features •
How To Use •
Future Features
---
## Technologies
- Ruby on Rails
- PostgreSQL
- React
- Redux
- JavaScript
- Webpack
- AWS S3
---
## Key Features
### Boards Dashboard
### Boards & Cards
Engineered a seamless modal like transition between a board and a card by leveraging React Router props and React's _"diffing"_ algorithm to only render the card component when the board component is present or render both if you are accessing the card url directly resulting in improved user experience & navigation and predictable behavior & integrity.
```javascript
class CardShowEdit extends React.Component {
componentDidMount() {
this.props.requestCard(this.props.match.params.cardId);
}
componentDidUpdate(prevProps) {
if (prevProps.location.pathname !== this.props.location.pathname) {
this.props.removeCard(this.props.card.id);
this.props
.requestCard(this.props.match.params.cardId)
.then(() => this.forceUpdate());
}
}
render() {
if (this.props.card === undefined) {
return null;
}
return (
);
}
}
```
image
### AWS S3 Image Upload
Users can personalize their boards by attaching a background photo to a board. Leveraging Rails Active Storage and setting up a bucket in S3 it was possible to include the photo file in the form data sent to the server.
In the model:
```ruby
has_one_attached :photo
```
And in the component:
```ruby
handleFile(e) {
this.setState({
photoFile: e.currentTarget.files[0]
})
}
```
```ruby
handleSubmit(e) {
e.preventDefault();
let formData = new FormData();
formData.append('board[id]', this.state.id);
formData.append('board[title]', this.state.title);
formData.append('board[photo]', this.state.photoFile);
formData.append('board[favorited]', this.state.favorited);
formData.append('board[archived]', this.state.archived);
this.props.updateBoard(formData);
}
```
### New account creation, login, and guest/demo login
Users can sign up, sign in and log out. Users can use a demo login to try the site and must be logged in to use the app features.
### Lists
Boards are made up of lists which contain cards.
Users can create, update or delete lists within a board and create, update or delete cards(tasks) within lists.
### Comments
Members of a board can add comments to cards and comment's authors can edit or delete their comments.
### Sharing Boards
Users can share their board with other users through a url.
---
## How to use
Show Instructions
1. Install the ruby gems:
```sh
$ bundle install
```
2. Install dependencies (you must have [Node.js](https://nodejs.org/en/download/package-manager) installed):
```sh
$ npm install
```
3. Create, configure and seed the database running:
```sh
$ rails db:setup
```
```sh
$ rails db:seed
```
4. Start the rails server:
```sh
$ rails s
```
5. And in another terminal window run:
```sh
$ npm start
```
Go to `http://localhost:3000` and you'll see the dashboard.
---
## Future Features
- Adding Due Dates To Cards
- Moving Cards through Lists
- Adding New Members