atharv-110 / flipr-frontend-nobel-prize-app

Nobel App: Frontend Task for Flipr.ai

Unveiling Brilliance, Celebrating Excellence — Your Gateway to Nobel Laureates' Legacy!

The "Nobel App" retrieves data about all Nobel Prize winners together with year, category and laureates' names from the Nobel Prize Winners API in a Tabular Form.

Deployment: Link (All the tasks below can be tested here.)

Tech Stack:

Tasks Completed:

• Write a function to fetch prizes from the url. Check Code here
• Showcase the prize winners in a list. You can decide the layout and style. You have to display each prize and who has won that prize.
• You should add a dropdown to filter prizes by category and year.
• Year should be between 1900 - 2018, you can find out the category yourself by iterating over the data.
• There are 4 people who have won the Nobel prize more than 1 time. You have to make a section in the app to display their information.

Features:

• Load More Rows: This will not load all the data at once, only 10 rows at once will load and we can load more rows through Load More Rows Button
• Fully Mobile Responsive.
• > 1 Button in Mobile View: This will showcase Task no. 5 in the Mobile View.
• Minimal UI for better User Experience. UI inspiration: Flipr.ai
• Handled the missing values through logic, eg: There were many Laureates with only Firstname and no Surname. It was showing undefined on the app so handled it via ternary operators.
• Implemented all the basic UI elements such as Navbar, Hero Section, Footer, Modal, etc.