🧠 Smart Task Priority Planner
A modern React-based task planner that helps users manage tasks efficiently using priority levels, dynamic UI styling, and smooth interactions. Built to showcase clean frontend architecture, React hooks, and visually appealing UI — perfect for portfolios and LinkedIn demos.
🚀 Features
- Add tasks with High / Medium / Low priority
- Dynamic background and badge colors based on task priority
- Mark tasks as Completed / Undo
- Delete tasks instantly
- Dark-themed UI inspired by modern LinkedIn-style design
- Fully responsive layout
- Smooth hover effects and transitions
🛠️ Tech Stack
- React.js
- JavaScript (ES6+)
- CSS3 (Custom Styling)
- React Hooks (useState)
📂 Project Structure
components/ │── App.js │── TaskForm.js │── TaskList.js │── TaskCard.js │── App.css │── index.js
How It Works
- Tasks are stored in state using useState
- Each task contains:
{ name: string, priority: High | Medium | Low, completed: boolean }
- UI colors and background dynamically update based on task priority
- Component-based structure keeps the code clean and scalable
Getting Started
- Clone the repository
git clone https://github.com/FatimaBashirDev/react-priority-task-hub.git
- Navigate into the project
cd your-repo-name
- Install dependencies
npm install
- Run the app
npm start
Learning Outcomes
This project helped me practice:
- React component architecture
- State management with hooks
- Conditional rendering
- Dynamic styling using props and data attributes
- Building UI that looks good on social platforms like LinkedIn
Future Improvements
- LocalStorage support
- Edit task feature
- Task statistics dashboard
- Deploy on Vercel or Netlify
Connect With Me
If you like this project or have feedback, feel free to connect.
LinkedIn: https://www.linkedin.com/in/fatima-bashir-b9a538346/ Email: fatihere75@gmail.com Portfolio: coming soon
Don’t forget to star the repo if you found it helpful