{"id":21470410,"url":"https://github.com/webdevsk/random-task-today","last_synced_at":"2026-05-07T04:41:12.713Z","repository":{"id":185625798,"uuid":"673837338","full_name":"webdevsk/Random-task-today","owner":"webdevsk","description":"Bored? Generate a random task to do today and see a refreshing photo.","archived":false,"fork":false,"pushed_at":"2023-08-16T05:30:04.000Z","size":360,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T16:12:57.129Z","etag":null,"topics":["axios-react","bored-api","fetch-api","netlify-functions","reactjs","serverless-applications","serverless-functions","tailwindcss","unsplash-api"],"latest_commit_sha":null,"homepage":"https://splendid-narwhal-4770fd.netlify.app/","language":"JavaScript","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/webdevsk.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":"2023-08-02T14:32:54.000Z","updated_at":"2023-08-03T07:54:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"d70fff7f-7110-4e4f-9b04-52b3fd84deb4","html_url":"https://github.com/webdevsk/Random-task-today","commit_stats":null,"previous_names":["webdevsk/random-task-today"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdevsk%2FRandom-task-today","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdevsk%2FRandom-task-today/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdevsk%2FRandom-task-today/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdevsk%2FRandom-task-today/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webdevsk","download_url":"https://codeload.github.com/webdevsk/Random-task-today/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243988956,"owners_count":20379649,"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":["axios-react","bored-api","fetch-api","netlify-functions","reactjs","serverless-applications","serverless-functions","tailwindcss","unsplash-api"],"created_at":"2024-11-23T09:27:38.028Z","updated_at":"2026-05-07T04:41:12.674Z","avatar_url":"https://github.com/webdevsk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Replace these using search repo_name, project_title, short_description, project_description, view_demo_link --\u003e\n\u003c!-- Prepend a hash # to filter active ones --\u003e\n\u003c!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 --\u003e\n\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003c!--\n*** https://www.markdownguide.org/basic-syntax/#reference-style-links\n--\u003e\n\u003c!-- [![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n[![LinkedIn][linkedin-shield]][linkedin-url] --\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.flaticon.com/free-icons/think\" title=\"think icons\"\u003e\n    \u003cimg src=\"github_assets/logo.png\" alt=\"Logo\" width=\"100\" height=\"100\"\u003e\n  \u003c/a\u003e\n\n\u003ch3 align=\"center\"\u003eRandom Task Today\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    Bored? Generate a random task to do today and see a refreshing photo.\n    \u003cbr /\u003e\n\n  [**Explore the docs »**](https://github.com/webdevsk/Random-task-today)\n\n  [View Demo](https://splendid-narwhal-4770fd.netlify.app/)\n  · [Report Bug](https://github.com/webdevsk/Random-task-today/issues)\n  · [Request Feature](https://github.com/webdevsk/Random-task-today/issues)\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n\u003csummary\u003eTable of Contents\u003c/summary\u003e\n\u003cbr /\u003e\n\n- [About The Project](#about-the-project)\n    - [What users can expect from this App](#what-users-can-expect-from-this-app)\n  - [Built With](#built-with)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n- [Contributing](#contributing)\n- [License](#license)\n- [Contact](#contact)\n\n\u003c/details\u003e\n\u003cbr/\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## About The Project\n\n\u003cdiv align=\"center\"\u003e\n\n[![Product snapshot](github_assets/snapshot.webp)](https://splendid-narwhal-4770fd.netlify.app/)\n\n\u003c/div\u003e\n\u003cbr/\u003e\n\n- This is a simple app that gives you a random task and a related photo.\n- They are fetched from **[Bored API](https://www.boredapi.com/)** and **[Unsplash API](https://unsplash.com/developers)** respectively.\n- This app demonstrates how efficiently I made Axios(Fetch) calls to two different APIs sequentially.\n- It also demonstrates how I managed preloading, loading and status states based on async functions.\n- Wrote custom functions so that you will see the photo only when it is downloaded completely.\n- Was looking for a way to hide API keys. Had two options. So I obviously chose the harder and more interesting one. 😉\n- Integrated **[Netlify Serverless Functions](https://www.netlify.com/products/functions/)** (Which is based on [Amazon AWS Lambda](https://aws.amazon.com/lambda/)) to perform backend tasks.\n- All API calls are made from the backend functions, keeping API credentials secret.\n\n#### What users can expect from this App\n\n- A productive task to do today.\n- A nice refreshing photo in the background.\n- A carefully designed UI so that the text is distinguishable regardless of the photo behind.\n- You can just click on the text and write whatever you want.\n- Photos recieved from Unsplash are not always accurate. But what can you expect without integrating Ai 😅\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Built With\n\n[![React][React]][React-url]  \n[![TailwindCSS][TailwindCSS]][Tailwind-url]  \n[![Netlify][Netlify]][Netlify-url]  \n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\n🌐 The site is already live at: [https://splendid-narwhal-4770fd.netlify.app/](https://splendid-narwhal-4770fd.netlify.app/)\n\nOR\n\n🖥️ You can test it on your local machine by following the steps below.\n\n### Prerequisites\n\n1. **Install** [NODE.JS](https://nodejs.org/en/download) and [Git](https://git-scm.com/downloads)\n1. Open your projects base folder and launch any **terminal** of your choice.\n1. Run this command:\n\n   ```sh\n   npm install npm@latest -g\n   npm install netlify-cli -g\n   ```\n\n### Installation\n\n\u003c!-- 1. Get a free API Key at [https://example.com](https://example.com) --\u003e\n1. Clone the repo\n\n    ```sh\n    git clone https://github.com/webdevsk/Random-task-today.git\n    ```\n\n1. Install NPM packages\n\n    ```sh\n    npm install\n    ```\n  \n1. Fill in a `.env.local` file following the patterns of `envSample.txt`\n\n1. Run Dev server along with serverless functions\n\n    ```sh\n    netlify dev\n    ```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- USAGE EXAMPLES --\u003e\n\u003c!-- ## Features\n\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e --\u003e\n\n\u003c!-- ROADMAP --\u003e\n\u003c!-- ## Roadmap\n\n- [ ] Feature 1\n- [ ] Feature 2\n- [ ] Feature 3\n    - [ ] Nested Feature\n\nSee the [open issues](https://github.com/webdevsk/repo_name/issues) for a full list of proposed features (and known issues).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e --\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n## Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag \"enhancement\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork the Project\n1. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n1. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n1. Push to the Branch (`git push origin feature/AmazingFeature`)\n1. Open a Pull Request\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTACT --\u003e\n## Contact\n\n[![Follow on GitHub][GitHub]](https://github.com/webdevsk)\n[![Follow on Linkedin][Linkedin]][Linkedin-url]\n\nProject Link: [https://github.com/webdevsk/Random-task-today](https://github.com/webdevsk/Random-task-today)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003c!-- ACKNOWLEDGMENTS --\u003e\n\u003c!-- ## Acknowledgments\n\n* []()\n* []()\n* []()\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e --\u003e\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n[Linkedin-url]: https://linkedin.com/in/webdevsk\n[GitHub]: https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white\n[Linkedin]: https://img.shields.io/badge/linkedin-%231E77B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\n[contributors-shield]: https://img.shields.io/github/contributors/webdevsk/Random-task-today.svg?style=for-the-badge\n[contributors-url]: https://github.com/webdevsk/Random-task-today/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/webdevsk/Random-task-today.svg?style=for-the-badge\n[forks-url]: https://github.com/webdevsk/Random-task-today/network/members\n[stars-shield]: https://img.shields.io/github/stars/webdevsk/Random-task-today.svg?style=for-the-badge\n[stars-url]: https://github.com/webdevsk/Random-task-today/stargazers\n[issues-shield]: https://img.shields.io/github/issues/webdevsk/Random-task-today.svg?style=for-the-badge\n[issues-url]: https://github.com/webdevsk/Random-task-today/issues\n[license-shield]: https://img.shields.io/github/license/webdevsk/Random-task-today.svg?style=for-the-badge\n[license-url]: https://github.com/webdevsk/Random-task-today/blob/master/LICENSE.txt\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\n[Next-url]: https://nextjs.org/\n[React]: https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\n[React-url]: https://reactjs.org/\n[TailwindCSS]: https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white\n[Tailwind-url]: https://tailwindcss.com/\n[Bootstrap]: https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge\u0026logo=bootstrap\u0026logoColor=white\n[Bootstrap-url]: https://react-bootstrap.netlify.app/\n[SASS]: https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge\u0026logo=SASS\u0026logoColor=white\n[SASS-url]: https://sass-lang.com/\n[Chakra]: https://img.shields.io/badge/chakra-%234ED1C5.svg?style=for-the-badge\u0026logo=chakraui\u0026logoColor=white\n[Chakra-url]: https://chakra-ui.com/\n[MUI]: https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge\u0026logo=mui\u0026logoColor=white\n[MUI-url]: https://mui.com/\n[Styled Components]: https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge\u0026logo=styled-components\u0026logoColor=white\n[Styled-url]: https://www.styled-components.com/\n[React-router]: https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white\n[React-router-url]: https://reactrouter.com/\n[Redux]: https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge\u0026logo=redux\u0026logoColor=white\n[Redux-url]: https://redux.js.org/\n[Three-js]: https://img.shields.io/badge/threejs-black?style=for-the-badge\u0026logo=three.js\u0026logoColor=white\n[Three-js-url]: https://threejs.org/\n[GSAP]: https://img.shields.io/badge/green%20sock-88CE02?style=for-the-badge\u0026logo=greensock\u0026logoColor=white\n[GSAP-url]: https://greensock.com/gsap/\n[Netlify]: https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge\u0026logo=netlify\u0026logoColor=#00C7B7\n[Netlify-url]: https://www.netlify.com/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdevsk%2Frandom-task-today","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebdevsk%2Frandom-task-today","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdevsk%2Frandom-task-today/lists"}