Project Documentation: Full-Stack Task Manager Application

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

1. 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

1. 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

1. 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.