Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fatemzh/mykanbanboard-electron

Explore my Kanban Board app, crafted with React, Vite, Tailwind CSS, Electron, and React DnD. It's a straightforward tool designed for efficient project and task management, suitable for developers at any skill level. Simplify your workflow and enhance productivity.
https://github.com/fatemzh/mykanbanboard-electron

drag-and-drop electron electron-app front-end-application-framework front-end-development front-end-project kanban-board kanban-board-application kanbanflow react react-vite reactdnd tailwindcss vitejs

Last synced: 4 days ago
JSON representation

Explore my Kanban Board app, crafted with React, Vite, Tailwind CSS, Electron, and React DnD. It's a straightforward tool designed for efficient project and task management, suitable for developers at any skill level. Simplify your workflow and enhance productivity.

Awesome Lists containing this project

README 

        
________________________________________________________________________________

                              Version Française

________________________________________________________________________________



# Application Kanban Board đź“‹ 



Bienvenue sur mon application Kanban Board ! Une interface intuitive et facile à utiliser, conçue pour vous aider à organiser vos tâches et vos projets de manière efficace. Réalisée avec React, Vite, Tailwind CSS et Electron, cette application est parfaite pour les débutants désireux de se plonger dans React et ses bibliothèques. Que vous gériez des tâches personnelles ou collaboriez sur un projet d'équipe, ce tableau Kanban s'adapte à votre flux de travail. Ce projet est basé sur le tutoriel très complet de youtube de @Kliton (@codewithkliton sur youtube) : https://www.youtube.com/watch?v=RG-3R6Pu_Ik&list=LL&index=5&t=2s



## Parcours d'Apprentissage đź“–



Ce projet a été développé pendant mon temps personnel comme moyen d'apprendre React et ses bibliothèques associées. Je recommande vivement ce projet à d'autres débutants intéressés par une expérience pratique avec ces technologies.  

Le lien du tutorial de @Kliton : https://www.youtube.com/watch?v=RG-3R6Pu_Ik&list=LL&index=5&t=2s



## Fonctionnalités 🚀



Opérations sur les colonnes : Ajouter, titrer, supprimer et déplacer les colonnes pour personnaliser votre tableau.



Gestion des tâches : Créer, modifier, supprimer et déplacer facilement les tâches au sein des colonnes.



Drag-and-Drop Intuitif : Réorganisez les colonnes et les tâches grâce à une interface simple de glisser-déposer.



Design Réactif : Grâce à Tailwind CSS, profitez d'un design adaptatif et convivial sur tous les appareils.



Application de bureau : Fonctionne comme une application de bureau autonome avec Electron pour une expérience sans couture.  



## Pour Commencer 🌟



Pour démarrer avec cette application Kanban Board, suivez ces étapes :



1. Clonez le dépôt >> git clone https://github.com/fatemzh/kanbanbboard-electron



2. Installez les dépendances >> npm install



3. DĂ©marrez le serveur Vite >> npm run dev



4. Lancez l'application Electron >> npm run electron



## Technologies Utilisées 🛠️



React : Pour construire une interface utilisateur dynamique et interactive.



React DnD : Pour ajouter une expérience de glisser-déposer intuitive et performante.



Vite : Pour une expérience de développement optimisée et rapide.



Tailwind CSS : Pour le style avec un CSS utilitaire.



Electron : Pour créer une application de bureau multiplateforme.



## Contribuer 🤝



Vous souhaitez contribuer ? L'application est ouverts aux améliorations et aux nouvelles fonctionnalités ! Un domaine potentiel d'amélioration est l'ajout d'un serveur Node.js pour des fonctionnalités collaboratives. N'hésitez pas à forker le dépôt, faire vos modifications et soumettre une pull request. Améliorons ensemble l'application Kanban Board !  



________________________________________________________________________________

                              English Version

________________________________________________________________________________



# Kanban Board Application đź“‹



Welcome to my Kanban Board Application! A free, user-friendly, drag-and-drop interface designed to help you organize your tasks and projects efficiently. Built with React, Vite, Tailwind CSS, and Electron, this app is perfect for beginners looking to dive into React and its libraries. Whether you're managing personal tasks or collaborating on a team project, this Kanban Board app is flexible to accommodate your workflow.



## Learning Journey đź“–



This project was developed in my personal time as a means to learn React and its associated libraries. I highly recommend this project to other beginners interested in gaining hands-on experience with these technologies.



### Features 🚀



Column Operations: Add, title, delete, and drag-and-drop columns to customize your board.



Task Management: Create, modify, delete, and move tasks easily within columns.



Intuitive Drag-and-Drop: Rearrange columns and tasks with a simple drag-and-drop interface.



Responsive Design: Thanks to Tailwind CSS, enjoy a mobile-friendly and responsive design across all devices.



Desktop App: Run as a standalone desktop application with Electron for a seamless experience.



## Getting Started 🌟



To get started with my Kanban Board Application, follow these steps:



1. Clone the repository >> git clone https://github.com/fatemzh/kanbanbboard-electron



2. Install dependencies >> npm install



3. Start the Vite server >> npm run dev



4. Launch the Electron app >> npm run electron



## Technologies Used 🛠️



React: For building a dynamic and interactive UI.



React DnD: For adding an intuitive and performant drag-and-drop experience.



Vite: For an optimized and fast development experience.



Tailwind CSS: For styling with utility-first CSS.



Electron: For creating a cross-platform desktop application.



## Contributing 🤝



Looking to contribute? We're open to improvements and new features! A potential area for enhancement is adding a Node.js server for collaborative features. Feel free to fork the repository, make your changes, and submit a pull request. Let's make Kanban Board Application even better together!