Table of Contents
Plug Feed - React Challenge
A frontend exercise from react-take-home
This project aims to recreate the main offer feed of The Plug, which is used by influencers to access offers, track earnings and manage their accounts.
Live Demo
You can visit the deployed website here.
Challenge
Time Frame: 4 Hr
The main goal was to build the mobile UI for the main feed using JSON data from the sample API endpoint.
- Communicate with API and receive JSON data ✔
- Render the data according to the provided Figma design ✔
- Create a seamless user experience similar to The Plug app ✔
- Handle failed API requests ✔
- Create UI for failed state ⏳
- Implement inline video playback ✔
- Optimize load time ⏳
- Optimize scroll performance ⏳
Some features marked with ⏳ couldn't be implemented due to time limitation, but I plan to add them soon
Stack
This project is built with React. The main technologies used are:
- Create React App: To set up the project
- Fetch API: To get JSON data from API endpoint
prop-types
: Library for validating props during developmentreact-icons
: Rich and simple icon librarygh-pages
: To deploy on GitHub Pages
Implementation
This app follows the following implementation details:
-
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.
-
Component Structure: The main components used in the app are:
Campaign
component - responsible for displaying each item in the feedMedia
component - handle each media object within a campaign item
-
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.
-
Video Playback: Play button is displayed for video media items. When the play button is clicked, the video is played inline within the app.
Installation
To run this project locally, follow the steps below.
- Clone the repository to your local machine:
git clone git@github.com:IndieCoderMM/PlugFeed-React.git
- Navigate to the project directory:
cd PlugFeed-React
- Install the required dependencies:
npm install
- Start the development server:
npm start
- Open your web browser and visit http://localhost:3000 to view the JetFuel Plug Feed app.
Todos
- Fix download button 🐞
- Create failed-UI with retry button 🎯
- Lazy loading 🎯
- Pull-to-refresh 🎯
License
This project is licensed under the MIT License.
Contact
For any questions or feedback, feel free to reach out to me at hthant00chk@gmail.com.
Acknowledgments
Special thanks to the JetFuel team for providing this frontend exercise.