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.
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 Stack
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)