Add a task tracker CLI project

feat/projects-list
Kamran Ahmed 4 months ago
parent 51dd3c48ba
commit 05d9806c1c
  1. 7
      src/data/projects/stock-cli.md
  2. 105
      src/data/projects/task-tracker-cli.md
  3. 49
      src/pages/projects/[projectId].astro
  4. 14
      src/styles/global.css

@ -19,12 +19,6 @@ roadmapIds:
- 'backend'
---
# Task Tracker CLI
Build a command line interface (CLI) to track your tasks and manage your to-do list.
## Description
You are required to build a command line interface (CLI) application that allows users to manage their tasks and to-do list. The application should be able to perform the following operations:
- Add a new task
@ -34,3 +28,4 @@ You are required to build a command line interface (CLI) application that allows
- Update a task
- Search for a task
- Filter tasks by status (done, pending)

@ -19,18 +19,101 @@ roadmapIds:
- 'backend'
---
# Task Tracker CLI
Task tracker is a project used to track and manage your tasks. In this task, you will build a simple command line interface (CLI) to track what you need to do, what you have done, and what you are currently working on. This project will help you practice your programming skills, including working with the filesystem, handling user inputs, and building a simple CLI application.
Build a command line interface (CLI) to track your tasks and manage your to-do list.
## Requirements
## Description
The application should run from the command line, accept user actions and inputs as arguments, and store the tasks in a JSON file. The user should be able to:
You are required to build a command line interface (CLI) application that allows users to manage their tasks and to-do list. The application should be able to perform the following operations:
- Add a new task
- Add, Update, and Delete tasks
- Mark a task as in progress or done
- List all tasks
- Mark a task as done
- Delete a task
- Update a task
- Search for a task
- Filter tasks by status (done, pending)
- List all tasks that are done
- List all tasks that are not done
- List all tasks that are in progress
Here are some constraints to guide the implementation:
- You can use any programming language to build this project.
- Use positional arguments in command line to accept user inputs.
- Use a JSON file to store the tasks in the current directory.
- The JSON file should be created if it does not exist.
- Use the native file system module of your programming language to interact with the JSON file.
- Do not use any external libraries or frameworks to build this project.
- Ensure to handle errors and edge cases gracefully.
### Example
The list of commands and their usage is given below:
```bash
# Adding a new task
task-cli add "Buy groceries"
# Output: Task added successfully (ID: 1)
# Updating and deleting tasks
task-cli update 1 "Buy groceries and cook dinner"
task-cli delete 1
# Marking a task as in progress or done
task-cli mark-in-progress 1
task-cli mark-done 1
# Listing all tasks
task-cli list
# Listing tasks by status
task-cli list done
task-cli list todo
task-cli list in-progress
```
### Task Properties
Each task should have the following properties:
- `id`: A unique identifier for the task
- `description`: A short description of the task
- `status`: The status of the task (`todo`, `in-progress`, `done`)
- `createdAt`: The date and time when the task was created
- `updatedAt`: The date and time when the task was last updated
Make sure to add these properties to the JSON file when adding a new task and update them when updating a task.
<hr />
## Getting Started
Here are a few steps to help you get started with the Task Tracker CLI project:
### Set Up Your Development Environment
- Choose a programming language you are comfortable with (e.g., Python, JavaScript, etc.).
- Ensure you have a code editor or IDE installed (e.g., VSCode, PyCharm).
### Project Initialization
- Create a new project directory for your Task Tracker CLI.
- Initialize a version control system (e.g., Git) to manage your project.
### Implementing Features
- Start by creating a basic CLI structure to handle user inputs.
- Implement each feature one by one, ensuring to test thoroughly before moving to the next e.g. implement adding task functionality first, listing next, then updating, marking as in progress, etc.
### Testing and Debugging
- Test each feature individually to ensure they work as expected. Look at the JSON file to verify that the tasks are being stored correctly.
- Debug any issues that arise during development.
### Finalizing the Project
- Ensure all features are implemented and tested.
- Clean up your code and add comments where necessary.
- Write a good readme file on how to use your Task Tracker CLI.
<hr />
By the end of this project, you will have developed a practical tool that can help you or others manage tasks efficiently. This project lays a solid foundation for more advanced programming projects and real-world applications.
Happy coding!

