Trello Clone
Krello is a trello clone built with Svelte, Appwrite and Flowbite
Overview
Krello is a task management app built with SvelteKit, Appwrite, Flowbite, and Tailwind. It is a clone of the popular task management application Trello. The app allows users to easily rearrange and organize tasks through drag and drop functionality, create public and private boards for sharing or team collaboration, and access the app without the need for an account. It also offers enhanced task editing capabilities with the Quill rich text editor, real-time comments and collaboration, and the ability to assign labels, priority, and descriptions to tasks.
Features
- Drag and Drop Tasks: Rearrange and organize tasks easily by dragging and dropping them within the board.
- Public and Private Boards: Accessible to all users, public boards are for sharing while private boards are reserved for team members only.
- Anonymous Login: Dive into task management and project collaboration without the need for an account. Experience quick and hassle-free access.
- Enhanced Editing with Quill: Utilize the powerful Quill rich text editor to create visually appealing and well-structured task descriptions. Add formatting for effective communication.
- Real-time Comments and Collaboration: Engage in real-time collaboration and feedback by leaving comments on tasks, promoting seamless teamwork.
- Assign Labels, Priority, & Descriptions: Categorize tasks with labels, set priorities to indicate importance or urgency, and add descriptions for comprehensive task information.
Summary
Krello is a task management app built as a clone of Trello. It offers features such as drag and drop tasks, public and private boards, anonymous login, enhanced editing with Quill, real-time comments and collaboration, and the ability to assign labels, priority, and descriptions to tasks. The app is built with SvelteKit, Appwrite, Flowbite, and Tailwind and can be installed locally by cloning the repository and setting up the required dependencies and Appwrite configurations.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Flowbite
Build websites even faster with components on top of Tailwind CSS. Start developing with an open-source library of over 600+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Yup
Yup is a schema builder for runtime value parsing and validation. It provides a declarative way to define validation schemas with support for complex nested objects, array validation, and custom validation rules. Often used with Formik for form validation.