Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/cyphernyx/task-tracker-app

A simple task management application built with Angular for the frontend and JSON-server as a mock backend. Angular Crash Course
https://github.com/cyphernyx/task-tracker-app

angular json-server rxjs typescript

Last synced: about 1 month ago
JSON representation

A simple task management application built with Angular for the frontend and JSON-server as a mock backend. Angular Crash Course

Awesome Lists containing this project

README 

        
# My Task Tracker 



> This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.2.



[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)



A simple task management application built with Angular for the frontend and JSON-server as a mock backend. Inspired by [Traversy Media's Angular Crash Course](#attributions)



![Angular](https://img.shields.io/badge/Angular-%23E23237.svg?style=for-the-badge&logo=angular&logoColor=white)

![RxJS](https://img.shields.io/badge/RxJS-%23B31B81.svg?style=for-the-badge&logo=RxJS&logoColor=white)

![TypeScript](https://img.shields.io/badge/TypeScript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) 

![JSON Server](https://img.shields.io/badge/JSON%20Server-purple?style=for-the-badge&logo=json-server)

![Font Awesome](https://img.shields.io/badge/Font%20Awesome-%23339AF0.svg?style=for-the-badge&logo=FontAwesome&logoColor=white) 



## Table of Contents

  * [Features](#features-✨)

  * [Screenshots](#screenshots)

  * [Getting Started](#getting-started-📖)

  * [Technologies Used](#technologies-used-🛠️)

  * [Project Structure](#project-structure-📁)

  * [Additional Notes](#additional-notes-💡)

  * [Contributing](#contributing)

  * [License](#license)

  * [Questions](#questions)






## Features ✨

- **Add Tasks:** Create new task entries with descriptions and optional reminders.

- **Delete Tasks:** Remove tasks as they are completed.

- **Reminder Toggle:** Mark tasks with reminders and update their status.

- **CRUD Operations:** The app supports basic create, read, update, and delete functionalities.



## Screenshots



![image1](./src/assets/maroon_2.png)


![image2](./src/assets/maroon_1.png)


![image3](./src/assets/maroon_3.png)



## Getting Started 📖



### Prerequisites

- Node.js and `npm` (or yarn) – To install dependencies and run `JSON-server`



### Installation

1. Clone this GitHub repository to your local machine. 
 

```sh

git clone https://github.com/CypherNyx/task-tracker-app.git

```

2. Open a terminal or command prompt and navigate to the cloned repository's directory.

```

cd task-tracker

```

3. Run the install command in your terminal

```

npm install

``` 



### Running the Development Servers

1. Start JSON-server (in a separate terminal):

```

npm run server

```

This will start the mock backend on port 5000.



2. Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.



## Technologies Used 🛠️



* Frontend:

  * Angular (version 17.3.0)

  * Font Awesome (for icons)

* Backend:

  * JSON-server

* Other:

  * RxJS

  * TypeScript



## Project Structure 📁



* `src/app` - Contains your Angular components, services, etc.

* `db.json` - The data file for your JSON-server.



## Additional Notes 💡



### Code scaffolding



Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.



### Build



Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.



### Running unit tests



Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).



### Running end-to-end tests



Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.



### Further help



To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.










## Contributing

Pull requests are welcome. Please open an issue first to discuss any proposed changes or additions.





### Attributions



* **Angular Crash Course**:  [Link to YouTube Tutorial](https://www.youtube.com/watch?v=3dHNOWTI7H8&ab_channel=TraversyMedia) by [Traversy Media](https://www.youtube.com/@TraversyMedia)

* **Background Image** generated using the [Haikei App](https://app.haikei.app/)

* **Libraries:**

  * Angular-fontawesome: [Link](https://github.com/FortAwesome/angular-fontawesome)



## License

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

  

  https://opensource.org/licenses/MIT 
 

  This project is open source and available under the MIT License.







  ## Questions

  GitHub [CypherNyx](https://github.com/CypherNyx)


  Email: [email protected]