Intermediate6 min read
Was this chapter helpful?
Share
Once people can sign in to your app, they need somewhere to be themselves.
Think of a profile like a social media bio. It's the small set of things that say who this person is on your app. Most apps include:
Display name
The friendly name people see next to posts. "Maya Dupont" or "Travel Maya 🌍".
Username
The unique handle in URLs. Like @maya. Usually locked once chosen.
Profile photo (avatar)
Their face, logo, or favorite pet. Makes everything feel more personal.
Short bio
1-2 sentences. "Designer in Lyon. Lover of croissants and good UX."
Website / link
Optional. Lets them link out to their portfolio, Twitter, or whatever they want.
Preferences
Settings that don't show publicly — dark mode, language, notification toggles.
Don't over-collect. Every extra field is one more thing users have to fill in. Start with the bare minimum, add more later if you actually need it.
Almost every app with profiles has two different pages, and they do very different things:
The public profile
/profile/maya
Anyone can visit it. Shows the person's photo, name, bio, and the public stuff they've shared. It's read-only — like a Twitter or LinkedIn page.
The settings page
/settings
Only the logged-in user can see their own. This is where they edit their photo, bio, password, notification preferences — anything personal.
The settings page is just a form. The user types into it, hits Save, and their info updates. AI builds this in seconds — you just need to describe it.
A good settings page does five things
BUILD THE SETTINGS PAGE
"Add a /settings page where the logged-in user can edit their profile. Let them change their display name, write a short bio (with a 200 character limit), and add a website link. Pre-fill the form with whatever they already saved. When they hit Save, show a green "Saved!" message. If they're not logged in, send them to the login page."
Profile photos make everything feel human. Without them, your app looks like a spreadsheet. With them, it looks like a community.
The good news: you don't need to know how file uploads work. AI handles the entire flow. You describe what you want, AI sets up the photo storage, the upload button, the preview, and the "default avatar" that shows when someone hasn't added one yet.
Click to upload
User taps a button on their settings page and picks a photo from their phone or computer.
Preview
They see a preview right away — circular crop, the right size, no surprises.
Save
Photo is saved. From now on it shows up everywhere their name appears in the app.
ADD AVATAR UPLOAD
"On the settings page, let users upload a profile photo. Show their current photo (or a default circle with their initials if they don't have one). When they pick a new photo, only allow image files under 2MB, show a preview right away, and save it so it shows up everywhere their name appears in the app."
Beyond personal info, users have preferences — small choices about how they want your app to behave. Things like:
Dark mode on/off
Email notifications on/off
Marketing emails on/off
Language (English, French, Spanish...)
Time zone
Default view (grid vs list)
You don't have to add all of these. Start with one or two — usually dark mode and email notifications. Add more as you actually need them.
ADD A PREFERENCES SECTION
"On my settings page, add a Preferences section with three toggles: dark mode, email notifications, and marketing emails. Save changes instantly when the user flips a toggle (no Save button needed). Show a small checkmark next to the toggle for 2 seconds so they know it saved."
If your app is social — a forum, a community, a marketplace — you'll want each user to have a public page. A place where their stuff lives and other people can find them.
The URL pattern most apps use: /profile/username or just /@username. Click it and you see that person's photo, bio, and whatever they've shared.
A typical public profile page
ADD PUBLIC PROFILE PAGES
"Add a public profile page at /profile/[username]. When someone visits /profile/maya, show that user's photo, display name, bio, and website link. Below that, show a list of all the posts they've shared. Make sure private info like their email is never visible. If the username doesn't exist, show a friendly "User not found" page."
Things that trip up almost everyone the first time they add profiles to an app.
Asking for too much info upfront
Don't make new users fill out 12 fields before they can use your app. Ask for the minimum, let them add more later if they want.
Username collisions because of capital letters
Tell AI: "treat usernames as case-insensitive — Maya and maya should be the same user, not two different ones."
Profile photo works locally but not after deploying
The photo storage isn't public yet. Tell AI to make the photo storage public so anyone can view the images.
One user can edit another user's profile
Tell AI: "make sure users can only edit their own profile, never anyone else's."
New signups have no profile at all
Tell AI to automatically create a blank profile for every new user the moment they sign up.
You built a forum where people can post and comment, but right now everyone shows up as "Anonymous." You want each person to have a real profile with a photo, a bio, and a public page where you can see all their posts. With one prompt, AI builds the whole thing — settings page, photo upload, public profile route, and ties everything together.
Build this with AI
"Add user profiles to my forum app. Let people add a display name, a short bio, and a profile photo on a /settings page. Create a public /profile/[username] page that shows their photo, bio, and a list of posts they've made. Update my forum so each post shows the author's photo and display name instead of "Anonymous." Make sure people can only edit their own profile."
USERNAME AVAILABILITY CHECK
"On the username field in my signup form, check if the username is already taken as the user types. If it's taken, show a red "already taken" message. If it's available, show a green checkmark. Wait until they pause typing for half a second before checking, so it doesn't check every keystroke."
ADD A FOLLOW BUTTON
"On the public profile page, add a Follow button. When a logged-in user clicks it, they start following that person. The button changes to "Following" and clicking again unfollows. Show the follower count and following count on each profile."
ACCOUNT DELETION
"In settings, add a "Delete my account" button at the very bottom. When clicked, show a confirmation dialog asking the user to type their username to confirm. On confirm, delete their account and all their data, sign them out, and send them to the homepage with a goodbye message."
