Key Topics

Dashboard Page

In our dashboard page, we dynamically displayed the logged-in user's information by utilizing Firebase Authentication's onAuthStateChanged method.

Here is a snippet of how we used it:

useEffect(() => {
    auth.onAuthStateChanged(async (user) => {
      if (user) {
        const dbUser = await getUser();
        console.log(dbUser);
        const bookmark = dbUser.bookmark || [];
        setRecentWords(bookmark.length > 3 ? bookmark.slice(-3) : bookmark);
        setRecentSongs(dbUser.recentSongs || []);
        setFirstName(dbUser.firstName);
      }
    })
  }, [])

By using this method, we were able to fetch the user's data (like recent songs and recent words) and subsequently render the information on the dashboard.

Interactive Charts using ChartJS and Rechart

To add an interactive and visual touch to our dashboard, we incorporated charts using two libraries: ChartJS and Rechart.

• ChartJS: ChartJS is a flexible and lightweight JavaScript charting library. It provides beautiful flat designs for charts and is widely used due to its simplicity and small size.
• Rechart: Rechart is a chart library built with React and D3. It allows us to create stunning charts with complex custom animations. It is easy to use and provides many custom options.

The integration of these libraries into our project enhanced the user's experience, providing a more visual and interactive way to view data.

Integration with Other Pages

Our dashboard page was integrated meticulously with the other sections of our project. These sections include:

• Karaoke Page: We updated the user's recent songs based on the songs they practiced on the karaoke page.
• Word Quiz Page: We updated the user's recent words based on the words they learned from the word quiz page.
• Registration & Login Page: We set the user's first name based on the information provided during the registration process.

Short Summary of Development

During the development of the Dashboard page, we experienced the complexity of managing user data and integrating various components. By leveraging Firebase Authentication's onAuthStateChanged method, we could capture real-time user information. We learned to work with the ChartJS and Rechart libraries to create dynamic, interactive charts, enhancing the user experience. Finally, through rigorous integration with other sections of the project like the Karaoke, Word Quiz, Registration, and Login pages, we established a cohesive flow across our application.