@ -24,6 +24,8 @@ import {
ProjectFrontmatter,
} from '../../lib/project';
import AstroIcon from '../../components/AstroIcon.astro';
import MarkdownFile from '../../components/MarkdownFile.astro';
import Github from '../github.astro';
export async function getStaticPaths() {
const projects = await getAllProjects();
@ -47,6 +49,7 @@ const projectData = project.frontmatter as ProjectFrontmatter;
let jsonLdSchema = [];
const ogImageUrl = projectData?.seo?.ogImageUrl || '/images/og-img.png';
const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/projects/${projectId}.md`;
---
<BaseLayout
@ -63,7 +66,7 @@ const ogImageUrl = projectData?.seo?.ogImageUrl || '/images/og-img.png';
<div class='bg-gray-50'>
<div class='container'>
<div
class='my-3 flex flex-row items-center gap-1.5 rounded-md border bg-white px-2 py-2 text-sm font-medium'
class='my-3 flex flex-row items-center gap-1.5 rounded-md border bg-white px-2 py-2 text-sm'
>
<AstroIcon icon='map' class='h-4 w-4' />
Relevant roadmaps to visit <span class='flex flex-row gap-1'>
@ -80,14 +83,46 @@ const ogImageUrl = projectData?.seo?.ogImageUrl || '/images/og-img.png';
</span>
</div>
<div class='mb-3 overflow-hidden rounded-md border bg-white p-5'>
<div class='-m-5 p-4'>
<div class='mb-2 flex flex-row gap-1.5'>
<div class='mb-3 overflow-hidden rounded-lg border bg-white p-5'>
<div class='relative -mx-2 -mt-2 mb-5 rounded-lg bg-gray-50 p-5'>
<div class='absolute right-2 top-2'>
<Badge variant='yellow' text={projectData.difficulty} />
<Badge variant='blue' text={projectData.nature} />
</div>
<h1 class='text-2xl font-semibold'>{projectData.title}</h1>
<p class='text-gray-500'>{projectData.description}</p>
<div class='mb-5'>
<h1 class='mb-1.5 text-3xl font-semibold'>{projectData.title}</h1>
<p class='text-gray-500'>{projectData.description}</p>
</div>
<div class='mt-4'>
<p class='mb-2 text-sm text-gray-500'>Skills you will practice:</p>
<div class='flex flex-row gap-1.5'>
{
projectData.skills.map((skill) => (
<Badge variant='green' text={skill} />
))
}
</div>
</div>
</div>
<div
class='prose max-w-full prose-h2:mb-3 prose-h2:mt-5 prose-h3:mb-1 prose-h3:mt-5 prose-p:mb-2 prose-pre:my-3 prose-ul:my-3.5 prose-hr:my-5 [&>ul>li]:my-1'
>
<project.Content />
</div>
<div
class='mt-5 flex items-center justify-center rounded-lg bg-yellow-100 p-3 flex-wrap'
>
<AstroIcon class='mr-2 inline-block h-5 w-5' icon='github' />
Found a mistake? Help us improve this by
<a
class='underline underline-offset-2 ml-1'
href={githubUrl}
target='_blank'
>
editing this project
</a>
</div>
</div>
</div>

@ -74,6 +74,16 @@ a > code:before {
)
hsla(203, 11%, 95%, 0.4);
}
.striped-bg {
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 5px,
hsla(0, 0%, 0%, 0.025) 5px,
hsla(0, 0%, 0%, 0.025) 10px
);
background-size: 200% 200%;
}
.striped-loader {
background-image: repeating-linear-gradient(
@ -92,8 +102,8 @@ a > code:before {
-45deg,
transparent,
transparent 5px,
hsla(0, 0%, 0%, 0.20) 5px,
hsla(0, 0%, 0%, 0.20) 10px
hsla(0, 0%, 0%, 0.2) 5px,
hsla(0, 0%, 0%, 0.2) 10px
);
background-size: 200% 200%;
animation: barberpole 15s linear infinite;

Loading…
Cancel
Save