my-desktop

KO | EN

gitlite — search

#javascript #llm #golang #go #android #linux #nodejs #windows #awesome #vue #awesome-list #pytorch #ios #openai

(★ 106)

A page written in react hooks and typescript that mimics the macOS desktop

File Explorer

Download Latest Version (.zip)

- - ci.yml
- - App.scss
  - index.scss
- App.tsx
- favicon.ico
- main.tsx
- typing.ts
- react-desktop.d.ts
- vite-env.d.ts
.editorconfig
.eslintignore
.eslintrc.json
.gitconfig
.gitignore
.prettierignore
.prettierrc
.stylelintrc.js
index.html
package.json
pnpm-lock.yaml
README.md
tsconfig.json
vite.config.ts

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Alt](https://repobeats.axiom.co/api/embed/5559f0806437d316b453d1e68dbb2ef691ab0a05.svg "Repobeats analytics image")

This is the first project I wrote using React Hooks and Typescript.

It's not as simple as React isn't a tech stack I'm familiar with, Typescript is good but I'm also unskilled, stepping over a lot of potholes in between. Also since my computer is a windows system and I can't find the relevant UI diagram online, it took me a long time to build the prototype. But the process was also very interesting and challenging, especially when it came to implementing the various animations of the macOS desktop.

This project is just getting started, so if you're interested why not star and watch it!

# Blog

[React Hooks + TypeScript 做个仿 MacOS 桌面（一）：项目初始化](https://zhuanlan.zhihu.com/p/144620075)

[React Hooks + TypeScript 做个仿 MacOS 桌面（二）：实现 Dock 动效](https://zhuanlan.zhihu.com/p/145449585)

[React Hooks + TypeScript 做个仿 MacOS 桌面（三）：点击效果与弹窗](https://juejin.im/post/5ee38cfee51d45784f801db6)

[React Hooks + TypeScript 做个仿 MacOS 桌面（四）：Canvas 实现画图工具](https://juejin.im/post/5eea17b5e51d4573d47d2f88)

my-desktop

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

my-desktop

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README