DEV Community: April Smith

Building a Privacy AI Parent Chat with Ably AI Transport

April Smith — Sun, 01 Mar 2026 22:22:11 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

Parents today face a difficult choice: stay connected with their community on platforms like Facebook, WhatsApp, or Instagram or protect their family's privacy.

These Big Tech platforms:

Collect and monetize your family's data
Require phone numbers and personal information
Mix your private family life with public social media
Show ads based on your parenting discussions
Own your conversations

What I Built

Our Solution: Privacy First Parent Chat

Elite Parenting is a private, real-time chat platform built specifically for parent communities who want to stay connected without sacrificing their family's privacy.

The app is a private, an invite only chat for parent communities who want their conversations to stay theirs.

🔒 Privacy First

No phone numbers required, access via secure invite tokens
No Facebook, Google, or social media login
Invite only communities
No data mining

💬 ** Real-Time Community Features**

Smart Group Chat:

Real-time messaging powered by Ably Pub/Sub
See who's online right now with live presence
Typing indicators show when others are responding
Like/heart reactions to show support without cluttering the chat
Message history automatically loads when you join

Perfect for parent communities:

"Has anyone tried sleep training with a 2 years old?"
"Looking for pediatrician recommendations near downtown"
"Who's available for a playdate at the park this Saturday?"
"My toddler won't eat vegetables, please tell me I'm not alone 😅"

🤖 AI Parenting Assistant (The Game Changer)

This is where Elite Parenting truly shines. I've integrated a resumable AI assistant powered by Ably AI Transport, a technical innovation that makes AI conversations:

Resumable & Reliable:

AI responses survive tab reloads and network drops
If you close your browser mid-conversation, the AI picks up where it left off
No lost response and every token is preserved

Multi-Device Support:

Start a conversation on your phone while cooking
Continue it on your laptop after bedtime
The same AI conversation appears on all your devices

Privacy-Conscious Help:

Ask parenting questions without judgment
Get activity ideas for screen-free time
Summarize recent chat discussions you missed
Brainstorm solutions for common parenting challenges
Share helpful AI responses directly to the group chat

Example AI Conversations:

"What are some screen-free activities for toddlers?"
"Tips for getting kids to sleep earlier?"
"How do I handle tantrums in public?"
"Summarize what the group discussed about schools this week"

Demo

https://private-parents-chat.vercel.app/

message me for access token

Code

https://github.com/aralovelace/private-parents-chat

How I Built It

Vibe coded it with Claude and integrated the best technologies:

Ably AI Transport

Unlike traditional AI chat where HTTP streaming breaks when you reload the page, I use Ably AI Transport to stream AI responses through a real-time pub/sub channel. This
means:

Zero lost tokens, your every word is preserved and replayable
Multi-device magic, you have same conversation on phone + laptop simultaneously
Offline resilience that means if your network drops, you catch up automatically
Transparent streaming, you will seee each AI response token as it arrives
Human handoff ready, you can share your AI conversation context with others

Built on Modern, Reliable Stack:

Next.js 14: Fast, server-rendered React app
Ably: Enterprise-grade real-time infrastructure
Google Gemini 2.5: Advanced AI with natural, helpful responses
TypeScript: Type-safe, maintainable code
Tailwind CSS: Beautiful, responsive design

How to add custom domain in Firebase Hosting

April Smith — Sun, 16 Aug 2020 21:18:27 +0000

If you have an existing domain and wanted to point your subdomain to your web app that you deployed in Firebase then here's how:

In your Firebase Hosting Dashboard, Click the 'Add custom domain' button.
Enter the domain
Verify the ownership by copying the TXT code
In your Domain, go to Manage DNS Records or similar and add a new TXT type with your subdomain and paste the TXT code
Back to your Firebase page, it should let you verify the ownership and now it will give you the IP address.
Then back to your DNS Records page, add a new A type, with your subdomain and paste the IP address.
Then Go Live.
Wait for a few minutes for the propagation, it depends on your DNS but usually it will only take 15-30 minutes.
You can check once its live in your Firebase dashboard if the subdomain says 'Connected'.

