{"id":24277145,"url":"https://github.com/indiecodermm/plugfeed-react","last_synced_at":"2025-12-29T15:51:26.836Z","repository":{"id":181386912,"uuid":"660558818","full_name":"IndieCoderMM/PlugFeed-React","owner":"IndieCoderMM","description":"React challenge to build Plug's main feed. API Interaction | Data Rendering | Mobile UI | Figma Design","archived":false,"fork":false,"pushed_at":"2023-07-15T08:42:52.000Z","size":1624,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-16T00:01:01.679Z","etag":null,"topics":["frontend","react","take-home-project"],"latest_commit_sha":null,"homepage":"https://indiecodermm.github.io/PlugFeed-React/","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/IndieCoderMM.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}},"created_at":"2023-06-30T09:25:56.000Z","updated_at":"2024-04-12T15:17:03.000Z","dependencies_parsed_at":"2023-07-15T09:42:26.335Z","dependency_job_id":null,"html_url":"https://github.com/IndieCoderMM/PlugFeed-React","commit_stats":null,"previous_names":["indiecodermm/plugfeed-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndieCoderMM%2FPlugFeed-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndieCoderMM%2FPlugFeed-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndieCoderMM%2FPlugFeed-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndieCoderMM%2FPlugFeed-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IndieCoderMM","download_url":"https://codeload.github.com/IndieCoderMM/PlugFeed-React/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243559092,"owners_count":20310694,"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":["frontend","react","take-home-project"],"created_at":"2025-01-15T23:27:02.963Z","updated_at":"2025-12-29T15:51:26.798Z","avatar_url":"https://github.com/IndieCoderMM.png","language":"JavaScript","readme":"\u003cdetails\u003e\n\u003csummary\u003eTable of Contents\u003c/summary\u003e\n\n- [Plug Feed - React Challenge](#plug-feed---react-challenge)\n  - [Live Demo](#live-demo)\n  - [Challenge](#challenge)\n  - [Stack](#stack)\n  - [Implementation](#implementation)\n  - [Installation](#installation)\n  - [Todos](#todos)\n  - [License](#license)\n  - [Contact](#contact)\n  - [Acknowledgments](#acknowledgments)\n\n\u003c/details\u003e\n\n# Plug Feed - React Challenge\n\n\u003e A frontend exercise from [react-take-home](https://github.com/reallabs/react-take-home)\n\nThis project aims to recreate the main offer feed of [**The Plug**](https://www.plugco.in/), which is used by influencers to access offers, track earnings and manage their accounts.\n\n## Live Demo\n\nYou can visit the [deployed website here](https://indiecodermm.github.io/PlugFeed-React/).\n\n\u003cimg src=\"./image.png\" width=\"280\" height=\"340\" /\u003e\n\n## Challenge\n\n**Time Frame: 4 Hr**\n\nThe main goal was to build the mobile UI for the main feed using JSON data from the sample API endpoint.\n\n- Communicate with API and receive JSON data ✔\n- Render the data according to the provided Figma design ✔\n- Create a seamless user experience similar to **The Plug** app ✔\n- Handle failed API requests ✔\n- Create UI for failed state ⏳\n- Implement inline video playback ✔\n- Optimize load time ⏳\n- Optimize scroll performance ⏳\n\n*Some features marked with ⏳ couldn't be implemented due to time limitation, but I plan to add them soon*\n\n## Stack\n\nThis project is built with React. The main technologies used are:\n- Create React App: To set up the project\n- Fetch API: To get JSON data from API endpoint\n- `prop-types` : Library for validating props during development\n- `react-icons` : Rich and simple icon library\n- `gh-pages`: To deploy on GitHub Pages\n\n## Implementation\n\nThis app follows the following implementation details:\n\n- **Data Fetching:** The app fetches data from the API when it starts. If the API request is successful, the data is used for rendering the content.\n\n- **Component Structure:** The main components used in the app are:\n  -  `Campaign` component - responsible for displaying each item in the feed\n  -  `Media` component - handle each media object within a campaign item\n\n- **Media Actions:** Each media item within a campaign has two buttons associated with it. One button allows the user to copy the track link, while the other button enables them to download the media content.\n\n- **Video Playback:** Play button is displayed for video media items. When the play button is clicked, the video is played inline within the app.\n\n## Installation\n\nTo run this project locally, follow the steps below.\n\n1. Clone the repository to your local machine:\n\n```bash\ngit clone git@github.com:IndieCoderMM/PlugFeed-React.git\n```\n\n2. Navigate to the project directory:\n\n```bash\ncd PlugFeed-React\n```\n\n3. Install the required dependencies:\n\n```bash\nnpm install\n```\n\n4. Start the development server:\n\n```bash\nnpm start\n```\n\n5. Open your web browser and visit http://localhost:3000 to view the JetFuel Plug Feed app.\n\n## Todos\n\n- [ ] Fix download button 🐞\n- [ ] Create failed-UI with retry button 🎯\n- [ ] Lazy loading 🎯\n- [ ] Pull-to-refresh 🎯\n\n## License\nThis project is licensed under the MIT License.\n\n## Contact\nFor any questions or feedback, feel free to reach out to me at hthant00chk@gmail.com.\n\n## Acknowledgments\n\nSpecial thanks to the JetFuel team for providing this frontend exercise.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findiecodermm%2Fplugfeed-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findiecodermm%2Fplugfeed-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findiecodermm%2Fplugfeed-react/lists"}