/fibo-frontend-assignment

Fibo Frontend Intern Assignment Solution

Primary LanguageJavaScript

This is a Next.js project bootstrapped with create-next-app.

FRONTEND ASSIGNMENT - FIBO (NEXT.JS)

Overview:

This test is being administered to identify your ability to learn new concepts on the fly from online documentation. It is assumed that you have the following basic skills and/or will pickup skills as you go:

  • Familiarity with HTML, CSS, Next.js/React.js, Javascript, Tailwind, Redux
  • Familiarity with npm for package management locally and the installation of packages on your local machine.
  • Github account with public access.

FIGMA LINK:https://www.figma.com/file/UXYynN54lmQNaZ7fbOhbKW/FRONTEND-ASSIGNMENT?type=design&node-id=0%3A1&mode=design&t=2I9NoF4JlIqknXHz-1

PROTOTYPE LINK: https://www.figma.com/proto/UXYynN54lmQNaZ7fbOhbKW/FRONTEND-ASSIGNMENT?type=design&node-id=1-605&t=tiE8mq5FSFFfjhCU-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A605&mode=design

Problem statement:

You need to develop the mobile responsive app that is present in the figma design. The application has the following functionalities.

  • User can track and untrack each goals
  • User can track all goals, by swipe to right feature
  • Whenever the goals are checked by user you need to also update the progress bar
  • Progress bar division = 100%/ No of total goals
  • You also need to create a graph based on the progress percentage. The graph has Percentage(on y-axis) and date(on x-axis). The graph is determined by the process percentage on each day
  • You need create bottom navigation menu, whenever the user click on any menu, you need to navigate on the respective page
  • Page2, Page3 and Page4 are blank page with their names in it
  • You need to save the data on frontend only

Evaluation:

  • We’ll be looking at completeness of assignment but will also be looking at clean coding style, code modularity like components, pages, props, etc
  • Attention to detail in design developed - designs developed should look almost exactly the same as given in the below Figma design
  • We’ll be looking at your ability to use core language concepts, but also your ability to pickup/use libraries specified. Where no library is explicitly specified, please go ahead and use whatever you feel comfortable with