React & Tailwind - Browser extensions manager UI solution

What are you most proud of, and what would you do differently next time?

Any comments are welcome =)

Built with

• Flexbox
• CSS Grid
• React
• Tailwindcss
• Vite

Highlights

• I extracted the core API to a separate module extensions.ts.

• The extensions are sorted by name when displayed.

• The list of extensions is loaded from localStorage (a hard coded list is used the first time):

function loadExtensions(storage?: Storage): Extension[] {
    const storedValue = storage?.getItem("extensions");

    if (storedValue) {
        try {
            return JSON.parse(storedValue);
        } catch (error: any) {
            console.error(error.message);
        }
    }

    return [..._extensions];
}

const [extensions, setExtensions] = useState(loadExtensions(window.localStorage));

• The list of extensions is saved on localStorage:

function saveExtensions(extensions: Extension[], storage?: Storage) {
    try {
        storage?.setItem("extensions", JSON.stringify(extensions));
    } catch (error: any) {
        console.error(error.message);
    }
}

• I added a button to reset the list to the initial value.

Useful resources

• How to import SVG files as React components with Vite
• Dark mode with tailwindcss
• How to detect a user’s preferred color scheme in JavaScript

Continued development

With more time:

• I would put more effort into the design.
• Change the theme (dark / light mode) automatically when it is changed at the OS level.
• Save the current theme on localStorage.