In this section, we will add an APS (Applications) page to the Bold New Builders Hub. While a tile for the APS page exists, it currently does not lead anywhere. Our goal is to ensure that clicking on the tile redirects users to a functional APS page displaying all the applications added by members of the hub.
Setting Up the APS Page
Step 1: Creating the APS Page
We will instruct Bolt to create a new APS page at /aps and link it from the APS tile on the home page. The page should display a directory of all applications added by users, including:
-
A search bar at the top
-
Options to sort by:
-
Newest
-
Builder (the user who added the app)
-
Name of the app
-
Once the APS page is created, it should be structured in a way that aligns with the overall design language of the application.
Step 2: Deploying the Page
Once the APS page is built, we will deploy it to ensure it functions correctly. The deployment process will include:
-
Internal navigation using React Router
-
Proper accessibility through the home page
Testing and Fixing Issues
Issue 1: Navigation Back to Home
After testing the APS page, we noticed that there was no way to navigate back to the home page. We instructed Bolt to add a back button, allowing users to return to the home page easily.
Issue 2: Apps Not Displaying
Initially, the apps were not appearing on the APS page despite an existing entry in the database. After investigating, we suspected that authentication was required to view the apps. To resolve this, we ensured that:
-
Apps should be visible to all users, even those who are not logged in.
-
Users need to be logged in only when adding an app.
-
Firestore rules were updated to allow public read access to the APS collection.
Step 3: Updating Firestore Rules
To implement public read access, we requested Bolt to provide new Firestore rules and manually updated them in the Firestore console. After publishing the changes, we tested the application again and confirmed that apps were now visible without requiring authentication.
Enhancements and Final Fixes
Issue 3: Removing Unnecessary Date Display
We noticed that the date of app creation was being displayed on the APS page, which could make the page appear outdated over time. To enhance the UI, we:
-
Removed the date display while ensuring that sorting by newest still functions correctly.
-
Verified that the update was applied successfully by deploying the changes and testing the live application.
Conclusion
By following these steps, we successfully created and refined the APS page for the Bold New Builders Hub. The page now allows users to browse applications without authentication, search, and sort entries efficiently. Additionally, we improved the UI by removing unnecessary elements and ensuring smooth navigation.
This structured approach to testing and problem-solving is crucial in web development, ensuring a seamless user experience and a well-functioning application.
Next Steps:
-
Monitor user feedback and optimize the APS page further.
-
Enhance the sorting options to include additional filters if necessary.
-
Explore additional UI improvements to make the browsing experience more engaging.
Stay tuned for more updates in the next session!