Skip to content

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.

Notifications You must be signed in to change notification settings

fatemzh/MyKanbanBoard-Electron

Repository files navigation


                          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!

About

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.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages