{"id":16908767,"url":"https://github.com/saswatamcode/the_shoppies","last_synced_at":"2026-04-10T12:03:24.574Z","repository":{"id":103590029,"uuid":"328157220","full_name":"saswatamcode/the_shoppies","owner":"saswatamcode","description":"Movie award app to manage nominations. Uses the OMDb API.","archived":false,"fork":false,"pushed_at":"2021-01-09T18:49:02.000Z","size":753,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-25T16:23:47.289Z","etag":null,"topics":["axios","nextjs","omdb-api","tailwindcss","vercel"],"latest_commit_sha":null,"homepage":"https://the-shoppies-sm.vercel.app/","language":"TypeScript","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/saswatamcode.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":"2021-01-09T13:06:50.000Z","updated_at":"2021-01-09T19:25:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"51542374-4e71-4f25-b20e-eaa0f972b420","html_url":"https://github.com/saswatamcode/the_shoppies","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saswatamcode%2Fthe_shoppies","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saswatamcode%2Fthe_shoppies/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saswatamcode%2Fthe_shoppies/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saswatamcode%2Fthe_shoppies/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saswatamcode","download_url":"https://codeload.github.com/saswatamcode/the_shoppies/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244660119,"owners_count":20489292,"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","nextjs","omdb-api","tailwindcss","vercel"],"created_at":"2024-10-13T18:52:51.034Z","updated_at":"2025-12-31T00:04:58.632Z","avatar_url":"https://github.com/saswatamcode.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://GitHub.com/Naereen/StrapDown.js/graphs/commit-activity)\n[![Ask Me Anything !](https://img.shields.io/badge/Ask%20me-anything-1abc9c.svg)](https://GitHub.com/Naereen/ama)\n[![GitHub forks](https://img.shields.io/github/forks/saswatamcode/the_shoppies?style=social)](https://GitHub.com/saswatamcode/the_shoppies/network/)\n[![GitHub stars](https://img.shields.io/github/stars/saswatamcode/the_shoppies?style=social)](https://GitHub.com/saswatamcode/saswatamcodegatsby/stargazers/)\n[![GitHub issues](https://img.shields.io/github/issues/saswatamcode/the_shoppies.svg)](https://GitHub.com/saswatamcode/the_shoppies/issues/)\n[![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)\n\n# The Shoppies\n\nMovie award app to manage nominations. Built for the [Shopify Frontend Developer Intern Challenge](https://www.shopify.com/careers/interns#Jobs). Uses the [OMDb API](http://www.omdbapi.com/).\n\nhttps://the-shoppies-sm.vercel.app/\n\n![Screenshot!](public/screenshot.png)\n\n\n## Description\n\nThis application fetches data from OMDb on the server using next.js API route as proxy. Thus, the API key is no longer accessible through the browser. The search functionality uses a custom hook `useDebounce`, to debounce and trigger the API call 500ms after the user has stopped typing. The user can nominate upto 5 movies after which a banner is shown. The `nominees` state also uses a custom hook `useStickyState`, to set the value of user-selected nominees in a cookie, thus allowing us to persist the data. The movie cards use [`next/image`](https://nextjs.org/blog/next-10#built-in-image-component-and-automatic-image-optimization) for optimized images. Built with accessibility in mind with all interactive elements being keyboard accessible, aptly labelled and colored.\n\n## Tech Used\n\n- [next.js v10 with react v17 and TypeScript](https://nextjs.org/): For features like image optimization out-of-the-box(when hosted with vercel) and API routes which allows us to make sure that our third-party API key is not accessible on the client\n- [tailwindCSS v2](https://tailwindcss.com/): For efficient styling and responsiveness. Uses PurgeCSS to purge any unused css\n- [js-cookie](https://github.com/js-cookie/js-cookie): To persist data using cookies\n- [axios](https://github.com/axios/axios): For requests\n- [prettier](https://prettier.io/): For formatting\n- [react-icons](https://react-icons.github.io/react-icons/): For icons\n- [react-loader-spinner](https://github.com/mhnpd/react-loader-spinner): For a custom loading animation\n\n## Run\n\n- Clone into repo\n- Run `yarn` or `npm i`\n- Run `touch .env` and copy the contents of `.env-template`\n- Get your [OMDb](http://www.omdbapi.com/apikey.aspx) API key and put it in the `.env` file\n- Run `yarn dev`\n\n[![forthebadge](https://forthebadge.com/images/badges/made-with-typescript.svg)](https://forthebadge.com)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaswatamcode%2Fthe_shoppies","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaswatamcode%2Fthe_shoppies","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaswatamcode%2Fthe_shoppies/lists"}