https://github.com/markusenglund/react-kanban
A Trello-like application built with React and Redux. Take a look at the live website:
https://github.com/markusenglund/react-kanban
Last synced: 3 months ago
JSON representation
A Trello-like application built with React and Redux. Take a look at the live website:
- Host: GitHub
- URL: https://github.com/markusenglund/react-kanban
- Owner: markusenglund
- License: mit
- Archived: true
- Created: 2018-01-24T23:25:10.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-28T21:56:42.000Z (over 6 years ago)
- Last Synced: 2024-11-08T13:38:50.396Z (8 months ago)
- Language: JavaScript
- Homepage: https://www.reactkanban.com
- Size: 7.8 MB
- Stars: 1,726
- Watchers: 38
- Forks: 245
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-kanban - like application built with React and Redux. Take a look at the live website: | markusenglund | 1666 | (JavaScript)
- awesome-engineering-management - react-kanban - rendered React app inspired by Trello. | (Tools / Boards)
README
# React Kanban
A server-rendered React app inspired by [Trello](https://trello.com/home).
[Check out the live website](https://www.reactkanban.com)
### Features
* It has most of the features available on Trello, like creating and editing new cards, dragging around cards and so on.
* Supports GitHub flavored markdown, which enables stuff like headings and checklists on the cards.
* Works great on touch devices.
### Tech stack
* [React](https://github.com/facebook/react)
* [Redux](https://github.com/reactjs/redux)
* [React-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)
* [Sass](https://github.com/sass/sass)
* [Webpack](https://github.com/webpack/webpack)
* [Babel](https://github.com/babel/babel)
* [Express](https://github.com/expressjs/express)
* [MongoDB](https://github.com/mongodb/mongo)
* [Passport](https://github.com/jaredhanson/passport)
### Development
Setting up the full app with your own mongoDB instance and auth credentials for Twitter and Google sign-in requires significant effort. Use the simplified set up if you don't want to bother with that.
#### Simplified setup
```shell
# Clone the simple-dev branch which does not include db and social sign-in stuff
git clone https://github.com/yogaboll/react-kanban.git -b simple-dev
cd react-kanban
npm install
npm run build
# Open a second terminal window and run:
npm run serve
```
The app will run on http://127.0.0.1:1337
#### Full setup
```shell
git clone https://github.com/yogaboll/react-kanban.git
cd react-kanban
npm install
```
You need to add your own mongoDB url as well as auth credentials for the Google and Twitter sign in. You need to create a file with the name `.env` in the root directory with the following variables:
```
MONGODB_URL
MONGODB_NAME
TWITTER_API_KEY
TWITTER_API_SECRET
GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET
SESSION_SECRET
# Has to be port 1337
ROOT_URL=http://127.0.0.1:1337
```
```shell
npm run build
npm run serve
```
For production deployment run:
```shell
npm run build:prod
npm run serve:prod
```