• Create a React app, setting typescript as the template.
• Install the dependencies as required on the go.
• Delete unnecessary files like - testing, logo, setup, etc., since, probably, you will not be needing them.
• Install the dependency for LocalBase module, since we'll be using IndexedDB features in our application.
• Setup React Router.

• Use this excel sheet, which contains 450 PSDS questions, and extract the data in the form of JSON.
• As you get the JSON out of it, now try to implement a specific TypeScript Interface. The properties you'll adhere to are - topicName, questions, isStarted, doneQuestions. It is important to use the syntactical contract that an entity should conform to. [NOTE: The interface we're referring to here is for the topic card for each topic, like Array, Matrix, etc. topicName refers to the name of the topic. questions is an integer that keeps the count of questions for a particular topicName. isStarted is a boolean which contains the status of a particular topicName. doneQuestions is an integer that keeps the count of completed questions.]

[NOTE: You may not see the left part of the page as shown here since you have not yet implemented that at this stage. The right part is what you should only see.]

• Setup the LocalBase instance and seed the data to the browser's IndexedDB.

• Make your own custom database functions like - insertData(), getData(), findDocByKey(param), and updateData(param) etc. Making these basic indeed database functionalities makes your life easier to work and focus on writing react and business logics.

• This stage will be the building blocks of your whole reactive state to control efficiently to avoid prop drilling issue. Context provides a way to pass data through the component tree without having to pass props down manually at every level.

• Try to figure out what initial state you need to get started and create using React.createContext() hooks.

• For a better understanding, you are free to refer to this IContext interface.

interface IContext {
  questionData: IQuestionData[];
  updateData: Function;
  singleQuestionData?: IQuestionData;
}

• Wrap the App.tsx file with <QuestionDataContext.Provider> and provide initialState as value to it. A sample screenshot of contextAPI logs is given for reference.

• Refer to the following points to gain clarity on the above console log:

  • The console.log output which is shown in the picture, is the context state initially. Meaning, as we already know that react context is for managing a global state and sending data even deeper to the component tree, the output data like - questionData, updatedData(), and a bound dispatch action is also needed for managing the context in the whole app. However the dispatcher will not be required at the moment.
  • The questionData object provides the data for each module, which will aid in manipulation of our global state/context. The updateData() function is required to modify the data stored in our IndexedDB.

• In task 2, we integrated IndexedDB with our application. Now we need to utilize those database functions in our React app. For achieving the same, we'll have to use useState<any>() and useEffect<any>() hooks.
• You need to create custom hooks for achieving the following:
  • Fetch the question details from the IndexedDB as a state
  • Update the question details in the IndexedDB
  • Helper function which will manipulate the states
• Kindly go through the demo video for a better understanding of the outcomes we're trying to achieve.

• Refer to the Prototyped UI below and create your UI similar to this.

  [NOTE: You are free to work on your own design.]

• Now at this stage, you have to build something similar like the above picture, with a relevant title, search bar, and tabular view for the questions.

• The search bar input takes phrases and searches from Database / context state and populates the tabular view with relevant found questions. Use higher order function like arr.filter((param)=>[...found(questions)])

• Build the tabular structure using higher order array methods of ES7, like map().

• Mark As Done / Undone feature in the component, by using updateData() function.

• To initialize and use context state use React.useContext(state) in the corresponding components.