Check my GitHub to see what I'm up to lately.
Go to atrable.com to learn more about Atrable.
We've made several videos for advertisement. We're going to publish them once I implement the new core features.
For audio, tap the buttons ◀◀ and ▶▶. For videos, double-tap to skip or rewind.
Previously, the app checked the database every time you went back to the home page. Now it's updated in real-time.
Diaries on the home are sorted by the time uploaded, and the diaries on the profile page are sorted by the time created.
It shrinks friends' profiles on the home by default.
Based on the feedback from David
Before
After
Get notified when your friends upload a diary.
TODO: Subscribe to a public figure
I like greeting people
Opening an external link to change the password doesn't give you a good experience. It's better to change it without leaving the app.
If you go through "Forgot Password", it'll still guide you using an external link though.
Atrable chat notifications were shown way below the notification center with no profile photo on Android, and I found the reason why! The conversation notification requires Shortcuts to be implemented, but I forgot to do that. I did it now though.
Check the date & visibility of diaries right away
For "Upload Diary" page
iPhones don't have the back button, I have to implement it separately :0
Share Link and Export Audio/Video
"Share your actual stories" → "Record your life stories."
The word "actual" in the phrase "share your actual stories" kinda gives the feeling that they should only share the stories that they think are meaningful. We want to be more welcoming, so I changed the motto to "Record your life stories."
I was super busy with Busking Club and final exams 😵
and it looks like this 😎
Scroll vertically to scroll through friends, scroll horizontally to scroll through a person's diaries.
An extra layer of security with a phone number
Gotta support a secondary method soon
My friends often forget about Atrable, so I thought reminding them every week would bring them to engage more.
Now (= Aug 5, 2023), I learned that this feature doesn't bring people to engage that much (it probably does make people open the app once or twice, but it doesn't give people enough motivation to start recording diaries). I'm going to deprecate this after implementing something else 😼.
Switching the toggle would be saved right away.
to prevent David from bugging the app UI using endlessly long text.
I've been holding off releasing v1.3 for a while. I finally released it!
I put some padding & constraints on widgets so that they won't look broken on big screens.
The notification shows the profile photo of the user (Android)
I feel like it's still a bit buggy though. Gotta figure it out.
I thought the old one (from Oct 2022) wasn't really appealing, so I made some modifications.
Still working on it
If the app gets terminated while uploading a diary or sending a chat message, it will ask you if you're going to retry the uploading / sending it on the next launch.
Camera on/off, flip camera, zoom in/out, flashlight on/off Ffmpeg was so hard to deal with. I implemented it though 😵💫.
Send and receive photos. My main focus is on audio and video rather than photos, but you can send photos if you want to.
Previously, all the messages were loaded directly from the server. Now the messages are permanently saved on your device once you read them.
Audios, videos, and other imports are not saved on the device, and are saved on the server instead. It'll take up too much storage if all the audios, videos, and photos get saved on the device.
Check if the notification for your new message is successfully delivered.
Open web URL and phone number contained in a text.
Thumbnails are now generated and displayed for videos.
Previously, the views (listens / visitors) and the reactions were recorded, but there was no way to see who they were. I wanted to know who it was that reacted or listened to my diary, so I made this feature.
Those tiny circle dots indicate new friend requests and chat messages.
Displaying foreground notifications using flutter_local_notifications was too complicated for my use.
Instead of using the package to display notifications from the Flutter side, I wrote some code to sync the currently opened page with the native side (iOS and Android) and filter the incoming notifications based on the currently opened page.
Because GatsbyJS is not made for Dynamic Server Side Rendering, I migrated to NextJS to fetch some data from the DB for profile pages.
I also made the website look cooler by displaying some videos on the homepage.
LinkedIn: www.linkedin.com/company/atrable/
GitHub: github.com/atrable
When the Past Records page opens, the app freezes for like a one full second. The function for sorting the past records was taking a long time, so I wrapped the sorting thingy with compute to prevent it from blocking the main thread or smth.
Previously, the audio and video messages were sent right after ending the recording in a chatroom. I edited it to be able to display the preview of the audio / video before sending it.
It now looks more similar to other audio / video messages.
This allows you to send the recorded audio / video to others through chatrooms.
Notifications on iOS now show the profile photo.
I couldn't develop this (Conversation Notification) for Android, as I couldn't find a way to show profile photos properly in a notification (firebase-android-sdk Conversation Notification Support for Firebase Messaging #4500).
I wanted to share my Atrable profile with my friends using a QR code, instead of typing the username on the search page. I first implemented a way to display the profile on the web. Then I added a button to get a profile QR code in the app.
I'm using GatsbyJS for www.atrable.com now, but I'm starting to see some limitations of Static-Site-Generation :/ The profile is loaded after the initial rendering completes. As a result, if the link is shared through chat apps or social media, the title stays in the default one (which is literally @<!-- -->[...]<!-- --> | Atrable<!-- -->). Planning to migrate to NextJS soon.
Example: www.atrable.com/u/shawn
The buttons got more squishy.
I modified the Past Records page so that people can select the records and delete / upload / share them.
My friend told me that Atrable would be good for my college application. I wasn't thinking about it, but I think that's true 👍.
The audios were called "Audio Post", but now I think the word "diary" fits better than "post".
When I say it's a "post", it gives me a feeling of disclosing myself to the public. It isn't wrong, but the audios are more daily, personal, and reflective, which are closer to diaries.
I started to think that comments are not for "diaries". Through comments, people literally "comment" on others. This wouldn't be desirable for an uploader who just wants to record their day.
Diary comments are deprecated.
Instead, people can now send their diaries to friends and the friends can reply to it.
The old db structure for post visibility settings didn't make sense, so I made some changes. It was quite a huge change.
(Nobody except the manager seems to be interested tho)
I thought the old one (from Aug 2022) wasn't really appealing, so I made some modifications.
I released v1.1.2 (Aug 2022 works) on the App Store.
My Android friends also want to get this app, so I gotta release it on the Play Store too.
You slide the post sideways to listen to the uploader's previous / next post.
This lets you see the full story of the uploader.
Comments look more like a single chat thread.
I thought the old one (from Jul 2022) wasn't really appealing, so I made some modifications.
I made a video to submit this app to the Congressional App Challenge and advertise it at once. I was trying to kill two "birds" with one "stone", but I think I lost both birds; I was being too informal to submit it to the contest, but the video was quite boring to be a good advertisement. I'm going to refilm it 😼
It used to be "Share your day with audio and video." I thought it was too wordy, so I changed it to "Your not-so-special moments, share it on Atrable"
I made these pictures using Vectornator.
Share With Friends with OnlyFriendsPostShare With Friends didn't make sense, so I replaced it with OnlyFriendsPosts instead.PublicPost and OnlyFriendsPost. Anybody can view a PublicPost, and only friends can view an OnlyFriendsPost.There were a lot a lot 😩😵💫
(David strongly suggested)
Using a class named ManageAudioPlayers (I made it!), each page can efficiently manage audio plays.
It was time-consuming but easier than I thought. I implemented a way to turn on the camera when the audio recording is going on, mix the recorded audio and video, and play the video files using the video_player package.
I was sad because of the limited functionality of the video_player package, but it works!
On the SuggestedPosts page, random public posts are fetched and displayed.
Audios are automatically played as the page is scrolled.
In PostDetailsPage, the uploader can see the details of the post (views, likes, and comments). Comments are accessible here.
You can like a post by pressing the ❤️ button.
You can comment about a post on the linked PostCommentChatroom, which is a public chatroom for anyone.
View would be counted when more than 1/3 or 3 sec of the audio is played.
Share With FriendsIn SharePost, I replaced Send to feature, which was used to send the post itself through chatroom, with Share With Friends.
With Share With Friends, people can allow only some of their friends to view the post.
Show the time when the message was sent, with a better design.
If it's not a DMChatroom, show people's profiles.
Sending indicator with shimmer effect.
Much better pagination; I used infinite_scroll_pagination to fetch older messages and used FirebaseFirestore real-time update feature to fetch newer messages in real-time.
Continue with Apple when signing in/up, don't force/require people to verify email: only show a popup, allow users to check past records locally, set correct keyboard text capitalization settings, dark mode, ...
I implemented audio-related features such as sharing an audio post, sending an audio message, playing those in a chatroom, etc.,
I made basic features that a social networking platform should provide, such as friend relationship management, viewing others' profiles, heart (like) button, and sending chat messages.
I got the idea of an audio-based social media. Existing social media platforms focus on photos, which makes people focus on appearances. On the other hand, audio lets you focus on the actual stuff that is going on. Audio also gives a rich feeling of being connected, and I loved it.
I made Main Page, About Page, and Get Page to explain my idea of the app using Google Sites. It's quite different from how Atrable is like now. (now = Dec 30, 2022 21:41:20)
I built an app using Flutter by watching tutorials on YouTube, reading official/unofficial documents, and reading questions & answers on Stack Overflow.
The main focus of the app is to make people share a post and directly chat about it.
(It's a prototype, so nothing really works well)
I tried making a website where people can share their travel stories, view other traveler's stories, and follow travelers. But guess what chicken butt, I only implemented the fundamental authentication system there.
Check Shawn-sudo/space-shuttle for more info
