fix: format user count (#6994)

src/components/Projects/ProjectCard.tsx

@@ -4,6 +4,7 @@ import type {
   ProjectFileType,
 } from '../../lib/project.ts';
 import { Users } from 'lucide-react';
+import { formatCommaNumber } from '../../lib/number.ts';
 
 type ProjectCardProps = {
   project: ProjectFileType;
@@ -39,7 +40,11 @@ export function ProjectCard(props: ProjectCardProps) {
       </span>
       <span className="flex items-center gap-2 text-xs text-gray-400">
         <Users className="inline-block size-3.5" />
-        {userCount > 0 ? <>{userCount} Started</> : <>Be the first to solve!</>}
+        {userCount > 0 ? (
+          <>{formatCommaNumber(userCount)} Started</>
+        ) : (
+          <>Be the first to solve!</>
+        )}
       </span>
     </a>
   );

src/data/projects/task-tracker-js.md

@@ -1,23 +1,23 @@
 ---
-title: 'Task Tracker'  
-description: 'Create a task tracker with a to-do list using HTML, CSS, and JavaScript.'  
-isNew: false  
-sort: 22  
-difficulty: 'intermediate'  
-nature: 'JavaScript'  
-skills:  
-  - 'HTML'  
-  - 'CSS'  
-  - 'JavaScript'  
-  - 'DOM Manipulation'  
-seo:  
-  title: 'Build a Task Tracker with JavaScript'  
-  description: 'Learn how to create a dynamic task tracker that allows users to add, complete, and delete tasks with real-time updates.'  
-  keywords:  
+title: 'Task Tracker'
+description: 'Create a task tracker with a to-do list using JavaScript.'
+isNew: false
+sort: 22
+difficulty: 'intermediate'
+nature: 'JavaScript'
+skills:
+  - 'HTML'
+  - 'CSS'
+  - 'JavaScript'
+  - 'DOM Manipulation'
+seo:
+  title: 'Build a Task Tracker with JavaScript'
+  description: 'Learn how to create a dynamic task tracker that allows users to add, complete, and delete tasks with real-time updates.'
+  keywords:
     - 'task tracker'
     - 'to-do list'
-    - 'javascript project'  
-roadmapIds:  
+    - 'javascript project'
+roadmapIds:
   - 'frontend'
 ---
 
@@ -31,4 +31,4 @@ Here is the mockup of the task tracker:
 
 Store your tasks in an array of objects, where each object represents a task with properties like description and status (completed or not). Whenever a new task is added, updated, deleted, or marked as complete/uncomplete, update the tasks array. Write a function `renderTasks` which will remove all tasks from the DOM and re-render them based on the updated tasks array.
 
-This project will help you practice array manipulation, event handling, and dynamic DOM updates using JavaScript.
+This project will help you practice array manipulation, event handling, and dynamic DOM updates using JavaScript.