WallGodds-Web
WallGodds-Web is a high-performance wallpaper disc
Created on 11th January 2026
•
WallGodds-Web
WallGodds-Web is a high-performance wallpaper disc
The problem WallGodds-Web solves
Problem: Code Duplication & Maintenance Nightmares
The current WallGodds codebase has three separate components for the exact same image card (
ImgCardMobile
,ImgCardTablet
,ImgCardDesktop
). This "Copy-Paste Architecture" means:- Triple the Bugs: Every feature (like downloading images) has to be fixed in 3 different places.
- Bloated Bundle: The code size is 30% larger than necessary, slowing down load times.
- Fragile Code: Without TypeScript, simple type errors can crash the app in production.
Solution: Component Unification & TypeScript Migration
My proposal solves this by:
- Refactoring Architecture: Creating a single, responsive ImageCard component that handles all screen sizes automatically using CSS Modules.
- Migrating to TypeScript: Rewriting core modules in .tsx to enforce type safety, catch errors at compile time, and provide better tooling for future contributors.
- Enhancing UX: Implementing "Shimmer Loading" and reliable "One-Tap Downloads" to make the app feel premium and native-like.
Impact: A cleaner, faster, and more robust application that is easier for new open-source contributors to work on.
Challenges I ran into
Determining the Best Abstraction
The biggest challenge was identifying the common patterns between the Mobile, Tablet, and Desktop components. Initially, they seemed very different because they had different CSS layouts (Flexbox vs Grid).
How I overcame it:
- Isolated Logic: I extracted the core functionality (Downloading, Liking, Saving) into a custom hook (future plan) or shared state logic.
- CSS Modules: I used CSS Modules to handle the responsive differences cleanly without cluttering the JavaScript.
- Variable Props: I designed the
UnifiedImageCard
to accept avariant
prop ('mobile' | 'tablet' | 'desktop'
), allowing a single component to adapt its styling dynamically while keeping the core logic identical.
Another challenge was setting up TypeScript in an existing JS Vite project. I had to carefully configure tsconfig.json to allow mixed .jsx and .tsx files so the app wouldn't break during the incremental migration.
Tracks Applied (1)
AOPS
Technologies used