/DomDomShow

Primary LanguageJavaScript

DomDomShow

🎨 DomDomShow is a web-based tool that lets you easily create your own mind map.

Live Demo

🔗 Check out our live demo to see DomDomShow in action: Live Demo

🔑 Test account and password

Account Password
test999@test.com 12345678

Detail Skills

Front-end

Technique Description
React Hook building reusable UI
React Context Global State Management
JSX Write HTML in JS
React Router SPA
JavaScript ES6 Module, Template Literals...
styled-components CSS-in-JS
SVG Scalable Vector Graphics

Back-end

Technique Description
Firestore Database
Firebase Hosting Web Server
Firebase Auth Member System

Development Tool

Technique Description
webpack bundle JS
Babel JS Compiler
NPM package manager tool
ESLint / Prettier Linter Tool
GitHub Git Tool

Front-end

  • Use React Hook and React Router build the single page application(SPA) for better user experience.
  • Use React Context manage the global state of member login or not, passing state through nested components tree.
  • Use JSX and styled-components can write HTML elements and styles directly in the JS component. This approach results in more intuitive and semantic code, which helps developers write code more efficiently.
  • SVG circle and path elements are used to achieve the mind map on the canvas.

Back-end

Use Firebase set up the website, including Hosting for web hosting, Auth for membership system, and Firestore for database operations.

Component Structure

image

Routers identify main components, namely Welcome, Member, Account, and Draw, which are subdivided based on complexity. Header, Loading and Layer are shared component.

The four main components store their states separately, which are then passed down to child components via props. Member states are stored at the top layer of the App and passed down to child components through the Context API. The Save feature enables members to store data in Firebase Firestore.

Feature

1️⃣ Edit Title

The title can be changed at any time, as desired.

title

2️⃣ Create node and line

Create a new node by dragging and dropping, and create new nodes in the desired direction based on it.

create

3️⃣ Shape the line

The line can be adjusted to the desired position by using points on it, which are based on the principle of Bezier curves.

shape

4️⃣ Comment board

Users can add titles and comments to each node through the comment board, or they can double-click on a node to add a title directly to it.

comment

5️⃣ Text font & Node color

font

6️⃣ zoom

To zoom in or out of the working area of the mind map, you can click the Zoom In/Out button on the zoom toolbar located in the lower-right corner of the canvas. Alternatively, you can hold down the Ctrl key and scroll your mouse wheel to zoom in or out.

zoom

7️⃣ Hotkey

ACTION HOTKEY
Zoom ctrl + scroll
Delete delete
Panmode space

Contact

If you have any question or suggestion, welcome to contact this mail: dknyzzz777@gmail.com

Have a good day!