<aside> <img src="/icons/book_blue.svg" alt="/icons/book_blue.svg" width="40px" /> Get ready to build your first habit tracking app!

To make our live build session more efficient, please do the following before the session start time!

1. Sign up to Flutterflow here.
2. Connect to firebase following this tutorial. (If you do not want to do this step, simply input “habit-tracker-demo” as the firebase project id to connect to my demo database)
3. Get familiar with the workspace here.
4. [Optional] Clone my sample app here and check it beforehand!

IT’S TIME TO BUILD 🙌!

</aside>

Flutterflow Build Session Step-by-step Guide

Hi no-coders! Jasper from @nomocodes here! In today’s session, we are going to build the core functionalities of a personal habit tracking app. By the end of the session, you should be able to build the following features.

1. A signup, login page for user authentication.
2. An onboarding setup screen to get users to:
   1. Upload profile picture
   2. Add username
3. A home page for user to
   1. Add new habits
   2. See ongoing habits
   3. Go into habit details page
4. A habit details page to:
   1. Mark habit as complete
5. Add new habit widget to:
   1. Add new habit to user’s habit list

0️⃣ Formulate a plan with AI.

You can use ChatGPT or Bard or Nocodeflow.io which is a tool I have built to help you generate a plan that includes screen planning, feature planning, database planning and as well as a user flow chart to help visualise the plan.

If you are using ChatGPT or Bard, a prompt could look like

“ You are a UX consultant. I want to make a habit tracking app for user to mark off everyday and track progress. Provide all relevant screens, features, user stories and database schema design.”

If you are trying nocodeflow.io, you can simply put

“ a habit tracking app for user to mark off everyday and track progress.”

And tadaaaa! you will have a good baseline plan that you can now customise from.

For our workshop, let’s refer to this plan that i have generated with nocodeflow.io here.

Start project with a plan!

Alright, let’s get right into building!