david32145 / github-kanban

An awesome web app for manager kanban boards in github repositories

An application to manager github repository with kanban boards.

👨🏼‍💻 Development Contact

David Nascimento

• Github
• [e-mail]

🚶 User Stories

• An user can be added an repository to system;
• An user can select an repository and manager it;
• The board kanban have 4 colums (Todo, Doing, Review and Closed);
• Todo is the startpoint, that is, the user will create the card/issues here;
• Always an new card is created, an issue associate must be created;
• The card can be title, description;
• User can be drag and drop, of any board to any board:
• When an user move card to Closed the associated issue must be closed;
• When an user move card of Closed the associated issue must be reopen.

📝 Task List

• Create figma prototype;
  • Github login page;
  • Add repository page;
  • Select repository page;
  • Kaban board;
  • Add new Todo page.
• Create front-end;
  • Github login page;
  • Add repository page;
  • Select repository page;
  • Kaban board;
  • Add new Todo page.
• Create back-end.
  • create login resource;
  • create add repository resource;
  • create list repository resource;
  • create card to an repository resource;
  • create list boards of an repository resource.

🚀 Technologies

In the app was used an stack javascript, with nodejs in backend and reactjs in web.

♻️ Backend

• nodejs;
• typescript;
• eslint;
• dotenv;
• prettier;
• mysql;
• sequelize;
• axios;
• express;
• nodemon.

🌐 Web

• reactjs;
• typescript;
• eslint;
• prettier;
• react-dnd;
• styled-components;
• axios;
• react-router-dom;
• redux;
• react-redux;
• redux-saga;
• immer;

🎌 What I've learned

• OAuth with github;
• Create, search and delete database instances;
• Migrations with sequelize;
• Relationship in tables of database;
• API RESTful with express;
• Drag and drop of HTML5;
• Consumer the api resouces with axios;
• Manager github api resources;
• React hooks;
• React with redux;
• Side-effects with redux saga;
• Css-In-Js with styled-componets.

🏘️ Page Examples

Login Page

New Repo Page

Repo List Page

Repo Board Page

New Card Page

🎥 How Usage

Example how usage app.

✔️ Login into GitHub

🆕 Add New Repository

✉️ Create Card / Issue

😍 Move Cards

✋🏻 Prerequisites

• Node.js
• Yarn
• SQL Database
• GitHub OAuth

🔥 Install and Running

1. Config you environment;
2. Create an OAuth app in github;
3. Git clone git clone https://github.com/david32145/github-kanban;
4. Enter in api folder;
5. Copy .env.example to .env and fill with your config, sever port by default is 3333. Below an example of .env;

DB_USER=root
DB_PASS=root
DB_HOST=localhost
DB_NAME=github_kanban
DB_PORT=3306
DB_DIALECT=mysql

FRONT_END_LOGIN_URL=http://localhost:3000/login

GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_client_secret

6. Run yarn install or npm install;
7. Up your migrations with yarn migration:up or npm run migration:up;
8. Run server with yarn dev or npm run dev;
9. Enter in web folder;
10. Copy .env.example to .env and fill with your config. Below an example of .env

REACT_APP_OPEN_CLIENT_ID=your_github_client_id
REACT_APP_API_URL=http://localhost:3333

11. Run server with yarn dev or npm run dev;
12. Run yarn start or npm run start;