文件列表:

LICENSE (1072, 2023-08-09)
app/ (0, 2023-08-09)
app/.nvmrc (8, 2023-08-09)
app/.prettierignore (14, 2023-08-09)
app/.prettierrc.json (28, 2023-08-09)
app/.vscode/ (0, 2023-08-09)
app/.vscode/settings.json (89, 2023-08-09)
app/package-lock.json (689604, 2023-08-09)
app/package.json (1541, 2023-08-09)
app/public/ (0, 2023-08-09)
app/public/favicon.ico (3870, 2023-08-09)
app/public/index.html (1721, 2023-08-09)
app/public/logo192.png (5347, 2023-08-09)
app/public/logo512.png (9664, 2023-08-09)
app/public/manifest.json (492, 2023-08-09)
app/public/robots.txt (67, 2023-08-09)
app/src/ (0, 2023-08-09)
app/src/components/ (0, 2023-08-09)
app/src/components/ErrorBoundary/ (0, 2023-08-09)
app/src/components/ErrorBoundary/ErrorBoundary.tsx (811, 2023-08-09)
app/src/components/ErrorMessage/ (0, 2023-08-09)
app/src/components/ErrorMessage/ErrorMessage.tsx (184, 2023-08-09)
app/src/components/Layout/ (0, 2023-08-09)
app/src/components/Layout/Layout.test.tsx (340, 2023-08-09)
app/src/components/Layout/Layout.tsx (574, 2023-08-09)
app/src/config.ts (783, 2023-08-09)
app/src/index.css (366, 2023-08-09)
app/src/index.tsx (1742, 2023-08-09)
app/src/init.ts (144, 2023-08-09)
app/src/pages/ (0, 2023-08-09)
app/src/pages/EditorPage/ (0, 2023-08-09)
app/src/pages/EditorPage/EditorPage/ (0, 2023-08-09)
app/src/pages/EditorPage/EditorPage/EditorPage.test.tsx (1017, 2023-08-09)
app/src/pages/EditorPage/EditorPage/EditorPage.tsx (2567, 2023-08-09)
app/src/pages/EditorPage/EditorPageContainer/ (0, 2023-08-09)
app/src/pages/EditorPage/EditorPageContainer/EditorPageContainer.tsx (2761, 2023-08-09)
app/src/pages/EditorPage/PropertiesPanel/ (0, 2023-08-09)
... ...

# Image editor An image editor application based on React, TypeScript, and functional programming. Running the application hosted on Vercel. You can visit it here: ## Install instruction - Clone this repo `git clone https://github.com/gibbok/image-editor.git` - Visit the app folder `cd app` - Install dependencies, use `nvm use` and after run `npm i` - Run the project `npm start` - Visit - To run the tests in app folder run `npm t` then press `a` ## Tool overview - Code is written in `TypeScript` and `ReactJS` to provide type safety. - The project is built on top of `Create React App` to speed up the setup. - `React Query` has been used for declarative server-state data management together with `Axios` for data fetching. - `fp-ts` is used as a library for typed functional programming, I use function composition and Option type. - `React Hook Form` is used for forms validation together with `yup` for schema validation, this combination allows a very declarative and very maintainable way to manage forms and their validation avoiding a lot of boilerplates. - `Material UI` is used for UI components, with a fluid layout and lazy loaded images. - For testing `jest` and `React Testing Library` were installed to enable writting tests that resemble the way the app is being used. Utility functions were written mainly in TDD style. - `React Router` is used for routes and handling query strings. ## Architect overview The container components are responsible for effects, including, data fetching, reading and updating query strings, and error handling, the rest of the components are pure and they have no side effects. By using these techniques we can more easily separate concerns and allow quickly testing the majority of our components. The state of the application is kept in query strings so it can be easily tracked with browser history. Users can also bookmark it and open the editor in any state. ## Screenshots Images List:  Image Editor:  ## Video https://user-images.githubusercontent.com/17195702/225958331-3def9c2b-3fb8-46a9-b30f-2ac025347806.mov

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：