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 4 hours ago
JSON representation

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

Host: GitHub
URL: https://github.com/cyphernyx/task-tracker-app
Owner: CypherNyx
Created: 2024-04-03T16:28:20.000Z (8 months ago)
Default Branch: main
Last Pushed: 2024-04-08T21:28:48.000Z (7 months ago)
Last Synced: 2024-04-10T00:19:11.168Z (7 months ago)
Topics: angular, json-server, rxjs, typescript
Language: TypeScript
Homepage:
Size: 2.96 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

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]