codeisneverodd/practice-with-react-typescript-for-kanban-board

📂 Kanban board with full drag-and-drop support!! Manage your work easily and simply 😎

Kanban Board

Table of Contents

• Languages
• Frameworks & Libraries
• Design Tools
• Guides

  • Make Skeleton Site

    • Result of Skeleton

  • Color the skeletons

    • Result of Coloring

  • Deploy

    • Result of Deployment

Click & Check Result

Languages

Frameworks & Libraries

Notable Packages

Design Tools

Guides

Make Skeleton Site

1. Initialize project using Create React App, npx create-react-app my-app --template typescript.
2. Delete useless files and erase all uselsess codes in them. In my case, delete all the files except App.tsx and index.tsx.
3. Create a directory called models.
4. Create atoms.ts file in models directory and define global states.
5. Install react-router-dom via npm, npm i react-router-dom.
6. Install react-beautiful-dnd via npm, npm i react-beautiful-dnd.
7. Create a directory called routes.
8. Create Home.tsx file in routes directory and define DragDropContext and Droppable for type={"boards"}.
9. Create Router.tsx file in root directory and define route for Home.tsx.
10. Create a directory called components.
11. Create Board.tsx, Task.tsx, TaskTrashCan.tsx and AddBoard.tsx in components directory.
12. Define Board component as Draggable in Boards.tsx and add Droppable for tasks inside.
13. Define AddBoard and Task component as Draggable in AddBoard.tsx and Task.tsx .
14. Define TaskTrashCan component as Droppable in TaskTrashCan.tsx .
15. Add TaskTrashCan below DragDropContext opening tag.
16. Add Board and AddBoard in the Droppable area of type={"boards"} in Home.
17. Add Task in the Droppable area of default type in Board.
18. Place all the parameters which are needed for drag and drop actions.
19. Define function onDragEnd in Home and add logics for listing.
20. Create localStorage.ts file in models directory and define functions for saving data in local storage.
21. Add local storage saving logic in Home
22. Add a button in the Board and define onClick event for deleting board. Done.

Result of Skeleton

Please dont' care about the coloring things in this stage, just define components and drag&drop actions.

Color the skeletons

1. Design it with design tools or something, in my case Figma.

2. Visit Google Fonts and select the fonts you want to use. Copy the <link> to embed.
3. Install react-helmet via npm, npm install --save react-helmet.
4. Add Helmet component above Router component and embed the link that we copied in step 2.
5. Install styled-compents via npm, npm install --save styled-components.
6. Create a directory called styles.
7. Remove default settings in CSS. You can do this in various ways. In my case, define createGlobalStyle in App.tsx and paste the code of this.
8. Make styled.d.ts file in styles folder and declare module 'styled-components' and add interface DefaultTheme.
9. Make theme.ts file in styles folder and define colors in themes using DefaultTheme you want to use. In my case, I defined darkTheme and lightTheme .
10. Make global.d.ts file in src folder and declare modules to use image files.
11. Show off your CSS skills! Make styled components in the files you need. If you have to make a identical styled components in different files, make styles.tsx file in styles folder, put them there, and import them where you need.

Result of Coloring

Please don't just copy my design or codes. That doesn't help you at all.

Deploy

1. You can deploy your website in various ways. In my case, I deployed by publishing files to gh-pages branch on GitHub.

2. Make Repository on GitHub and push all the files.

3. Install gh-pages via npm, npm install gh-pages --save-dev.

4. Go to package.json and add "homepage" right above the last curly brace. Use https://user-id-here.github.io/repository-name-here

5.    },
        "homepage": "https://codeisneverodd.github.io/practice-with-react-typescript-for-crypto-dictionary/"
      }

6. Add "deploy" and "predeploy" to script in package.json.

7.    "scripts": {
          "deploy": "gh-pages -d build",
          "predeploy": "npm run build"
        },

8. Finish deployment by entering npm run deploy in the console.

Don't forget to add basename={process.env.PUBLIC_URL} in your BrowserRouter

Result of Deployment