{"id":15091609,"url":"https://github.com/saharbueno/vara-intern-assignment","last_synced_at":"2026-02-07T22:02:20.944Z","repository":{"id":235946198,"uuid":"791594064","full_name":"saharbueno/vara-intern-assignment","owner":"saharbueno","description":"A dashboard to keep track of environmental data for a small-scale food processing plant!","archived":false,"fork":false,"pushed_at":"2024-04-26T06:37:42.000Z","size":23311,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-29T20:39:08.146Z","etag":null,"topics":["api","bootstrap","express","express-js","expressjs","google-api","google-sheets-api","handlebars","handlebars-js","javascript","js","node","node-js","nodejs","tailwind","tailwind-css","tailwindcss"],"latest_commit_sha":null,"homepage":"https://vara-intern-assignment-7b10492b6031.herokuapp.com/","language":"CSS","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/saharbueno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-04-25T02:12:29.000Z","updated_at":"2024-04-26T06:37:45.000Z","dependencies_parsed_at":"2024-04-25T03:27:03.735Z","dependency_job_id":"1b860c8b-485e-4de8-89c1-155f8ce5d249","html_url":"https://github.com/saharbueno/vara-intern-assignment","commit_stats":{"total_commits":32,"total_committers":1,"mean_commits":32.0,"dds":0.0,"last_synced_commit":"87f3abc42528bb8fff2f8b4a9e515d884fccf2a2"},"previous_names":["saharbueno/vara-intern-assignment"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/saharbueno/vara-intern-assignment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saharbueno%2Fvara-intern-assignment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saharbueno%2Fvara-intern-assignment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saharbueno%2Fvara-intern-assignment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saharbueno%2Fvara-intern-assignment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saharbueno","download_url":"https://codeload.github.com/saharbueno/vara-intern-assignment/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saharbueno%2Fvara-intern-assignment/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29209840,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T21:35:21.898Z","status":"ssl_error","status_checked_at":"2026-02-07T21:35:20.106Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["api","bootstrap","express","express-js","expressjs","google-api","google-sheets-api","handlebars","handlebars-js","javascript","js","node","node-js","nodejs","tailwind","tailwind-css","tailwindcss"],"created_at":"2024-09-25T10:42:02.367Z","updated_at":"2026-02-07T22:02:20.902Z","avatar_url":"https://github.com/saharbueno.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vara Environmental Data Dashboard 🐻🌸\n\n### [Want to get started and install right away? Click here!](#install-run)\n\n## Description\nA full-stack web application that imports environmental data from Google Sheets of a small-scale food processing plant and generates interactive charts in the front end. The dashboard will showcase the current environmental metrics of the plant, providing insights into various aspects of its operations.\n\n## Built With\n\u003cp align=\"center\"\u003e\n❀ HTML/Handlebars ❀ JavaScript ❀ Node.js ❀ Express.js ❀ Tailwind CSS ❀ Chart.js ❀ Google Sheets API ❀ OAuth 2.0 ❀ Bootstrap Icons ❀\n\u003c/p\u003e\n\n## Features\n**♡ Interactive Sidebar**\n* Allows users to open and close the sidebar by clicking on an icon.\n* Displays various environmental data categories as clickable links for easy navigation.\n\n**♡ Search Functionality**\n* Provides a search bar to filter and scroll to specific environmental data categories. \n* Smoothly scrolls to the selected category upon entering a search query.\n\n**♡ Dynamic Charts**\n* Utilizes Chart.js library to dynamically generate charts for different environmental data categories.\n* Supports both line and bar chart types.\n* Displays charts for water consumption, natural gas consumption, grid electricity consumption, steam consumption, food waste, solar KWh, and water recycling.\n\n**♡ Chart Type Switching**\n* Allows users to switch between line and bar chart views for each data category.\n* Toggles the display of line and bar charts with a button click.\n* Updates the button text and icon based on the currently displayed chart type.\n\n**♡ Responsive Design \u0026 Styling**\n* Ensures the dashboard layout is responsive across various screen sizes.\n* Utilizes media queries to adjust the layout and size of elements for optimal viewing.\n* Implements a visually appealing design with gradient backgrounds and iconography from Bootstrap Icons library.\n* Uses custom fonts and colors to enhance the aesthetic appeal of the dashboard.\n\n**♡ Data Fetching from Google Sheets**\n* Utilizes Google Sheets API for fetching environmental data from a specified spreadsheet.\n* Reads data from the spreadsheet and populates the charts dynamically based on the retrieved data.\n\n**♡ Server-side Configuration**\n* Implements a server-side component using Express.js.\n* Configures the server to serve static files from a public directory.\n* Handles URL encoding and sets the view engine to handle rendering of dynamic content.\n\n**♡ Modular Code Structure**\n* Organizes code into separate HTML, CSS, JavaScript, and configuration files for better maintainability and readability.\n*  Utilizes ES6 modules for importing and exporting functionalities across files.\n\n## Visuals\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"547\" alt=\"Screenshot 2024-04-26 at 2 29 34 AM\" src=\"https://github.com/saharbueno/vara-intern-assignment/assets/69322388/658eb260-2167-481a-97cb-2c54b95afe41\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"564\" alt=\"Screenshot 2024-04-26 at 2 29 42 AM\" src=\"https://github.com/saharbueno/vara-intern-assignment/assets/69322388/7195a848-03fa-49e3-b134-f0dc3049f229\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"545\" alt=\"Screenshot 2024-04-26 at 2 29 52 AM\" src=\"https://github.com/saharbueno/vara-intern-assignment/assets/69322388/a1582fc9-d706-4f73-9ecf-27f9996307ab\"\u003e\n\u003c/p\u003e\n\n## \u003ca name=\"install-run\"\u003eInstall \u0026 Run\u003c/a\u003e\n\n*note: you will either need to use my google.json file or create your own using Google's API service -\u003e [see info here](https://console.cloud.google.com/apis/library)*\n\n```\ngit clone https://github.com/saharbueno/vara-intern-assignment.git // go to project directory, ex: cd vara-intern-assignment\nnpm install\ncd src\nnode app.mjs\n```\n\n**OR**\n\n```\ngit clone https://github.com/saharbueno/vara-intern-assignment.git // go to project directory, ex: cd vara-intern-assignment\nnpm install\nnpm start\n```\n\n**OR**\n\n[Visit my deployed site here!](https://vara-intern-assignment-7b10492b6031.herokuapp.com/)\n\n\n## Thank You!\nI would like to thank the **co-founder of Vara** who assigned this project to me. I learned so much throughout the process of creating this project-- I solidified my skills in Tailwind, learned how to use the Google Sheets API, and learned to make something more visually appealing with colors and design. I hope to continue to get better at being a full-stack developer and continue my career growth journey ໒꒰ྀི´ ˘ ` ꒱ྀིა!\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://vara-intern-assignment-7b10492b6031.herokuapp.com/\"\u003e\u003ci\u003eVisit my site!\u003c/i\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ci\u003e˚ʚ♡ɞ˚ Thanks for visiting! ˚ʚ♡ɞ˚\u003c/i\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://64.media.tumblr.com/af92d08e4b1d6b1299f07bb56cbcdabc/tumblr_nahffyXzlB1tgtx3jo1_1280.gifv\" alt=\"Happy\"\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaharbueno%2Fvara-intern-assignment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaharbueno%2Fvara-intern-assignment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaharbueno%2Fvara-intern-assignment/lists"}