I recently started working on a personal project whose aim is to help users remember their birthdays, anniversaries and any special dates that is important to them.
The app includes features like creating events, sharing and connecting with others.
My goal in this series is to document the decisions and thought process I have had throughout the journey so as to be able to share with others in the future.
Think of this as an online journal dedicated to this project.
Project Technical Requirement
- The project is to be built as a mobile app(android and iOS) and web app (https://never4get.app). We believe that the best usecase/experience is the native app.
- We would have a backend that would service both projects
- Login should preferably be with Google and Apple ID
Initial Plan
My very first goal is to build the application as quickly as possible and get it to the hands of users so as to be able to get quick feedback and iterate the solution.
Basically following the lean startup ideas.
Since I am an expert in building web apps(both backend and frontend) but haven't written a single line of mobile app code before this project, I decided that it would be great if I could build a website and then use tools that can convert a web app to a native app with out writing any code.
This was my initial plan and my first goal was to test this possibility as quickly as possible.
Day 1 to 2
The first day of development was August 3rd 2023. And in 3 days I was able to build the welcome page, sign in page, login with google and onboarding screen after sign in.
The part that took me a tiny time to figure out was the animation in the welcome page and how Next 13 app directory works(this is the first project where I was using it) including the difference between server-side and client side components.
This rapid progress made me realise that I could finish the frontend very quickly if I continued. I however thought it was now time to test out the idea of converting the website to a mobile app
Day 3(Aug 5th): Experimenting
On this day I started researching the different options of converting a website to a native app easily.
For a long time I had thought that Enzyme was the tool for this job but I quickly realised that it is used to convert websites to desktop apps and not native mobile app(android/iOS).
On further investigation I found Capacitor a tool that promises to do this well. Looked like something that would come out well.
After running a few experiments and actually build the website and run it using capacitor and immediately found that the native experience was worse than it was on the web.
These findings brought me to the final conclusion that the best way to move forward was to use a specialised tool and since I had a lot of experience working with React, I settled for React Native.
The first experiment I ran was to see if I could keep the react-native and react code in the same codebase but I couldn't get this to work (as it kept throwing an "invalid Router" error). Thus, I decided that to separate these into 2 different projects.
Day 4(Aug 6th) - Day 7(Aug 9th): React Native
I was able to leverage both the React Native documentation to setup the project using expo Go and configure tailwind(note that tailwind is also used in the web).
I really dislike the way React Native styles component by default but since I was able to add tailwind, I found that I could re-use a lot of the styles from the web.
Thus, I was able to copy and paste components from the web project and change their styling and "elements" to use native elements.
However, there was still a lot of work. I couldn't get the login with Google to work, rendering SVGs required extra effort, a simple transition: was implemented using a whole new component(Animation.View) etc. It required a lot of googling to understand what was going on.
Even though I couldn't get the login with Google to work, I was able to roughly get to the place I was on web. I did the welcome, onboarding, signin and events screen in this time. Copying, pasting(and a lot of), refactoring code from the web to get it to work in the early morning(aka 12 am ish) of August 9th
Day 7(Aug 9th): Way forward
As at the time of this writing we are currently at 1pm Aug 9th. I have thought about the best strategy to maintain speed and momentum in this project and I am aware that using React Native is going to slow things down a bit.
There are still unknowns like:
- Login with Apple
- Notification API on native apps
- Payments and how it would work
- etc.
Thus, I have decided to build the web app end to end this month, launch it(aka show a few people how it works), get feedback as quick as possible then gradually work on the native android and iOS from next month.
Conclusion
So far so good. Good progress has been made and a final plan hatched.
It is also interesting to see how much can happen in 8 days.
Top comments (0)