feat: add SVG optimizer tool with file upload and optimization features

Author: Manu77211

src/common/Testimonial/TestimonialSection.jsx

@@ -18,8 +18,14 @@ function TestimonialSection() {
   const [testimonials, setTestimonials] = useState([]);
 
   const fetchTestimonials = async () => {
-    const res = await submit(fetchTestimonialsHomePage());
-    setTestimonials(res);
+    try {
+      const res = await submit(fetchTestimonialsHomePage());
+      setTestimonials(res);
+    } catch (error) {
+      console.warn('Failed to load testimonials:', error);
+      // Set empty array as fallback
+      setTestimonials([]);
+    }
   };
 
   useEffect(() => {
@@ -58,16 +64,18 @@ function TestimonialSection() {
           spaceBetween={10}
         >
           {testimonials &&
+            Array.isArray(testimonials) &&
+            testimonials.length > 0 &&
             testimonials.map((testimonial) => (
               <SwiperSlide key={testimonial.id}>
                 <div className="rounded-lg border-2 border-gray-400 shadow-lg">
                   <TestimonialCard
                     home
-                    avatarUrl={testimonial.user_id_map.avatarUrl}
-                    category={testimonial.testimonials_event.name}
+                    avatarUrl={testimonial.user_id_map?.avatarUrl}
+                    category={testimonial.testimonials_event?.name}
                     created_at={testimonial.created_at}
-                    email={testimonial.user_id_map.email}
-                    name={testimonial.user_id_map.displayName}
+                    email={testimonial.user_id_map?.email}
+                    name={testimonial.user_id_map?.displayName}
                     quote={testimonial.quote}
                     title={testimonial.title}
                   />

src/common/routing/RouteDefs.jsx

@@ -17,6 +17,7 @@ import PlayList from 'common/playlists/PlayList';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { NhostClient, NhostReactProvider } from '@nhost/react';
 import BadgesDashboard from 'common/badges-dashboard';
+import { SvgOptimizer } from 'plays';
 
 const nhost = new NhostClient({
   subdomain: process.env.REACT_APP_NHOST_SUBDOMAIN || '',
@@ -53,6 +54,9 @@ const RouteDefs = () => {
             {process.env.NODE_ENV === 'development' && (
               <Route exact element={<PlayCreated />} path="created/:playid" />
             )}
+            {process.env.NODE_ENV === 'development' && (
+              <Route exact element={<SvgOptimizer />} path="svg-optimizer" />
+            )}
             <Route exact idex element={<PlayMeta />} path=":username">
               <Route exact element={<PlayMeta />} path=":playname">
                 <Route exact element={<PlayMeta />} path=":param1">

src/plays/svg-optimizer/Readme.md

@@ -0,0 +1,70 @@
+# SVG Optimizer Tool
+
+I built this SVG optimizer because I was tired of manually cleaning up SVG files for my web projects. As a developer, I often get SVGs from designers or download them from icon libraries, and they're usually bloated with unnecessary code. This tool solves that problem.
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: Manu S
+- GitHub Link: https://github.com/Manu77211
+
+
+## Implementation Details
+
+I created this tool using React because I wanted to practice my React skills while solving a real problem I face in my development workflow. Here's what it does:
+
+**Main Features:**
+- Upload SVG files or paste code directly
+- Removes junk like XML declarations, comments, and empty tags
+- Shows you exactly how much space you saved
+- Let's you compare before/after visually
+- Download the cleaned file or copy the code
+
+**What gets optimized:**
+- XML declarations (usually not needed for web)
+- HTML comments from design tools
+- Empty `<g>` and `<defs>` tags
+- Extra whitespace and line breaks
+- Unused attributes like `xmlns:xlink`
+
+I used React hooks (useState, useCallback) for state management and the File API for handling uploads. The clipboard functionality uses the modern Clipboard API.
+
+## Why I built this
+
+Working on web projects, I noticed SVG files from tools like Illustrator or Sketch come with tons of unnecessary code. A simple icon might be 5KB when it could be 2KB. That adds up when you have lots of icons on a page.
+
+I tried online tools but they either didn't work well or I didn't trust them with client work. So I decided to build my own that I could run locally and customize as needed.
+
+## How to use it
+
+1. Either upload an SVG file or paste your SVG code in the text area
+2. Hit "Optimize SVG" - it takes like a second
+3. Check the stats to see how much space you saved
+4. Compare the before/after preview to make sure it looks the same
+5. Download the optimized file or copy the code
+
+## What I learned
+
+This project helped me get better with:
+- React functional components and hooks
+- File handling in JavaScript
+- Working with the Clipboard API
+- CSS Grid and Flexbox for responsive design
+- Error handling and user feedback
+
+## Considerations
+
+The tool is pretty conservative - it only removes stuff that's definitely safe. I've tested it with hundreds of SVGs and haven't seen any visual changes. But like with any tool, test your results before using in production.
+
+It doesn't handle super complex SVGs with animations or scripts yet, but for regular icons and graphics it works great.
+
+## Future ideas
+
+If I have time, I might add:
+- Batch processing multiple files
+- More aggressive optimization options
+- Better handling of gradients and patterns