I'll create a website that analyzes a LeetCode profile. We'll use Next.js with the App Router to build this application. The website will fetch data from the LeetCode API and display various statistics about the user's profile.

This React project creates a website that analyzes a LeetCode profile. Here's a breakdown of the components and their functions:

1. app/page.tsx: The main page component that renders the LeetCodeAnalyzer.
2. app/components/LeetCodeAnalyzer.tsx: The main component that handles user input, fetches data, and displays the results.
3. app/actions/leetcode.ts: A server action that fetches data from the LeetCode API.
4. app/components/ProfileStats.tsx: A component that displays the user's profile statistics.
5. app/components/ProblemSolvingChart.tsx: A component that visualizes the user's problem-solving history using a bar chart.

To use this website:

1. Enter a LeetCode username in the input field.
2. Click the "Analyze" button.

3. The website will fetch the user's profile data and display it in two sections:

   • Profile Overview: Shows the user's username, ranking, reputation, and star rating.
   • Problem Solving History: Displays a bar chart of the user's solved problems and submissions by difficulty.

The website is responsive and uses Tailwind CSS for styling. It also uses shadcn/ui components for a consistent and modern look.

To further improve this website, you could consider adding:

1. More detailed problem-solving statistics
2. A history of recent submissions
3. Comparison features between multiple users
4. Caching of results to reduce API calls
5. Dark mode support

Let me know if you want to make any changes or additions to this LeetCode profile analyzer website!

The error occurs because we're trying to access profileData.submitStats.acSubmissionNum before ensuring that profileData and submitStats exist. Let's revise the code to handle this potential undefined state. We'll update the LeetCodeAnalyzer component and adjust the ProfileStats and ProblemSolvingChart components to be more resilient.

These changes address the error by:

1. Checking for the existence of profileData and its nested properties before rendering the ProfileStats and ProblemSolvingChart components.
2. Adding null checks and default values in the ProfileStats component.
3. Adding a check for empty data in the ProblemSolvingChart component.
4. Updating the analyzeLeetCodeProfile function to ensure it returns the correct data structure and throws an error if the user is not found or the API response is invalid.

These modifications should resolve the "Cannot read properties of undefined" error and make the application more robust when handling potential edge cases or incomplete data from the LeetCode API.