React Flow Showcase

這個 Side Project 主要是為了展示我對 React 和 TypeScript 的熟練度。使用了 @xyflow/react 12.0.0-next.24 的 beta 版本，並利用其提供的新 types 和 hooks，展現我對新工具的掌握能力。

This side project showcases how I familiarize myself with React and TypeScript, utilizing the 12 beta version of @xyflow/react 12.0.0-next.24 with its new types and hooks to demonstrate my capability with new tools.

Project Highlights

• Problem-Solving Expertise Throughout the development of this project, I frequently referred to GitHub issues and discussions, Discord channels, and official documentation. Given the beta version's lack of official documentation, I also navigated through the source code to understand and implement new features. This involved:

• Identifying Solutions: Efficiently navigating through GitHub issues, Discord channels, official docs, and source code to find solutions to common and uncommon problems.

• Community Engagement: Participating in discussions on GitHub and Discord to gain insights and contribute to problem-solving.

• Staying Updated: Keeping up with the latest updates and best practices shared within the GitHub community, Discord developer groups, and official documentation.

Frontend Development Skills

As a frontend developer, this project allowed me to:

• Showcase Technical Proficiency: Implement complex features using React and TypeScript with a strong understanding of component-based architecture.
• Leverage Advanced Tools: Utilize advanced tools and libraries such as React Flow for dynamic, interactive UI elements.
• Optimize Performance: Focus on performance optimization and best practices to ensure smooth and efficient user experiences.

Key Features

• React Flow Integration: Implemented a sophisticated flowchart with dynamic node connections, showcasing advanced usage of React Flow.
• TypeScript Mastery: Demonstrated deep understanding of TypeScript for type safety and better code maintainability.
• Modern UI/UX: Developed a modern, user-friendly interface using Tailwind CSS for responsive design.

Why This Project Stands Out

• Innovation: Leveraged the latest beta tools and libraries, reflecting my proactive approach to adopting new technologies.
• Problem-Solving: Highlighted my ability to effectively troubleshoot and resolve issues by actively engaging with the developer community on GitHub and Discord, consulting official documentation, and navigating source code.
• Technical Depth: Showcased my in-depth knowledge and application of React and TypeScript in a real-world scenario.

Installation

Follow these steps to set up and run the project locally:

Prerequisites

• Node.js (version 14 or later)
• pnpm

Install Dependencies

Using pnpm:

pnpm install

Running the Development Server

To start the development server, run:

Using pnpm:

pnpm dev

Project Structure

.
├── public
├── src
    ├── component
    ├── edges
    ├── helper
    ├── hooks
    ├── nodes
    ├── store
    ├── types
    ├── utils
├── App.tsx
├── flow.tsx
├── index.css
├── main.tsx
└── vite-env.d.ts

Dependencies

Main Dependencies

• React - A JavaScript library for building user interfaces.
• React DOM - Serves as the entry point to the DOM and server renderers for React.
• @xyflow/react - A library for building node-based editors and diagrams.
• immer - A library for working with immutable state in JavaScript.
• zustand - A small, fast, and scalable bearbones state-management solution.

Development Dependencies

• TypeScript - A strongly typed programming language that builds on JavaScript.
• Vite - A next-generation front-end tooling.
• Tailwind CSS - A utility-first CSS framework.
• ESLint - A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
• clsx - A utility for constructing className strings conditionally.