Hello! Thanks for being a part of the journey so far. I’m participating in a hackathon notJustHack 2024. The challenge is to build and publish a mobile app to play store or apple store from scratch to finish within the month of December 2024.
I begun writing these series because I’ve built numerous mobile apps in the past and Coco AI is my latest project where I channel all of my learnings and experience from previous years and projects into building Coco AI. My goal is to share the building process best I can and maybe help one or two devs who are starting out.
In the previous article, I shared my minimum non negotiable initial design for building a new project. In this article, I’ll be sharing my process of how I converted the design to code and now we have the first version of Coco AI mobile app.
I used just a laptop and the internet and I was able to build an SLP (Simple, Lovable and Complete Product) for Coco AI under two weeks. I’ll be taking you through the journey so you’ll be able to understand how it was done and you can also apply some of what you learn here to building other products.
This article is primarily for software engineers, mobile app niche. I’ll be sharing technical details and implementation.
Alright, without further ado, let’s dive into it!
I published the first article on Dec 8, I had answered six important questions before starting a new project. The second article was published Dec 17, I shared the minimal design implemented before I started building Coco AI. On Dec 22, I made my initial commit to Github and by Dec 30 I had completed the SLP ready to be published to play store.
I have about 3 years experience building software so you can take that into account, at the start of my career I wouldn’t have been able to pull this off but if you’ve been following from the first article to the second article and you complete this one then I challenge you to try your hands at building a project for yourself using all the information I’ve shared in these articles. It won’t be easy but I’m confident you can get it done.
Also important to mention that another reason for my speed and efficiency is thanks to recent development in AI as well. I pair program with Claude and Github CoPilot and if you’re not using AI you’re doing yourself a bit of a disservice.
I use a mac computer so some commands might be different for a windows computer but it’s nothing a simple google search can’t solve or ask your favorite LLM.
Now let’s dive in deeper to the main gist; building Coco AI from scratch using just a laptop and the internet in less than two weeks.
So I’m assuming you have your laptop and fast stable internet connection handy right now. First thing you need to do is install Flutter for those that don’t have it currently.
https://docs.flutter.dev/get-started/install
The link above is all you need, it takes you through the steps and if you follow everything correctly we should be able to move to the next step.
Flutter is a UI toolkit built by Google for building mobile apps. With Flutter you can manage a single codebase and have apps for ios, android, web, linux, macos, windows. There are other technologies for building mobile apps but I’ve been using Flutter for about three years now and the developer experience is top notch.
I’m using Coco AI as a case study but you can follow these steps to build any other mobile app. There are numerous inexhaustible ways to build a mobile app and not one of them is the best it all depends on what works for you personally in addition to industry standards and best practices. One of my favorite things about being a software engineer is the freedom to be creative and unconventional, there are no rigid rules or laws binding a software engineer’s creative execution of a task.
After installing flutter, the next thing to do is build a new flutter project in vs code. Visual Studio Code (vs code) is an integrated development environment (ide) built by microsoft and it’s where most of our work as software engineers is done.
To build a new flutter project do the following:
open vs code
type command + shift + p together, it opens the command palette
search for flutter: new project, click on it
choose application or empty application. I use empty application because i don’t need all of the sample code that you get when you use application but as a beginner you can use application so as to explore the codebase better. After choosing type of application
choose the folder you want the save the source code and the name for your application, click enter and you have your very first flutter project ready to be carved into the software you want.
Alright, great job! So far we’ve been able to install Flutter and start a new flutter project. Before we go further we need to make a long term plan for the finished product i.e we need to pick our technical stack.
A flutter app comprises of UI (screens and pages), Backend (data storage and retrieval) and state management (data handling and management).
By default we’re using Flutter to build our UI, for our backend we need to make a decision, there are two options, we can code the backend ourselves using a different programming language like Python or JavaScript or we can use a backend as a service platform like firebase or supabse. Initially because of the nature of the app, using gemini api for generative ai functionality, I intended to code the backend myself using Python but due to time constraints I ended up opting for Firebase. Firebase is quite easy to setup and you can get started in no time with full backend capabilities without additional coding.
For state management, that has always been a topic of discussion for Flutter developers but my go to state management solution is flutter bloc so that’s what I’ll be using.
So now we have our frontend, backend and state management solution all figured out now we dive into coding.
First thing you want to do after creating your new project and deciding on the stack is to setup firebase for the project.
By following the link above, you can easily create a firebase project and link it to your already created flutter app.
Awesome! Upon completing the step above we move to the next part. You’ll notice in your folder structure, a file named pubspec.yaml. This is we store all the external dependencies or libraries used in our project.
dependencies:
// firebase
firebase_core: ^3.9.0
firebase_auth: ^5.3.4
cloud_firestore: ^5.6.0
google_sign_in: ^6.2.2
sign_in_with_apple: ^6.1.4
// state management
flutter_bloc: ^8.1.6
equatable: ^2.0.7
// business logic
google_generative_ai: ^0.4.6
table_calendar: ^3.1.3
intl: ^0.19.0
Above are the external dependencies I used to build the Coco AI app. These are necessary libraries that do not come by default with Flutter so they have to installed from pub.dev a platform for getting these libraries.
The first five dependencies are necessary to use with Firebase to access the database and also for authentication. Flutter bloc and equatable libraries are necessary to use bloc as our state management solution. Google generative ai is to access gemini api while table calendar and intl are for accurate calendar and time functionalities in our app.
Alright so let’s recap, we’ve installed flutter, started a new project, picked our stack, added firebase, added firebase and state management dependencies. Good, now we continue our journey.
A quote comes to mind at this point, probably made by Abraham Lincoln, though I’m not entirely sure, it says “If I have eight hours to cut down a tree, I’ll spend the first six sharpening the axe.” That applies to us because every other thing we’ve done from the first article to this point has been sharpening our axe to ensure the tree is cut and delivered when it’s needed.
Like I said in the previous article, most mobile apps follow this pattern:
splash screen → onboarding screens → authentication screens → profile setup screen → core business screens.
Since I was building this project for an hackathon I didn’t want to bother initially with splash screen, onboarding screens, auth screens, I wanted to ensure I got the core business logic right then I can go back to the rest.
The first core screen I had to implement was the profile setup screen. Coco AI is an app that makes it easy to create content calendars and schedule posts for various platforms. When the user which ideally would be a social media manager first downloads the app, they are to create a profile which Coco uses to suggest posts for different platforms.
Building a form is not difficult but building a form that captures the required information, not too much not too little with pleasant user experience is not very easy. I had to make some research and also consult my favorite LLMs and here’s what I came up with.
I collected the following data:
Brand/Profile Name
Industry e.g Technology, Fashion
Brand Personality e.g Playful, Professional
Target Platforms e.g X, LinkedIn, Instagram, TikTok
Content Types e.g text, video, image, stories
Target Audience (this one is optional, if the user doesn’t fill it it’s still okay)
Unique Selling Proposition i.e what makes your brand stand out
Content goals e.g increase brand awareness, promote sales
With this, Coco generates a content calendar for one week based on your profile and platforms you chose. The content calendar is all very editable and customizable and up to the user to manage, Coco AI ensures you can focus on creating content without worrying about much else.
Above is what the final form looks like. I should note that it took a lot of iterations to get here, the initial form I went with collected more info like tone of voice and schedule but I had to try and fail numerous times to get this perfect blend. Trying and failing and reiterating is what’s required to be a successful software engineer, while it can be painstaking and frustrating when you get it right which you’ll always eventually do, you’ll realize it’s worth it.
Right, our form is ready, connected with the backend and state management, code snippet shared below. We need to move to the home page. On the home page is where we display the content calendar to the social media manager. It should have date, time, platform, type of post, reason for post, actual post, it’s usually presented in tables and I had to brainstorm a lot thinking of how I’d display all of that cleanly on mobile but while I went on with trial and error and consulting LLMs I realised that for the home page and profile feature to work properly I need an authentication system to recognize the user creating the profile.
class ProfileBloc extends Bloc<ProfileEvent, ProfileState> {
final FirebaseFirestore _firestore;
ProfileBloc(this._firestore) : super(ProfileState()) {
on<CreateProfile>(_onCreateProfile);
}
Future<void> _onCreateProfile(
CreateProfile event,
Emitter<ProfileState> emit,
) async {
emit(state.copyWith(status: ProfileStatus.loading));
try {
final uid = FirebaseAuth.instance.currentUser?.uid;
if (uid == null) {
throw Exception('User is not authenticated.');
}
final profileData = event.profile.toJson();
if (profileData.isEmpty) {
throw Exception('Profile data is invalid or empty.');
}
await _firestore
.collection('users')
.doc(uid)
.set({'profile': profileData}, SetOptions(merge: true));
emit(state.copyWith(
status: ProfileStatus.success,
profile: event.profile,
));
} catch (e) {
emit(state.copyWith(
status: ProfileStatus.failure,
error: e.toString(),
));
}
}
}
I already implemented the splash screen, the splash screen is the first screen you see with the app logo when you open up the app. This screen is necessary because from there we can do some important logic like routing the user to the homepage if they’re signed in already or routing the user to the onboarding and authentications screens if they’re not signed in.
Focusing on the auth screen, I reused code from a different project to implement the complete functionality for sign in with google, sign in with apple and sign in as guest and in no time authentication is enabled. I can now identify users that create profiles and finally I have to implement the home screen.
The home screen ended up quite good eventually, a lot of iterations but I was able to come up with a simple intuitive design that captures and showcases all the required data clearly. I divided the screen into three, the title section at the top, the calendar section beneath it and the content section at the bottom.
Social media managers can tap on any day on the calendar and they’ll see content suggestions for their preferred platforms. They can make notes or start drafting the post beneath the suggestion. They can also delete suggestions and add new suggestions for any day they want. Also, social media managers can set the time they want to publish the post, by default the content is in draft mode, after deciding on the time to publish the post the social media manager then updates the content to scheduled mode and after the post is published it is updated to published mode.
And that’s it. First version of Coco AI is ready for android. Further configurations need to be made for other platforms like ios or web.
Simple, loveable, complete. Next I turn my focus to deploying on play store in order to complete the hackathon. First step towards that is to change the app icon from the default flutter icon to an icon of our choosing. The link below is an excellent resource on how to do this.
https://medium.com/flutter-community/change-flutter-app-launcher-icon-59c31bcd7554
And that’s where I’ll be closing the curtains on this article. If you’ve made it this far, I congratulate and thank you. I thoroughly enjoyed writing this and sharing it and in the next article the app should be available on play store and I’ll share the process from completing coding to publishing live as well as all my lessons in future articles.
https://github.com/victor-onoja/content_ai
Above is the github link, full source code for Coco AI app can be found there. You can find me in the comment section or send a mail to odohvictor47@gmail.
Thank you.