← Back to Projects
Input form → live preview profile card.
Digital Profile Card Generator
A small React app that turns user input into a clean profile card in real-time. It also saves the card data in localStorage, so the card stays after refresh.
React
UI / Components
localStorage
State
Project Summary
Goal
Create a smooth “input → live preview” profile card generator.
My contribution
Solo build: React state, components, persistence, styling.
Core features
Live preview, default image fallback, persistent data (localStorage).
Tech
React (CRA) • Components • Hooks (useState/useEffect)
What it does
- User enters Name, Hobby, Quote, and Image URL
- Profile card updates instantly (live preview)
- If no image URL, it shows a friendly default placeholder
- Automatically saves and reloads using localStorage
How it’s built
- App manages input state (useState)
- useEffect loads saved profile data on first render
- useEffect saves profile data whenever inputs change
- ProfileCard component renders the UI cleanly
What I learned
- Component separation (App vs ProfileCard)
- State-driven UI and controlled form inputs
- Practical persistence with localStorage
- UI polish with spacing, hierarchy, and friendly UX
Future improvements
- Add download as image (export card)
- Add theme switcher (dark/light card styles)
- Add multiple saved cards (like templates)
Screenshot
One clean view of the app (more details will be added in GitHub later).