Loading repository data…
Loading repository data…
SanjayKhatiChhetri / repository
AngularTodoApp showcases modern web development practices using Angular 18. It's part of a comprehensive study comparing front-end frameworks, demonstrating Angular's capabilities in building responsive, feature-rich applications with authentication and CURD operations for task management..
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
A feature-rich, responsive Todo application built with Angular 18, showcasing modern web development practices including user authentication, pwa(mobile/desktop installable) and CRUD operations for task management.
Live Demo: TODOAPP
npm install -g @angular/cli)Clone the repository: git clone https://github.com/your-username/angular-todo-app.git cd angular-todo-app
Install dependencies: npm install'
Set up environment variables:
Create a .env file in the root directory and add the following:
DB_PORT=5432
DB_HOST=localhost
DB_USER=your_db_user
DB_PASSWORD=your_db_password
DB_NAME=your_db_name
JWT_SECRET=your_jwt_secret
Start the development server: ng serve
Open your browser and navigate to http://localhost:4200
angular-todo-app/
├── src/
│ ├── app/
│ │ ├── components/
│ │ │ ├── login/
│ │ │ ├── nav/
│ │ │ ├── password-strength/
│ │ │ ├── register/
│ │ │ ├── todo-create-modal/
│ │ │ ├── todo-edit-modal/
│ │ │ ├── todo-form/
│ │ │ ├── todo-item/
│ │ │ └── todo-list/
│ │ ├── guards/
│ │ ├── interceptors/
│ │ ├── offline-indicator/
│ │ ├── services/
│ │ ├── app.component.ts
│ │ ├── app.component.html
│ │ ├── app.component.css
│ │ ├── app.config.ts
│ │ └── app.routes.ts
│ ├── environments/
│ ├── assets/
│ └── styles.css
└── (configuration files)
├── backend/
│ ├── config/
│ ├── controllers/
│ ├── middleware/
│ ├── models/
│ ├── routes/
│ └── server.js
LoginComponent & RegisterComponent: Handle user authenticationTodoListComponent: Displays and manages the list of todosTodoItemComponent: Represents individual todo itemsTodoFormComponent: Allows creation of new todosTodoEditModalComponent: Modal for editing existing todosOfflineIndicatorComponent: Indicates when the app is offlineAuthService: Manages authentication state and API callsTodoService: Handles CRUD operations for todosThe backend is built with Node.js, Express, and PostgreSQL, providing RESTful endpoints for todo and user management.
+-------------------+
| Client Side |
+-------------------+
| |
| React Frontend |
| |
| +-------------+ |
| | Components | |
| +-------------+ |
| | - Auth | |
| | - ListHeader| |
| | - ListItem | |
| | - Modal | |
| | - ProgressBar |
| +-------------+ |
| | |
| | HTTP/HTTPS
| | |
+-------------------+
|
|
+-------------------+
| Server Side |
+-------------------+
| |
| Express Backend |
| |
| +-------------+ |
| | Routes | |
| +-------------+ |
| | - /todos | |
| | - /signup | |
| | - /login | |
| +-------------+ |
| | |
| | SQL Queries
| | |
+-------------------+
|
|
+-------------------+
| Database |
+-------------------+
| |
| PostgreSQL DB |
| |
| +-------------+ |
| | Tables | |
| +-------------+ |
| | - todos | |
| | - users | |
| +-------------+ |
| |
+-------------------+
Contributions are welcome! If you find any bugs or have suggestions for improvements, please open a issue or submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE.md file for details. Contact If you have any questions or inquiries, please contact Sanjay Khati Chhetri, social can be found at Github Profile under Where to find me section.