Project Documentation: Full-Stack Task Manager Application

Keshav Rajpoot — Sat, 12 Jul 2025 09:21:14 +0000

Developer: Keshav Singh Rajpoot Frontend: Angular 17 (Standalone API) + Angular Material Backend: Node.js + Express + MongoDB (Atlas)Tools Used: Postman, VS Code, MongoDB Atlas, JWT, Angular CLI, Material Design

Objective-
To build a secure, dynamic, and stylish full-stack Task Manager App as part of a professional software engineering portfolio.

*1. Project Kickoff & Tech Stack Setup
*
We began by identifying what’s typically expected from internal tools engineers:

Decided Tech Stack:

Angular 17 (Standalone Component API)
Node.js + Express (Backend)
MongoDB Atlas (NoSQL database)
JWT for authentication
Angular Material for modern UI

Tools Installed:

Angular CLI
VS Code
Postman
MongoDB Atlas

Backend Development

Challenges Faced:

Initial MongoDB Atlas connection failed due to IP whitelisting
JWT authentication setup required correct handling of token storage and middleware
Solutions:
Whitelisted local development IP securely via MongoDB Atlas for server connection
Implemented secure authentication using bcrypt and JWT
Used environment variables via dotenv for sensitive data like DB URI and JWT secret
Verified auth middleware works correctly with protected routes

Features Built:

User Registration and Login APIs
JWT-based session handling and protection
Task Create, Read, and Delete APIs
Proper error handling for invalid input and auth failure
Angular Frontend (Standalone)

Challenges Faced:

Angular CLI created .ts files using standalone API instead of classic .component.ts files
Workspace-related errors like "This command is not available outside a workspace"
Component import paths and AuthService injection failures
No app.module.ts required a new approach to routing and providers

Solutions:

Used --standalone flag during component creation to ensure proper Angular 17 structure.
Rewrote routing logic inside app.routes.ts using provideRouter.
Used CommonModule and FormsModule with standalone components.
Corrected path issues using relative imports like ../../services/auth.service

Features Implemented:

Fully functional login page using Angular Material UI
Dashboard with task listing, add, and delete features
JWT token stored in localStorage and used in protected API requests
Error messages using MatSnackBar for feedback

UI Upgrade with Angular Material

We integrated Angular Material to enhance UI/UX across the app.

Modules Used:

MatFormFieldModule, MatInputModule, MatCardModule, MatButtonModule
MatSelectModule, MatSnackBarModule, MatIconModule

Enhancements:

Login card with modern form inputs and validation
Dashboard with Material-styled task cards
Dynamic priority tags with custom colors (Low, Medium, High)
Snackbar feedback on login success/failure and task actions
Blue background for the login landing screen

Learning Outcomes & Tools Mastered

What We Learned:

Angular 17 standalone structure, including routing and component injection
JWT authentication with Angular and Node.js
Material UI integration with standalone components
Debugging CLI setup, module resolution, and server-client communication
Building secure, user-authenticated full-stack apps

Tools Mastered:

Angular CLI and standalone architecture
Angular Material and layout practices
JWT integration with localStorage
Postman for backend testing
MongoDB Atlas for secure cloud DB hosting

Next Steps (Future Enhancements)

Add edit & completion toggles for tasks
Add route guards for protected components
Deploy Angular frontend to Netlify
Deploy Node.js backend to Render
Include unit tests with Jasmine & Karma

Conclusion: This full-stack Task Manager app reflects a complete development lifecycle — including secure authentication, API building, Angular Material UI, and production-grade best practices. It’s structured, scalable, and showcases real-world problem solving from setup to completion.

DEV Community: Keshav Rajpoot

Project Documentation: Full-Stack Task Manager Application