This frontend application built with Angular serves as a robust task management system designed to streamline task organization and tracking. It features CRUD (Create, Read, Update, Delete) operations for tasks, advanced filtering and sorting capabilities, dynamic user interface components using Angular Material, and seamless integration with backend APIs for efficient data management. The application offers intuitive task duplication, notes management, and status toggling functionalities to enhance user productivity and workflow management.
- Features
- Technologies Used
- Prerequisites
- Setup Instructions
- Folder Structure
- Development
- Build and Deployment
- Contributing
- License
- Authors
- Project Link
- Task Management: View, add, edit, delete, and duplicate tasks.
- Sorting and Filtering: Sort tasks by various criteria and filter tasks based on search queries.
- Responsive Design: Ensures the application works well on different devices and screen sizes.
- Angular Material: Utilizes Angular Material for UI components and theming.
- Angular: Version 12
- Angular Material: UI component library
- RxJS: Reactive Extensions for JavaScript
- TypeScript: Typed superset of JavaScript
Before starting, ensure you have the following installed:
- Node.js (v14.x or higher)
- npm (v6.x or higher)
- Angular CLI: Install globally using
npm install -g @angular/cli
- Clone the repository
git clone https://github.com/username/repository.git cd repository/
- Install project dependencies:
npm install
- Run the Application:
ng serve
- Access the application in your browser: http://localhost:4200
- src/app/: Contains the main application components, services, and modules.
- src/assets/: Static assets such as images, fonts, etc.
- src/environments/: Environment configuration files (e.g., environment.prod.ts, environment.ts).
The project organizes components, services, and modules under the src/app/
directory:
- Components: Found in
src/app/components/
, each manages specific UI and functionality aspects. - Services: Located in
src/app/services/
, they handle data retrieval, manipulation, and backend API communication. - Modules: Modules like
AppModule
and feature modules group related components and services.
- TaskService: Manages CRUD operations for tasks using Angular's HttpClient module to interact with the backend API.
- Angular Router: Configured in
src/app/app-routing.module.ts
for seamless navigation between components and views.
- Data Binding: Utilizes Angular's two-way data binding and reactive forms (
@angular/forms
) for efficient data handling and validation.
To compile the application for production:
- Build Command: Execute the following Angular CLI command to create a production build:
ng build --prod
The build artifacts will be stored in the dist/
directory.
Contributions are welcome! Fork the repository and submit a pull request with your enhancements or bug fixes.
This project is licensed under the MIT License - see the LICENSE file for details.
The application is deployed and accessible at: TaskWebApp