{"id":19543217,"url":"https://github.com/codewithalamin/time-tracking-dashboard","last_synced_at":"2026-01-31T10:33:22.185Z","repository":{"id":167727793,"uuid":"639608693","full_name":"CodeWithAlamin/Time-tracking-dashboard","owner":"CodeWithAlamin","description":"An interactive time tracking dashboard for efficient productivity management and tracking daily, weekly, and monthly activities.","archived":false,"fork":false,"pushed_at":"2024-10-30T12:28:44.000Z","size":410,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-11T03:17:58.324Z","etag":null,"topics":["codepapa360","codewithalamin","css3","dashboard","frontend","frontendmentor","javascript","responsivedesign"],"latest_commit_sha":null,"homepage":"https://time-tracking-dashboard-alamin.netlify.app","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeWithAlamin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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,"publiccode":null,"codemeta":null}},"created_at":"2023-05-11T20:28:39.000Z","updated_at":"2024-10-30T12:28:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"bc80b8dc-9213-4bed-8d69-08272f66c9a5","html_url":"https://github.com/CodeWithAlamin/Time-tracking-dashboard","commit_stats":null,"previous_names":["codepapa360/time-tracking-dashboard","codewithalamin/time-tracking-dashboard"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FTime-tracking-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FTime-tracking-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FTime-tracking-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FTime-tracking-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeWithAlamin","download_url":"https://codeload.github.com/CodeWithAlamin/Time-tracking-dashboard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233085614,"owners_count":18622801,"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":["codepapa360","codewithalamin","css3","dashboard","frontend","frontendmentor","javascript","responsivedesign"],"created_at":"2024-11-11T03:18:00.897Z","updated_at":"2026-01-31T10:33:17.149Z","avatar_url":"https://github.com/CodeWithAlamin.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eTime tracking dashboard\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n\nChallenge from [Frontend Mentor](https://www.frontendmentor.io/profile/CodeWithAlamin)\n\n\u003c/div\u003e\n\n\u003ch2 align=\"center\"\u003e\n\n[🚀Live Site](https://time-tracking-dashboard-alamin.netlify.app/)\n|\n[💡Frontend Mentor](https://www.frontendmentor.io/solutions/responsive-time-tracking-dashboard-6LzWWJGKGM)\n\n\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\nA practice project from Frontend Mentor, showcasing a dynamic time tracking dashboard. Implementing HTML, SASS, and JavaScript, it offers daily, weekly, and monthly views with current and previous time data.\n\u003c/p\u003e\n\n\u003ca align=\"center\" href=\"https://time-tracking-dashboard-alamin.netlify.app/\"\u003e\n\n![Screenshot](./screenshots/Time-tracking-dashboard-screenshot-CodeWithAlamin.png)\n\n\u003c/a\u003e\n\n## The challenge\n\nUsers should be able to:\n\n- View the optimal layout for the site depending on their device's screen size\n- See hover states for all interactive elements on the page\n- Switch between viewing Daily, Weekly, and Monthly stats\n- **Bonus:** Utilized JSON data to dynamically fetch and present data\n\n## Built with\n\n- JavaScript\n- Semantic HTML5 markup\n- Mobile-first workflow\n- [SASS - a CSS pre-processor](https://sass-lang.com/)\n- CSS custom properties\n- CSS Grid\n- CSS Flexbox\n- NPM\n- [Webpack - a module bundler](https://webpack.js.org/)\n\n## What I learned\n\nDuring the development of this time tracking dashboard project, I expanded my existing skills and tackled various challenges to create a polished and functional application. Here are some key takeaways from my experience:\n\n- Responsive Design: I further refined my expertise in crafting responsive layouts that seamlessly adapt to different devices and screen sizes. This involved employing CSS media queries and employing flexible layout techniques with Flex and Grid to ensure a smooth user experience across devices.\n\n- Data Fetching and Handling: I deepened my understanding of data retrieval by utilizing JavaScript's Fetch API to retrieve data from an external JSON source. I also implemented error handling to gracefully manage any potential issues during the data fetching process.\n\n- Dynamic Content Rendering: I successfully implemented dynamic rendering of data onto the dashboard, elevating the user experience. This involved manipulating the DOM to dynamically update specific elements with fetched data in real-time.\n\n- Event Handling and User Interactions: By incorporating event listeners, I enabled seamless interaction with the dashboard. Users can effortlessly switch between daily, weekly, and monthly views, while ensuring the active button state and corresponding data retrieval are managed effectively.\n\n- Code Optimization and Organization: Through refactoring and optimizing my JavaScript code, I enhanced the project's efficiency and maintainability. I focused on eliminating code redundancy, and improving code readability.\n\nThroughout the development process, I encountered challenges such as asynchronous data handling and simultaneous updates of multiple elements.\n\nIn summary, this project provided an opportunity for me to further advance my front-end development skills, apply best practices, and create an interactive and visually appealing time tracking dashboard.\n\n## Installation\n\n- Clone this repo:\n\n```sh\ngit clone https://github.com/CodeWithAlamin/Time-tracking-dashboard.git\n```\n\n- Install dependencies:\n\n```sh\nnpm install\n```\n\n- Build command:\n\n```sh\nnpm run build\n```\n\n- Live server:\n\n```sh\nnpm start\n```\n\n## Author\n\n\u003cb\u003e👤 Alamin\u003c/b\u003e\n\n- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)\n- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)\n- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)\n- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)\n\nFeel free to contact me with any questions or feedback!\n\n## Show your support\n\nGive a ⭐️ if you liked this project!\n\n## Acknowledgments\n\nSpecial thanks to Frontend Mentor for providing such an amazing platform to practice and improve my frontend skills. The challenges and projects available on the website were both fun and challenging, and helped me learn a lot in a short amount of time.\n\n## License\n\nThis project is licensed under the [MIT](https://github.com/CodeWithAlamin/Time-tracking-dashboard/blob/main/LICENSE.md) license, which means you can use, modify, and distribute the code as you wish. If you have any questions or feedback, feel free to reach out. Thank you for considering my code!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Ftime-tracking-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithalamin%2Ftime-tracking-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Ftime-tracking-dashboard/lists"}