Trend Spotter is a cutting-edge application designed to help users identify and stay up-to-date with the latest trends in various industries. Whether you're a business professional, a content creator, or simply interested in staying ahead of the curve, Trend Spotter provides you with real-time insights and analysis to keep you informed.
To run Trend Spotter on your local machine, please follow the instructions below:
- Node.js (version 14.21.3 or above)
- npm (version 6.14.18 or above)
- Clone the repository from GitHub:
git clone git@github.com:ddeklerk28/bsd-fe-test.git
- Install dependencies:
cd bsd-fe-test
npm install
- Run the application:
npm start
NOTE: if the app does not open automatically, you can navigate to http://localhost:3002
There are a number of items that need to be addressed before the app can be considered polished and ready.
Start with the Task 1 - Git Workflow
and then pick up the tickets in any order you feel comfortable with.
Recommended time allocation:
- 1 SP: 2 - 5 minutes
- 2 SP: 5 - 7 minutes
- 3 SP: 7 - 12 minutes
Create and checkout a new branch with that follows the following convention
task/BSDTEST_<your-name-and-lastname-in-kebab-case>
Find and fix the bug causing the trend name not to display
Update the
client
styles to achieve the below layout. Each item being rendered should have a fixed width of 275px. The final solution should be responsive.
Figure out why the view button is not taking the user to the Trend Details screen and fix it.
Center the card along the vertical as well as the horizontal axis as indicated by the image below:
- Create an api service layer function called
fetchTrend
, that will fetch the data of single trend. See the API documentation for reference.- Use the new function to provide the second screen with data
- Since the API uses the convention of wrapping response data in an object such as
{ data: objectToBeAccessed }
, and the fact that axios also wraps its data from the BE in a similar fashion. The actual response from the BE looks like{ response: { data: { data: objectToBeAccessed } } }