User Profile and Settings Management for Your Social Network

introduction in this tutorial, you will learn how to implement user profile and settings management for your social network application using back4app instead of building everything from scratch, you'll leverage back4app's powerful data management capabilities to store and retrieve user profile information, handle avatar uploads, and manage user settings by the end of this tutorial, you will have created a system where users can view and update their profile information upload and manage profile pictures configure privacy and notification settings customize their account preferences these features are essential for any modern social network, providing users with control over their identity and experience on your platform prerequisites to complete this tutorial, you will need a back4app account you can sign up for a free account at back4app com https //www back4app com a back4app project set up with the parse sdk configured a working authentication system you can follow our authentication system with back4app tutorial if you haven't implemented this yet basic knowledge of javascript, react js, and modern web development concepts back4gram project find here the complete code for a social network sample project built with back4app step 1 – understanding profile data structure in back4app before diving into implementation, let's understand how user profile data is structured in back4app the parse user class back4app's parse user class is not just for authentication—it's also perfect for storing profile information when you create a new user, back4app automatically creates an entry in the user class with default fields username password (stored securely and not retrievable) email emailverified authdata however, the real power comes from extending this class with custom fields for your profile data bio user's self description avatar profile picture (stored as a parse file) fullname user's full name location user's city/country website user's personal website social links to social media profiles preferences user settings and preferences setting up extended user properties in your back4app dashboard, you can add these custom fields to the user class navigate to database → browser select the user class click "add a new column" define the field name (e g , "bio") and type (e g , "string") \[image back4app dashboard showing adding a new column to user class] you can access and update these fields through the parse sdk just like any other object back4gram project find here the complete code for a social network sample project built with back4app step 2 – fetching user profile data the first step in implementing profile management is fetching the current user's profile data getting the current user's profile back4app makes it easy to retrieve the currently logged in user const fetchuserprofile = async () => { try { // get the current user object const currentuser = await parse user current(); if (!currentuser) { // handle the case where no user is logged in navigate('/login'); return; } // access user properties const username = currentuser get('username'); const email = currentuser get('email'); const bio = currentuser get('bio') || ''; const fullname = currentuser get('fullname') || ''; // get avatar if available const avatar = currentuser get('avatar'); const avatarurl = avatar ? avatar url() null; // set state with user data setuserdata({ username, email, bio, fullname, avatarurl }); } catch (error) { console error('error fetching user profile ', error); // handle error appropriately } }; this code demonstrates how to get the current user object with parse user current() access built in properties with get('fieldname') handle optional fields with fallback values access file urls for avatar images in the back4gram application, this is implemented in the profilepage js component's useeffect hook useeffect(() => { const loadprofile = async () => { try { const currentuser = await parse user current(); if (!currentuser) { navigate('/login'); return; } setuser({ id currentuser id, username currentuser get('username'), email currentuser get('email'), bio currentuser get('bio') || '', avatar currentuser get('avatar') ? currentuser get('avatar') url() null }); // set stats setstats({ posts userposts length, followers currentuser get('followers') || 0, following currentuser get('following') || 0 }); setisloading(false); } catch (error) { // error handling } }; loadprofile(); }, \[navigate]); back4gram project find here the complete code for a social network sample project built with back4app step 3 – updating user profile information allowing users to update their profile information is a core feature of profile management updating profile fields when a user submits updated profile information, you can save it to back4app with const updateprofile = async (profiledata) => { try { const user = await parse user current(); if (!user) return false; // update user fields user set('fullname', profiledata fullname); user set('bio', profiledata bio); user set('website', profiledata website); user set('location', profiledata location); // save changes to back4app await user save(); return true; } catch (error) { console error('error updating profile ', error); return false; } }; this function gets the current user object sets the updated field values saves the changes to back4app in the back4gram application, the profile update is implemented in the handleupdateprofile function const handleupdateprofile = async (e) => { e preventdefault(); setisupdating(true); try { if (!user) return; user set('username', username); user set('email', email); user set('bio', bio); // handle avatar upload if a file is selected if (selectedfile) { const parsefile = new parse file(selectedfile name, selectedfile); await parsefile save(); user set('avatar', parsefile); } await user save(); toaster create({ title 'success', description 'profile updated successfully', type 'success', }); } catch (error) { console error('error updating profile ', error); // handle error } finally { setisupdating(false); } }; back4gram project find here the complete code for a social network sample project built with back4app step 4 – handling profile picture uploads profile pictures are a key part of user identity in social networks back4app makes file handling easy with parse file uploading avatar images to upload and save a profile picture const uploadavatar = async (file) => { try { const user = await parse user current(); if (!user || !file) return null; // create a parse file const parsefile = new parse file(file name, file); // save the file to back4app await parsefile save(); // update the user's avatar field user set('avatar', parsefile); await user save(); // return the file url return parsefile url(); } catch (error) { console error('error uploading avatar ', error); return null; } }; this code creates a new parse file object from the selected file saves the file to back4app's storage associates the file with the user's avatar field updates the user object in the database file management in back4app when you upload files with parse file, back4app securely stores the file in its cloud storage generates a unique url for accessing the file manages file permissions based on the parent object's acl handles cdn distribution for fast loading this makes it much simpler than building your own file storage and management system step 5 – implementing user settings beyond basic profile information, social networks typically offer various settings for privacy, notifications, and preferences storing user settings in back4app you have two main approaches for storing user settings 1\ using user class fields for simple settings for straightforward boolean or enumerated settings const updateprivacysettings = async (settings) => { try { const user = await parse user current(); if (!user) return false; // update privacy settings user set('profilevisibility', settings profilevisibility); // 'public', 'friends', 'private' user set('allowdirectmessages', settings allowdirectmessages); // boolean user set('showonlinestatus', settings showonlinestatus); // boolean await user save(); return true; } catch (error) { console error('error updating privacy settings ', error); return false; } }; 2\ using json objects for complex settings for more complex or grouped settings, you can use a json object const updateallsettings = async (settingsdata) => { try { const user = await parse user current(); if (!user) return false; // store all settings as a json object user set('usersettings', { privacy { profilevisibility settingsdata profilevisibility, allowdirectmessages settingsdata allowdirectmessages, showonlinestatus settingsdata showonlinestatus }, notifications { emailnotifications settingsdata emailnotifications, pushnotifications settingsdata pushnotifications, mentionalerts settingsdata mentionalerts }, theme { darkmode settingsdata darkmode, fontsize settingsdata fontsize, accentcolor settingsdata accentcolor } }); await user save(); return true; } catch (error) { console error('error updating settings ', error); return false; } }; this approach allows you to store complex, nested settings in a single field example from back4gram's settingspage js in the back4gram application, user settings are managed in the settingspage js component the key parts that interact with back4app include // fetching current settings useeffect(() => { const fetchsettings = async () => { try { const currentuser = await parse user current(); if (!currentuser) { navigate('/login'); return; } const usersettings = currentuser get('usersettings') || {}; setprivacysettings({ profilevisibility usersettings privacy? profilevisibility || 'public', postprivacy usersettings privacy? postprivacy || 'friends' }); setnotificationsettings({ emailnotifications usersettings notifications? emailnotifications || false, pushnotifications usersettings notifications? pushnotifications || false }); // other settings } catch (error) { console error('error fetching settings ', error); } }; fetchsettings(); }, \[navigate]); // saving settings const savesettings = async (settingtype, settingdata) => { try { const user = await parse user current(); if (!user) return; // get current settings or initialize if none exist const currentsettings = user get('usersettings') || {}; // update only the specific settings category const updatedsettings = { currentsettings, \[settingtype] settingdata }; // save updated settings user set('usersettings', updatedsettings); await user save(); toaster create({ title 'settings saved', description 'your preferences have been updated ', type 'success', }); } catch (error) { console error('error saving settings ', error); // handle error } }; this code shows how back4gram fetches the current user's settings from back4app provides defaults for missing settings updates only the changed settings category saves changes back to back4app back4gram project find here the complete code for a social network sample project built with back4app step 6 – advanced features account security settings security is a critical aspect of user profile management let's implement some advanced security features for user accounts implementing two factor authentication although not included in the basic back4gram example, you can implement two factor authentication with back4app's cloud functions // cloud function to enable 2fa parse cloud define("enable2fa", async (request) => { if (!request user) throw new error("user must be logged in"); // generate a secret key for the user const secret = generatetotpsecret(); // save the secret to the user object request user set("totpsecret", secret); await request user save(null, { usemasterkey true }); // return the secret and qr code data for setup return { secret secret, qrcode generateqrcodeuri(secret, request user get("email")) }; }); // cloud function to verify 2fa code parse cloud define("verify2facode", async (request) => { if (!request user) throw new error("user must be logged in"); const { code } = request params; // get the user's secret const secret = request user get("totpsecret"); // verify the provided code const isvalid = verifytotpcode(code, secret); if (!isvalid) { throw new error("invalid verification code"); } // mark 2fa as enabled request user set("is2faenabled", true); await request user save(null, { usemasterkey true }); return { success true }; }); from your react application, you can call these cloud functions const enable2fa = async () => { try { const result = await parse cloud run("enable2fa"); // show qr code setup to user setqrcodedata(result qrcode); settwofactorsecret(result secret); } catch (error) { console error("error enabling 2fa ", error); } }; const verify2fasetup = async (code) => { try { await parse cloud run("verify2facode", { code }); // 2fa successfully set up setis2faenabled(true); } catch (error) { console error("error verifying 2fa code ", error); } }; email verification back4app provides built in support for email verification you can trigger a verification email const sendverificationemail = async () => { try { const user = await parse user current(); if (user get('emailverified')) { return { success false, message 'email already verified' }; } await parse user requestemailverification(user get('email')); return { success true }; } catch (error) { console error('error sending verification email ', error); return { success false, error error message }; } }; password change allow users to update their password with proper verification const changepassword = async (currentpassword, newpassword) => { try { const user = await parse user current(); // verify current password by trying to login await parse user login(user get('username'), currentpassword); // if login succeeded, update password user set('password', newpassword); await user save(); return { success true }; } catch (error) { console error('error changing password ', error); return { success false, error error message }; } }; in a production application, you should implement this securely with a cloud function to avoid exposing the username/password combination step 7 – querying user profiles for social features social networks need to let users view other users' profiles here's how to query and display user profiles with back4app fetching other user profiles const fetchuserprofile = async (userid) => { try { const query = new parse query(parse user); // include any pointer fields you want to retrieve query include('settings'); const user = await query get(userid); // check privacy settings const profilevisibility = user get('profilevisibility') || 'public'; const currentuser = await parse user current(); // if profile is private and not viewed by the owner if (profilevisibility === 'private' && (!currentuser || currentuser id !== user id)) { return { id user id, username user get('username'), avatar user get('avatar') ? user get('avatar') url() null, isprivate true }; } // return public profile data return { id user id, username user get('username'), fullname user get('fullname'), bio user get('bio'), avatar user get('avatar') ? user get('avatar') url() null, followerscount user get('followerscount') || 0, followingcount user get('followingcount') || 0, isprivate false }; } catch (error) { console error('error fetching user profile ', error); return null; } }; this function creates a query for the parse user class retrieves a specific user by id respects privacy settings returns appropriate data based on visibility implementing user search to allow users to find other profiles const searchusers = async (searchterm) => { try { const query = new parse query(parse user); // create a compound query for username or full name const usernamequery = new parse query(parse user); usernamequery contains('username', searchterm); const fullnamequery = new parse query(parse user); fullnamequery contains('fullname', searchterm); // combine queries with or query orquery(\[usernamequery, fullnamequery]); // only return public profiles query equalto('profilevisibility', 'public'); // limit to 20 results and skip private fields query limit(20); query select(\['username', 'fullname', 'avatar']); const results = await query find(); // format results return results map(user => ({ id user id, username user get('username'), fullname user get('fullname'), avatar user get('avatar') ? user get('avatar') url() null })); } catch (error) { console error('error searching users ', error); return \[]; } }; in the back4gram app, user search is implemented in searchpage js const handlesearch = async (query) => { if (!query trim()) return; setisloading(true); try { // search for users const userquery = new parse query(parse user); userquery contains('username', query); userquery limit(10); const userresults = await userquery find(); const foundusers = userresults map(user => ({ id user id, username user get('username'), avatar user get('avatar') ? user get('avatar') url() null })); setusers(foundusers); } catch (error) { console error('error searching ', error); // handle error } finally { setisloading(false); } }; back4gram project find here the complete code for a social network sample project built with back4app conclusion in this tutorial, you've learned how to implement comprehensive user profile and settings management with back4app you've seen how to structure user profile data in back4app's user class fetch and update profile information using the parse sdk handle file uploads for profile pictures with parse file implement user settings for privacy and preferences add security features like two factor authentication and email verification query user profiles for social network features back4app's powerful data management features make it easy to create robust profile systems without building complex backend infrastructure from scratch by using the parse user class and extending it with custom fields, you can quickly create a flexible user profile system for your social network next steps implement social connections like following/followers using parse relations add activity feeds to show user actions using parse queries build direct messaging between users with live query for real time updates implement content moderation for user generated content with cloud functions with back4app as your backend service, you can focus on creating engaging user experiences rather than building complex infrastructure for the complete code of the back4gram social network application, including profile and settings management, you can check out the github repository https //github com/templates back4app/back4gram