The objective of this assignment is to demonstrate a strong understanding of frontend frameworks and proficient utilization of backend APIs as a full-stack developer. Our goal is for you to highlight your problem-solving abilities and creative thinking.
- Set up a node API server based on the provided images and articles data.
- Create an API endpoint (/images) that retrieves a list of all the images in the images directory and associates each image with an article from the articles list inside the data directory.
- Develop a web application using a framework of your choice (we use Nuxt but feel free to use something else) and create a page to display the images.
- Use the provided attached reference design material as a guide to creating a responsive mosaic layout with a group of cards. The material provided is for reference only, however, it should be as close as possible in terms of implementation.
- Populate each card with data fetched from your API server endpoint(/images). Imp1. lement a hover effect on each card to display the associated article’s title and description.
- Add a button to allow users to upload new images. When the button is clicked, prompt the user to select an image to upload.
- Save the uploaded image to the images directory in the API server and display the newly uploaded image on the same page.
I cannot create a responsive mosaic layout with a group of cards as shown in the Figma design material and it breaks when new items are added.