Project Introduction

Objective

To build a PSDS progress tracker using React and TypeScript along with using other features like IndexedDB, Context API, reducer and custom hooks.

Project Context

Data structure is a way by which data is stored and arranged in the disk space of the computer or memory storage, so that the data can be easily used and manipulated in the future. It provides an effective way of performing various operations related to data management.

With a sufficient understanding of data structures, we can make efficient use of the resources provided to us by the Operating System. Factors like application responsiveness depends largely on the way we utilize the underlying data structures, being implemented.

You will build this project using Typescript and the React library, yet a simple project which utilizes the Context API and reducer features of React.js, and uses browser realtime IndexedDB, that means the app will not have a physical database, rather it caches for the particular browser.

Project Stages

This project consists of the following stages:

1_450_dsa_tracker_sequence_diagram

High-Level Approach

  • Seed the Data to IndexedDB

loading_data_to_indexedDB

  • Fetch the same data from the database and load the React Context

loading_react_context

  • User must be able to see different DSA modules with the curated list of questions with checkboxes which signifies the completion of each

expected_outcome

  • A demo video for reference purpose is provided. Moreover, you can also visit the live application here.

Primary goals

  • You must able to make firebase like functionality with Localbase module by using browser's indexedDB. [Note: Refer to the documentation here to understand the concept of 'Firebase like functionality'.]
  • Learn to write your own custom hooks, contexts and reducer.

Credits

Objective

To build a PSDS progress tracker using React and TypeScript along with using other features like IndexedDB, Context API, reducer and custom hooks.

Project Context

Data structure is a way by which data is stored and arranged in the disk space of the computer or memory storage, so that the data can be easily used and manipulated in the future. It provides an effective way of performing various operations related to data management.

With a sufficient understanding of data structures, we can make efficient use of the resources provided to us by the Operating System. Factors like application responsiveness depends largely on the way we utilize the underlying data structures, being implemented.

You will build this project using Typescript and the React library, yet a simple project which utilizes the Context API and reducer features of React.js, and uses browser realtime IndexedDB, that means the app will not have a physical database, rather it caches for the particular browser.

Project Stages

This project consists of the following stages:

1_450_dsa_tracker_sequence_diagram

High-Level Approach

  • Seed the Data to IndexedDB

loading_data_to_indexedDB

  • Fetch the same data from the database and load the React Context

loading_react_context

  • User must be able to see different DSA modules with the curated list of questions with checkboxes which signifies the completion of each

expected_outcome

  • A demo video for reference purpose is provided. Moreover, you can also visit the live application here.

Primary goals

  • You must able to make firebase like functionality with Localbase module by using browser's indexedDB. [Note: Refer to the documentation here to understand the concept of 'Firebase like functionality'.]
  • Learn to write your own custom hooks, contexts and reducer.

Credits

Getting Your Environment Ready

Before the process of development starts, we need to setup the proper development environment which is the requisite of the application we're aiming to build.

Requirements

  • 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.

Expected Outcome

On completion of this task, you should be able to setup a React application. The application should give a similar result as shown in the screenshot below when visited at http://localhost:3000.

default-page-react

Storing Data To IndexedDB using LocalBase

To begin with, we have the question details in an excel sheet. We need to be able to store the same details in JSON format in the IndexedDB.

Requirements

  • 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.]

9-seed-data-tod-db

[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.

Expected Outcome

On visiting http://localhost:3000 and going to the console section of the developer tools in Chrome, you should be able to notice the seeded data logs of localbase. [NOTE: This data is seeded only once, hence the logs will be visible only once. After the seeding, the data is cached on your local machine.]

Build your Custom Context

useContext is of course the React Hook way to consume React Context. It's a way to share data to any descendent component without having to manually pass the props through every intermediary component. Sometimes known as prop drilling.

Requirements

  • 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.

10_context-logger.png

  • 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.

Did You Checked This!

  • To ensure that the contextAPI loads properly and error free, check the console from the developer tools of Chrome. Check if provider context provides the complex-states to the deeper of the components.

Expected Outcome

Go to your browser and open http://localhost:3000 and go to console in developer tools of Chrome and you'll see an output similar to the above picture.

Functional Components with State - Think Functional, Think Hooks

Well, according to React, Hooks are functions that let you “hook into” React state and life cycle features from functional components. Before the arrival of Hooks, state and React life cycles could only be used in a class component. Starting from version 16.8, React rolled out a lot of features that enables developers to hook into a React state without having to write a single class component.

Coming this far, building your own context, you really made to 60% of the logic behind the application. To make use of that context, we need to utilize something called hooks, provided by the React library.

Requirements

  • 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.

Bring it On!

  • Can your custom hook automatically fire up when any component data/state changes?

Expected Outcome

You should be able to create custom hooks which can simply fetch and update the question details in the IndexedDB. Moreover, you should also have a custom hook having helper functions which will be able to manipulate the states.

Stylize your App - Designing UI

Here, you will be introduced with TailwindCSS, a utility first CSS Framework. Nowadays Cards with FlexLayout is very much accepted by users.

[NOTE: TailwindCSS has been taken as a preference for building this application. You are free to use other constructs.]

Requirements

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

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

11_card-Flex-UI.png

Bring it On!

  • Usage of react-router-dom should now come in handy. Figure out how you'll make use of it to achieve a nice UX.

Expected Outcome

If you've referred to the above image for the design, then your app's frontend might look similar. Otherwise, you're free to go creative.

Working with Question Modules Page

In this section, you'll be implementing the question module page.

Here you'll be working on a type of tabular structure with Mark As Done functionality.

11_card-Flex-UI.png

Requirements

  • 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.

Bring it On!

  • Can you try out the following?
    • Implement Reducer to learn more advanced concepts of React.
    • Define [state, action] as required by the reducer.
    • Building a DarkTheme toggle bar?
    • Mark for Later button to revisit the question.
    • Deploy the app!

Expected Outcome

You should have a finished application, similar to 450-DSA-Tracker.netlify.app.