[GH-ISSUE #1726] [FR] AppFlowy Skeleton UI #660

New issue

Closed

opened 2026-03-23 20:39:21 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 20:39:21 +00:00

Owner

Originally created by @appflowy on GitHub (Jan 19, 2023).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/1726

Originally assigned to: @Ascarbek on GitHub.

Description

Implement the skeleton of AppFlowy as shown below:

Implement the application home page including the sider,header,footer, and content components. In addition, these have been implemented in Flutter, you can refer to the implementation inside to organize your code or you can download the release AppFlowy to experience the interaction.

Prerequisites:

Follow this guide to see AppFlowy design principle and set up your development environment

Required

Use React-TS to build the UI and follow the react design principles
Lint: https://github.com/prettier/prettier - https://prettier.io/docs/en/editors.html
i18n: https://github.com/i18next/react-i18next
State manager: https://github.com/reduxjs/react-redux
unit test: https://github.com/testing-library/react-testing-library
UI should support the Theme
Follow the DDD design principle

Resources :

Impact

None

Additional Context

No response

Originally created by @appflowy on GitHub (Jan 19, 2023). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/1726 Originally assigned to: @Ascarbek on GitHub. ### Description Implement the skeleton of AppFlowy as shown below: <img width="840" alt="image" src="https://user-images.githubusercontent.com/86001920/213371738-d5fa0927-2766-4614-a96f-366e0fecf555.png"> Implement the application home page including the **sider**,**header**,**footer**, and **content** components. In addition, these have been implemented in Flutter, you can refer to the [implementation](https://github.com/AppFlowy-IO/AppFlowy/tree/main/frontend/app_flowy/lib/workspace/presentation/home) inside to organize your code or you can download the release [AppFlowy](https://github.com/AppFlowy-IO/AppFlowy/releases) to experience the interaction. Prerequisites: Follow this [guide](https://www.notion.so/appflowy/Development-6eb9015951834853b394fc360c07a673) to see AppFlowy design principle and set up your development environment # Required 1. Use **React-TS** to build the UI and follow the [react design principles](https://reactjs.org/docs/design-principles.html) 2. Lint: https://github.com/prettier/prettier - [https://prettier.io/docs/en/editors.html](https://prettier.io/docs/en/editors.html) 3. i18n: https://github.com/i18next/react-i18next 4. State manager: https://github.com/reduxjs/react-redux 5. unit test: https://github.com/testing-library/react-testing-library 6. UI should support the Theme 7. Follow the [DDD](https://www.notion.so/AppFlowy-React-c858a3f1bde04f88b75686192f6c8e6e) design principle Resources : 1. [AppFlowy Figma](https://www.figma.com/file/X1R9i5HAFtJSNIKOPPW7yK/AppFlowy-%5BUI%5D%5BMaster%5D?node-id=0%3A1&t=CR4OidJ8GnzNuUrD-1) 2. [AppFlowy release version](https://github.com/AppFlowy-IO/AppFlowy/releases) 3. [About AppFlowy Tauri](https://www.notion.so/About-749332384d1b45cd9ec67c61dda82ffe) ### Impact None ### Additional Context _No response_