Task Tracker

Manage daily tasks, set reminders to meet deadlines, and always stay productive.

⚠ Note: This repository has been archived and is no longer maintained.

This project was implemented to learn and experiment with client-side, component-based applications with Vue.js 3 back in 2022. I'd highly recommend Vue.js to anyone⚡
It is no longer in active use, and there are no current or future plans to contribute to or develop this repository further.

The code and history remain available for reference. Feel free to browse or fork, but please be aware that:
- Issues and pull requests are disabled
- No support or updates will be provided

Thanks for your interest!

Introduction

Task Tracker is an SPA application with CRUD functionality to enable users to manage their daily tasks using a clean and interactive UI. The motivation behind it was to delve into Vue.js 3.

Features:

• Create new tasks to accomplish
• View the current list of tasks ordered by date created
• Update existing tasks as completed
• Delete old tasks
• Set reminders for a task's due date

Technologies

• HTML5
• CSS3
• JavaScript
• Vue.js
• Babel
• JSON server

ℹ This project uses SFCs and follows the Options API style in Vue.js 3

Installing/Getting Started

This section serves to help set up and run the project locally.

Prerequisites

• Node.js
• npm

Here's a great article from Digital Ocean to install Node.js in case you don't have it.

Local Setup

Currently, this repo has a single branch, master.
You can clone this repo with the following command.

• Clone the repository

    # cd your/desired/target/dir
    $ git clone https://github.com/apexDev37/vue-tasks.git
    $ cd Vue-TaskTracker

This will clone a copy of the repository to a given location on your local machine and navigate to the repo's root dir.

Development

Install the required packages and application dependencies.
Run the command below to initiate the install.

• Install dependencies

    # cd project/root/dir
    $ npm install

The command above installs the dependencies in the local node_modules folder.

Start the development server and run the application.
Once started, you can access the application on the default port: http://localhost:8080/
You can run the application with the following command:

• Run the development server

    # cd project/root/dir
    $ npm run serve

This will execute the vue-cli-service serve command defined under serve in the package.json file.

⚠ You'll need to start the backend server for Vue to fetch application data via an api interface. See details in the Database section.

Database

The lightweight JSON Server was used as a quick and easy solution to provide persistent storage for tasks. JSON Server acts a quick back-end for prototyping and mocking. Data can be viewed and easily modified in JSON format, exposed through an API. See taskDB.json to view app data.
Access the mock backend server on the defined port: http://localhost:5000/tasks
You can run the backend server with the following command:

• Run the backend server

    $ npm run backend

This will execute the json-server --watch taskDB.json --port 5000 command defined under backend in the package.json file.

Production

This section serves to help set up the project for a production environment by compiling and minifying files.

You can build for production with the following command:

• Build for production

    $ npm run build

This will execute the vue-cli-service build command defined under build in the package.json file.

Customize configuration

See the official Configuration Reference for additional details.

License

For a repository to indeed be open source, you'll need to license it so that others are free to use, change, and distribute the software. This project ensures this using the MIT license. Find the full original text version of the license here. Follow the instructions to apply the right to your repository.