Building a Tangible Online Presence with Outerbase: A Hackathon Journey
How I used Outerbase to create a real-world solution for my father's online presence.
Introduction
For the longest time, my dad has desired a dedicated website. This, in addition to his social media channels, will help him gain a tangible online presence and cater to his growing audience outside Nigeria, where he occasionally travels. This project addresses a critical need for him and allows him to connect with his audience more effectively.
What Inspired Me to Create This Project
It took some time and thinking, but I eventually was able to come up with a wireframe for how the site should look. The particular services and content each page of this web app will consist of gave room for modifications and improvements later on. As a web developer, it only made sense to start a charitable project from home while also beefing up my portfolio. The Outerbase Hackathon came as extra motivation, pushing me to turn this idea into a reality.
I focused on 4 core problems:
creating a unique and custom online presence
allow him to share articles (which he writes at least once a week) with a larger audience
create a medium to publicize his audio messages
create a medium to publicize his published books( in a safe manner such that cannot be replicated or duplicated.)
UI / UX Design
In my quest to create a visually appealing and functional website, I initially considered handling the UI/UX development myself. However, I decided to outsource this crucial aspect to a professional designer, @Qubigs. The goal was to achieve a user-friendly design that balanced simplicity with aesthetics. The wireframes I provided focused on key design principles, including:
a clean and functional look
support for both light and dark modes, and
a pleasing overall aesthetic.
[Link to Design](figma.com/file/x7EXolZKQBXxnu3PDbLwHb/Jedid.. align="left")
The design's core principles were simplicity, aesthetics, and functionality. The use of white and black as theme colors contributed to a clean and simple, yet visually pleasing design. These two primary colors also allowed for the easy implementation of a dark mode that retained its aesthetic appeal. The final UI/UX design not only met these criteria but exceeded my expectations in terms of functionality and user experience while ensuring that too much time was not spent recreating something that would have been easily done with a CMS or website builder. All of this, for a reasonable price.
Functionality
To illustrate how this project functions, I've prepared some explanations and links that outline key interactions and data flow:
OG Image Generation
In the initial phase of the project, I faced the challenge of effectively portraying my father's essence through words and images on the website. Every aspect of the user experience, from sharing the link to viewing the website, was carefully considered. To enhance the website's visual appeal, I harnessed the power of Cloudinary's OGImage component, generating captivating OG images for each page. These images play a crucial role in how the website appears when shared on social media platforms, ensuring a compelling presentation.
Link to Cloudinary Image Components
Additionally, I optimized image rendering using Next.js Image and Cloudinary's CldImage components to maintain image sharpness while minimizing data consumption. This approach provides users with a seamless and visually pleasing experience. The goal was for the web app to secure the top spot in search results when anyone searched for "Dr. Passy Amaraegbu." To achieve this, the content was meticulously crafted and refined to make it both engaging and search engine-friendly.
Furthermore, I implemented Progressive Web App (PWA) features, enabling the web app to be easily installed and used on any device. This step expanded the web app's reach and accessibility, making it a valuable resource for a diverse audience. In summary, this phase involved meticulous planning, creative content creation, and the utilization of powerful image optimization tools to enhance Dr. Passy Amaraegbu's online presence, ensuring it was both visually captivating and search-engine-optimized while providing accessibility across various devices.
User Registration and Login Flow
The Authentication module stands as a crucial pillar of this project, demanding meticulous attention to detail. Within this module, I implemented a Magic link login system using email addresses to optimize user access while maintaining professionalism. This approach simplifies the login process, ensuring seamless and secure communication with users.
One standout advantage is the elimination of the need for users to repeatedly log in and out. Whenever a user interacts with a form featuring an email field, they are automatically logged in, reducing friction and enhancing user convenience. Users also enjoy the flexibility to switch accounts or log out effortlessly from forms incorporating an email field. Moreover, an automatic data storage feature that seamlessly records new details entered by guests, such as name or image, directly in the user's database record was integrated with every form containing an email. This streamlined process removes the necessity for an additional user management UI or page, providing a more efficient and user-centric experience.
In summary, the Authentication module's implementation ensures secure and user-friendly access to the web app. The Magic Link login system simplifies user authentication, maintains professionalism, and offers user control, while automatic data storage streamlines user management and enhances system efficiency.
Book Purchase and Security
Transitioning to the management of books and audio messages, while the messages were readily available on AudioMack, they resided under a different user account. To streamline access, I aggregated the entire catalog, stored it in a database, and provided users with links to listen on AudioMack. However, addressing the books presented a distinct challenge, compounded by a prior piracy incident that had yielded minimal recourse.
My dual objective was clear:
facilitate easy book access while
fortifying security measures against unauthorized downloads and screenshots
all the while ensuring profitability from book sales.
After thorough consideration, I determined that achieving these goals within a web-based environment was arduous. Consequently, I conceived a solution enabling users to purchase books via the website and subsequently download and read them using a mobile app, effectively mitigating screenshot and download vulnerabilities.
Furthermore, I instituted a feature displaying book prices in users' local currencies for a personalized experience. The payment process was streamlined, with Stripe handling international transactions and Flutterwave and PayStack facilitating transactions within Nigeria and Africa. In sum, the approach balances accessibility, security, and profitability for books and audio messages, offering users a seamless experience while safeguarding content and generating revenue from sales.
Blog Post Creation and Social Media Sharing
The final and pivotal component of this project is the blog. My father, being a passionate writer, produces a minimum of one article per week. Creating a blog where he can seamlessly publish and archive these articles not only provides a platform for his literary work but also contributes significantly to his personal branding and online presence. This solution effectively addresses several challenges he faced.
Within the blog section, conveniently located in the admin area, I plan to integrate OpenAI's API to automate the summarisation of each blog article. This automated summary generation process streamlines content management and ensures that readers can grasp the essence of each article quickly. Furthermore, the system will include an option for generating custom-tailored Facebook and LinkedIn posts for every blog entry. This feature will empower my father to engage with his audience across social media, effectively promoting his work and personal image.
In summary, the blog section will serve as the cornerstone of this project, providing a platform for my father's prolific writing and enhancing his online presence. Leveraging OpenAI's API for automated summarisation and social media integration offers efficiency and outreach capabilities that further amplify the impact of his literary contributions.
These explanations provide a visual representation of how users can register and log in, purchase books securely, and create blog posts(admin user). They showcase the seamless user experience and data flow within the application.
Project Completeness
The project is currently about 60% complete, with some features still under development:
Books Checkout Functionality: The checkout process for books is in progress, ensuring a smooth and secure transaction for users.
Populating the Database: The remaining books and messages are being added to the database to provide users with a comprehensive library.
The Mobile App: While the mobile app for reading books is not yet available, it will soon be in development.
The Blog: The blog section is being developed to allow my father to post articles and engage with his audience effectively.
Over the next 2 - 4 weeks, we anticipate that all functionalities, except the mobile app, will be ready. By the end of the year, the mobile app should be fully operational, providing a complete and integrated experience for users.
Driving Impact
Beyond the Outerbase competition, this project holds significant value in putting my father front and center before the partners and people who need his services. It's a platform for him to share his knowledge and connect with a global audience, something he has always wanted to continue since the Covid lockdown. For me, as a developer, it adds another feather to my portfolio, showcasing my skills in problem-solving and meeting real-life needs.
Why I Used Outerbase
As my project advanced, a pivotal challenge emerged—how to effectively manage user cart items. I pondered several solutions, including local storage and session storage, but ultimately, database storage backed by local storage proved the most robust choice for seamless cart management across devices.
Initially, I leaned toward NoSQL databases, given my familiarity. However, as I meticulously outlined data structures and relationships, it became apparent that an SQL database was a more suitable fit. Aware of conventional options like ElephantSQL and Heroku, I sought a more innovative solution, particularly since it had been a while since I last used SQL databases. I needed assurance of their continued open-source maintenance and support.
Requesting DB Visualizer from NeonDB
That's when I stumbled upon Neon, and one feature, in particular, captivated me—each branch could access its dedicated database for testing. My excitement grew when I discovered that Vercel, my hosting platform, offered a hosted version of Neon. My journey with Neon commenced smoothly but hit a roadblock when handling data editing and intricate SQL code. In search of a user-friendly interface for executing complex commands, I initially sought assistance from ChatGPT and even tweeted @neondb about the need for a user interface. Just as I contemplated this need for a user interface, a friend introduced me to Outerbase.
How I Used Outerbase
I integrated Outerbase into my project in the following key ways:
Collaborative Data Management: Outerbase allowed me to view, update, and visualize data collaboratively across related tables, including users, books, messages, carts, and reviews tables. This collaborative data management feature was invaluable in ensuring that data was handled efficiently and accurately.
EZQL for Efficient Queries: I leveraged Outerbase's EZQL to query data effectively while building serverless functions. This feature enabled me to write queries without needing to be a database expert or have strong SQL knowledge. It significantly reduced the time spent on coding and debugging, allowing me to focus on other critical aspects of the project.
In summary, Outerbase was instrumental in ensuring efficient data management and query execution, simplifying the development process, and enhancing the overall functionality and user experience of this project. It was a pivotal tool in bringing this project to life and making it a reality.
Conclusion
In conclusion, this journey of building a tangible online presence for my father has been challenging yet rewarding. Outerbase played a pivotal role in its development, providing the necessary tools and features to create a real-world solution. As the project nears completion, I look forward to seeing how it positively impacts my father's online presence and the broader audience it reaches.
For more info, visit Outerbase and Hashnode.
Follow @hashnode and @Outerbase for their latest news and updates.
Thank you for joining me on this journey! #Outerbase #OuterbaseHackathon