That's it! Let me know if you have questions

How to Deploy Angular project to Firebase

April Smith — Thu, 06 Aug 2020 10:38:20 +0000

This is just a simple instruction on how to deploy your Angular project to Firebase. Note, this is for static or serverless project only. If you have PHP or Node.js separate project, you can look for another tutorial on how to deploy them.

Considering you completed your Angular project, now compile your project using this command ng build --prod
Login to Firebase account ( if you don't have account yet please create).
Create a new project
Back to your codebase, open the terminal and type firebase init
In this question '? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices' select Hosting: Configure and deploy Firebase Hosting sites.
Select 'Use an existing project' and choose the project name you just created.
Then the next question would be 'What do you want to use as your public directory?' type dist/{codebase project name} . The public directory of your angular is the compiled folder of your project.
Next it will ask you 'Configure as a single-page app (rewrite all urls to /index.html)?' type Yes if you type no, there will be a routing issue when you refresh your app
then it will ask you to overwrite - Type No
then type firebase deploy if you want to leave a comment type firebase deploy
Then it will let you know the URL of the project you deployed.
If you have changes or updates just use firebase deploy -m content changes then in your firebase hosting page, you can see all your deployment history, and your URL.

That's it! simple! I love Firebase! Share your firebase site by commenting it below :)

Deploying your ReactJS App to Github Pages

April Smith — Fri, 22 May 2020 08:42:36 +0000

Why host your React portfolio app with GitHub Pages?

It's Free!
Real time updates
Making your code open-source, It is a great way to showcase your skills Custom-domain, if you have existing domain, you can add a CNAME file to your repository
It's Easy!

Note: GitHub Pages is a static service and does not support server-side scripting such as, PHP, Ruby, or Python.

Here is a new quick tutorial on how to deploy your reactJS application via Github Pages. I still prefer Heroku for dynamic web apps but here is the quick guide if you have a very simple React App and wanted to deploy it quickly to add it to your Frontend Development skills portfolio

Steps:

Note: I am using yarn as my package manager.
I already created my github repo and React project

Install GitHub Pages package as a dev-dependency

yarn add gh-pages

Add properties needed to package.json file

"homepage": "http://{github_username}.github.io/{your-app-repo-title}"
"scripts": {
  //...
  "predeploy": "yarn run build",
  "deploy": "gh-pages -b master -d build"
}

Then Deploy it in your local terminal

yarn deploy

And Done! The branch that Github pages used is the gh-pages not the master. Everytime you deploy it will update the gh-pages branch.

You can now check your app at this URL format: http://{github_username}.github.io/{your-repo-title}

setting-up PHP CodeSniffer in PHPStorm

April Smith — Wed, 20 May 2020 11:01:45 +0000

I will be sharing one of the essential elements on following Coding Standards when you are working with a team.

PHP Code Sniffer is a tool to detect violations of a defined coding standard such as PSR2. Read more about PHP_CodeSniffer.

On this Instagram post, I demonstrated how to set-up PHP CodeSniffer in your PHP Storm

COVID-19 Live Updates WP Plugin

April Smith — Wed, 20 May 2020 10:46:29 +0000

Everyday I always check the number of Coronavirus cases not just in the UK but also in other countries. The thing about checking it on other websites is that the websites often contain ads, or don’t easily allow me to compare between countries in the format I want.

So I realize why not built my own using covid19API? I decided to build it for WordPress, so I can also share it with others. The plugin wasn’t so complex in terms of coding (was not using WP Plugin Boilerplate) I just used basic PHP OOP, Vanilla JS and some JQuery packages. There is no design, so you can update the styling once you load it on your site.

When people say WordPress Development is dying, they must not have seen the statistics! 35% of the Internet is powered by WordPress, and it is still growing ( 78.9% of websites in the world still use PHP).

So I am sharing this plugin to everyone ( GNU License) and happy for some coders out there to improve it. You can download it on my GitHub –

And you are done!

You can download or fork it at – aralovelace/Covid19Report-WP-Plugin

Here is how it looks like:

Credit:

API Data Source: covid19api.com