Skip to content

Latest commit

 

History

History
98 lines (68 loc) · 4.33 KB

README.md

File metadata and controls

98 lines (68 loc) · 4.33 KB
Raw

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.