📋 Project Management A modern and intuitive Project Management application built with React, Vite, and Tailwind CSS. The application allows users to create and manage projects, organize tasks within each project, and keep track of important project information such as descriptions and due dates.
✨ Features 📁 Create new projects 📝 Add project descriptions 📅 Set project due dates 🔎 Select and view projects 🗑️ Delete projects ✅ Add tasks to projects ❌ Delete tasks 🛡️ Form validation 💬 User-friendly validation modals 📱 Responsive user interface 🎨 Modern UI built with Tailwind CSS ⚛️ Component-based React architecture 🛠️ Tech Stack React — UI development Vite — Fast development environment and build tool Tailwind CSS — Styling JavaScript / JSX — Application logic ESLint — Code quality PostCSS — CSS processing
🚀 Getting Started Prerequisites Make sure you have Node.js and npm installed. Check your versions:
node --version npm --version
-
Clone the repository git clone https://github.com/Mohammadalijafari/ProjectManagement.git
-
Navigate to the project cd ProjectManagement
-
Install dependencies npm install
-
Start the development server npm run dev
Vite will provide a local development URL in your terminal. Open that URL in your browser to start using the application.
📦 Available Scripts Start Development Server npm run dev
Starts the Vite development server. Build for Production npm run build
Creates an optimized production build. Preview Production Build npm run preview
Previews the production build locally. Run ESLint npm run lint
Checks the project for linting and code-quality issues.
🔄 How to Use Create a Project Click Add Project in the sidebar. Enter the project title. Enter a description. Select a due date. Save the project. Select a Project Click a project from the sidebar to view its details. The selected project displays its: Title Description Due date Tasks Add a Task Enter a task in the task input and add it to the selected project. Delete a Task Use the delete/clear action associated with a task to remove it. Delete a Project Open a project and use the Delete action to remove it.
🎨 Styling The application uses Tailwind CSS for its user interface. Tailwind provides utility classes for: Layout Spacing Typography Colors Borders Hover states Responsive design The project also uses PostCSS as part of its CSS processing pipeline.
🔮 Future Improvements Some potential improvements for future versions include: Save projects to localStorage Edit existing projects Edit existing tasks Mark tasks as completed Add task priorities Add task due dates Search projects Filter tasks Project progress indicators Drag-and-drop task management Authentication Backend API Database integration Dark mode Automated tests Deployment
🤝 Contributing Contributions are welcome! If you'd like to contribute:
Fork the repository. Create a new branch. git checkout -b feature/my-feature
Make your changes. Run the linter. npm run lint
Build the project. npm run build
Commit your changes. git commit -m "feat: add my feature"
Push your branch. git push origin feature/my-feature
Open a Pull Request.
🐛 Bug Reports If you find a bug, please open an issue and include: A description of the problem Steps to reproduce it Expected behavior Actual behavior Screenshots, if applicable 📄 License No license is currently included in this repository. If you plan to distribute the project as open-source software, consider adding an appropriate license.
👨💻 Author Mohammadali Jafari GitHub: Mohammadalijafari
⭐ Support If you like this project, consider giving it a ⭐ on GitHub. Repository: https://github.com/Mohammadalijafari/ProjectManagement
Built with ❤️ using React, Vite & Tailwind CSS