In this part of the course, we will add a user profile feature to our Bold New Builders Hub. Previously, when users signed in, it displayed only their name. Now, we want to enable users to create a complete profile, including their full name, country, and the apps they’ve built using Bold.
Creating the User Profile Page
We’ll start by designing a user profile page where users can input the following details:
-
Full Name
-
Country
-
Apps Built with Bold
For the apps section, users should be able to add:
-
App Name
-
Short Description (limited to 280 characters)
-
App URL
Implementation Overview
Since we already have an Apps page styled, our task is to ensure that once users enter their app details, they are displayed correctly on the Apps page. We also want a Builders Page that lists all users, their countries, and the number of apps they have built. In the future, we might enhance this with an interactive map to visualize user distribution by country.
Feature Development Process
-
User Profile Page Design
-
Users should have fields for full name and country.
-
The country field should be a dropdown list but also allow users to type their country for easy selection.
-
An “Edit Profile” button to allow users to update their details.
-
An option to return to the main menu.
-
-
Adding and Managing Apps
-
Users should be able to add new apps with a name, description, and URL.
-
A real-time character counter should display the number of characters left for the description.
-
Users should have an option to remove apps if needed.
-
-
Data Persistence with Firestore
-
Profile data should be stored in a Firestore database.
-
Each user’s profile should be initialized in the database if it doesn’t exist.
-
Apps added by users should be saved and displayed properly on the Apps page.
-
-
Enhancing the UI/UX
-
Display proper feedback during save operations.
-
Improve accessibility and keyboard navigation.
-
Add a loading state to indicate when data is being saved.
-
Testing and Deployment
Once the profile page was created, we tested the features in a production environment. During testing, we identified a few issues:
-
The country field was an open text input, which could lead to inconsistent data entry. We updated this to a dropdown with a search option.
-
Profile and app data were not saving due to the database not being set up.
-
Navigation was improved by adding a “Back to Main Menu” button.
After fixing these issues, we deployed the updated profile page and verified its functionality.
Next Steps: Setting Up Firestore
Currently, profile data is not being saved because we haven’t set up our Firestore database yet. In the next section of the course, we’ll integrate Firestore to ensure user profiles and app details persist properly.
A database functions like a closet for storing data. In our case, we need a database to store user details, country selections, and app data. We’ll be using Firebase Firestore to manage and retrieve this data efficiently.
Conclusion
With these updates, we’ve taken a significant step in enhancing the Bold New Builders Hub. Users can now manage their profiles and list their apps, bringing us closer to creating a vibrant community of Bold builders. Stay tuned for the next section, where we’ll configure Firestore to store and retrieve user data seamlessly!
See you in the next part of the course!