{"id":21101785,"url":"https://github.com/elvan/project-planner-app-vue-example","last_synced_at":"2026-03-19T18:52:50.805Z","repository":{"id":222348697,"uuid":"756877092","full_name":"elvan/project-planner-app-vue-example","owner":"elvan","description":"This project is a Vue.js application designed to help users manage and track their projects effectively. It allows for the addition, update, and deletion of projects, along with dynamic filtering to view projects based on their completion status.","archived":false,"fork":false,"pushed_at":"2024-02-13T16:46:04.000Z","size":274,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T02:43:56.163Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elvan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-13T13:39:03.000Z","updated_at":"2024-12-14T05:47:38.000Z","dependencies_parsed_at":"2024-02-13T18:57:42.461Z","dependency_job_id":null,"html_url":"https://github.com/elvan/project-planner-app-vue-example","commit_stats":null,"previous_names":["elvan/project-planner-app-vue-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elvan%2Fproject-planner-app-vue-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elvan%2Fproject-planner-app-vue-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elvan%2Fproject-planner-app-vue-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elvan%2Fproject-planner-app-vue-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elvan","download_url":"https://codeload.github.com/elvan/project-planner-app-vue-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243544535,"owners_count":20308171,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T23:49:14.840Z","updated_at":"2026-01-02T07:13:03.055Z","avatar_url":"https://github.com/elvan.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Project Planner\n\n![Screenshot](https://raw.githubusercontent.com/elvan/project-planner-app-vue-example/main/_screenshots_/Screenshot%202024-02-13%20233809.png)\n\n---\n\n![Screenshot](https://raw.githubusercontent.com/elvan/project-planner-app-vue-example/main/_screenshots_/Screenshot%202024-02-13%20233826.png)\n\n---\n\n![Screenshot](https://raw.githubusercontent.com/elvan/project-planner-app-vue-example/main/_screenshots_/Screenshot%202024-02-13%20233837.png)\n\n---\n\n![Screenshot](https://raw.githubusercontent.com/elvan/project-planner-app-vue-example/main/_screenshots_/Screenshot%202024-02-13%20233850.png)\n\n---\n\n![Screenshot](https://raw.githubusercontent.com/elvan/project-planner-app-vue-example/main/_screenshots_/Screenshot%202024-02-13%20233902.png)\n\n## Description\n\nThis project is a Vue.js application designed to help users manage and track their projects effectively. It allows for the addition, update, and deletion of projects, along with dynamic filtering to view projects based on their completion status. The project leverages Vue components, routing, and a mock JSON server to simulate a full-stack application's functionality in a client-side environment.\n\n## Features\n\n- **Project Management** - Users can add new projects, update existing ones, and delete them as needed. Each project entry includes a title, details, and a completion status to provide a comprehensive overview.\n\n  - **Add Projects**: Users can submit new projects via a dedicated form.\n  - **Edit Projects**: Each project can be updated with new information or marked as complete.\n  - **Delete Projects**: Projects can be removed from the list.\n\n- **Dynamic Project Display and Filtering** - The application supports dynamic filtering of projects based on their completion status, enhancing usability by allowing users to focus on active or completed projects.\n\n  - **Filtering Functionality**: Projects can be filtered to display all, completed, or ongoing projects.\n\n- **UI Enhancements and Usability** - With the integration of Material Icons and a custom navigation bar, the application offers an intuitive and user-friendly interface.\n  - **Material Icons**: Used for delete, edit, and completion actions on each project.\n  - **Navigation Bar**: Facilitates easy navigation between adding a new project and viewing existing projects.\n\n## Installation\n\nTo set up the project locally, follow these steps:\n\n### Prerequisites\n\n- Node.js and npm installed on your machine.\n- Vue CLI installed globally (`npm install -g @vue/cli`).\n\n### Environment Setup\n\n1. Clone the repository to your local machine.\n2. Navigate to the project directory.\n\n### Installation Commands\n\n```bash\n# Install dependencies\nnpm install\n\n# Start the JSON server\nnpm run json-server\n\n# Serve the application on a local development server\nnpm run serve\n```\n\n## Usage\n\nAfter setting up the project, you can use it by navigating to `http://localhost:8080` in your web browser. Here you can:\n\n- **Add a New Project**: By navigating to the 'Add a New Project' section through the navigation bar.\n- **Edit an Existing Project**: Click on the edit icon beside any project to update its details or mark it as complete.\n- **Delete a Project**: Click on the delete icon to remove a project from the list.\n- **Filter Projects**: Use the filter options to toggle between viewing all, completed, or ongoing projects.\n\nFor more specific interactions or to understand the underlying code, refer to the project files in the `src` directory, particularly the `views` and `components` folders for Vue components.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felvan%2Fproject-planner-app-vue-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felvan%2Fproject-planner-app-vue-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felvan%2Fproject-planner-app-vue-example/lists"}