Angular Frontend Web Developer
Project: Interactive Task Management Board
• Objective: Design and develop a responsive, single-page task management application,
similar to a Kanban board, using Angular.
• Description: Create a web-based task board where users can add tasks and move them
between different status columns. The application will feature a clean, intuitive drag-and-
drop interface for managing tasks. The entire application will be built with modern
development practices to be user-friendly and fully responsive.
• Technologies to use: Angular, Bootstrap, HTML, CSS, JavaScript, Angular CDK (for
Drag and Drop), Responsive Design, UX/UI Design.
Week 1: Project Setup and Board Layout
Tasks:
• Set up Angular Project: Install Angular and use the Angular CLI to generate a new
project with all necessary dependencies configured.
• Design Wireframes: Create simple wireframes for the main task board, including the
layout for columns (e.g., 'To Do,' 'In Progress,' 'Done') and the appearance of individual
task cards.
• Develop Basic Layout: Build the static layout of the task board using Angular
components, HTML, and Bootstrap's grid system to create the columns.
Deliverables:
• A new Angular project, set up and running locally.
• Wireframes detailing the UI for the task board and cards.
• A basic, responsive layout showing the static columns of the task board.
Week 2: Task Creation and Display
Tasks:
• Implement Task Creation Form: Create a form that allows users to add a new task with
a title and description.
• Manage Task State: Develop an Angular service to manage the state of the tasks,
including adding new tasks to an array that represents the 'To Do' column.
• Display Tasks: Dynamically render the tasks from the state service as individual cards
within their respective columns on the board.
Deliverables:
• A functional form for adding new tasks.
• Tasks are successfully added to the application's state.
• The board dynamically displays all created tasks in the correct column.
Week 3: Drag-and-Drop Functionality
Tasks:
• Integrate Angular CDK: Add the Angular Component Dev Kit (CDK) to the project
and import the DragDropModule.
• Implement Drag-and-Drop: Apply drag-and-drop functionality to the task cards,
allowing users to move them seamlessly between the different status columns.
• Update State on Drop: Write the logic to update the task's status in the state
management service when a user drops a card into a new column.
Deliverables:
• The Angular CDK is successfully integrated into the project.
• Task cards can be visually dragged and dropped between columns.
• The application's state correctly reflects the new column and position of the task after
being moved.
Week 4: UI Polishing, Persistence, and Deployment
Tasks:
• Enhance UX/UI: Refine the user interface with smooth CSS animations and transitions
for dragging and dropping tasks. Add visual feedback for user actions.
• Add Local Storage: Use the browser's Local Storage to save the state of the task board,
so tasks and their positions persist after a page refresh.
• Final Testing: Conduct thorough testing of all features, including task creation, drag-
and-drop, and responsiveness on mobile, tablet, and desktop screens.
• Deployment: Deploy the final application to a web hosting service like Netlify, Firebase,
or GitHub Pages.
• Documentation: Write clear documentation for the project, outlining the application
architecture, components, and setup instructions.
Deliverables:
• A polished and enhanced user interface.
• The task board's state is saved and reloaded using Local Storage.
• A fully tested and functional task management application.
• The application is deployed to a live URL.
• Complete project documentation.
