https://github.com/sakihet/trellith

Tiny Trello Clone PWA Pursuing Simplicity
https://github.com/sakihet/trellith

board command-palette kanban preact preact-signals pwa trello trello-clone

Last synced: 2 days ago
JSON representation

Tiny Trello Clone PWA Pursuing Simplicity

• Host: GitHub
• URL: https://github.com/sakihet/trellith
• Owner: sakihet
• License: mit
• Created: 2023-07-06T12:39:46.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-24T01:30:21.000Z (6 months ago)
• Last Synced: 2024-06-19T03:07:20.729Z (5 months ago)
• Topics: board, command-palette, kanban, preact, preact-signals, pwa, trello, trello-clone
• Language: TypeScript
• Homepage: https://trellith.sakih.net/
• Size: 1.84 MB
• Stars: 12
• Watchers: 2
• Forks: 2
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Trellith

[![test](https://github.com/sakihet/trellith/actions/workflows/test.yaml/badge.svg)](https://github.com/sakihet/trellith/actions/workflows/test.yaml)

![trellith](screenshots/trellith-with-frame.png)

[Trellith](https://trellith.sakih.net/) is a tiny Trello clone PWA pursuing simplicity. It's a task management tool with a board view format, designed for individuals. You can organize your projects into boards like a kanban using lists and cards.

All you need to get started with the app is to just open the URL. There is no need to create any accounts.

The data is only stored in your browser's localStorage, not in the cloud. You can own your data.

Trellith works offline once you open the app. It operates normally even in unstable network conditions.

## Motivation

This is a project aimed at improving frontend and web design skills while creating a practical product.

## Discraimer

Since data is stored in localStorage, the main thread gets blocked, and there is a 5MB size limit.

## Screenshots

||light|dark|

| - | - | - |

|board|![board-light](screenshots/trellith-board-light.png)|![board-dark](screenshots/trellith-board-dark.png)|

|card |![card-light](screenshots/trellith-card-light.png)|![card-dark](screenshots/trellith-card-dark.png)|

|index|![index-light](screenshots/trellith-index-light.png)|![index-dark](screenshots/trellith-index-dark.png)|

## Features

Trellith includes the core features of Trello:

- Create boards

- Create lists

- Create cards

- Rename items

- Sort items by Drag and Drop

- Separator cards

Additional features:

- Light Mode / Dark Mode

- Import / Export

- Work offline

## Tech

- [Preact](https://preactjs.com/)

- [Preact Signals](https://preactjs.com/guide/v10/signals/)

- [TypeScript](https://www.typescriptlang.org/)

- [uuid](https://github.com/uuidjs/uuid)

- [Vite](https://vitejs.dev/)

- [Vitest](https://vitest.dev/)

- [vite-plugin-pwa](https://vite-pwa-org.netlify.app/)

- [wouter](https://github.com/molefrog/wouter)

## CSS

Trellith is designed by Plain Old CSS. It doesn't use any CSS frameworks for minimizing future maintenance costs.

- reset.css

  - Remove default styles

- base.css

  - Add basic styles

- token.css

  - Manage design tokens by CSS custom properties

- utility.css

  - Utility-First CSS

- layout.css

  - Reusable CSS for creating layouts

- pattern.css

  - Reusable CSS for creating common UI

## Icons

[Material Symbols](https://fonts.google.com/icons)

## Contributing

If you find any bugs or have feature requests, please create an issue and let me know.

## Development

```

npm install

npm run dev

```

## License

[MIT](./LICENSE)