DEV Community

Cover image for I built my app in React, React Native and NextJS. Lessons learned.

I built my app in React, React Native and NextJS. Lessons learned.

Ash G on June 24, 2021

I developed an offline-first personal Kanban app called Brisqi and launched it for 5 different platforms. I started this project with 2 purposes - ...
Collapse
 
josiasaurel profile image
Josias Aurel

You built such a nice app. Again the offline thing is what like most about it. Most productivity apps today require an internet connection and where it is not much affordable, it becomes an issue. Keep doing the great work.

Collapse
 
ash_grover profile image
Ash G

Thank you Josias, I'm glad you liked the app.

Collapse
 
benjaminwfox profile image
Ben Fox

Great points! I particularly think "Use third-party utility libraries sparingly" is highly under-rated and people turn to packages for functionality they could do in a trivial amount of time, and with functionality better suited to their specific use/edge-cases

Collapse
 
ash_grover profile image
Ash G

Thanks and I agree.

Collapse
 
alvin30595 profile image
Alvin Lai

Did you used NextJs as your backend as you only mentioned it for the product website? tq

Collapse
 
ash_grover profile image
Ash G

I used NextJS for the website. For the backend, I use Firebase and Google cloud functions.

Collapse
 
alvin30595 profile image
Alvin Lai

oh? will be better if you could explain in the article how you manage your backend o, seems interesting to hear that.

Thread Thread
 
ash_grover profile image
Ash G

That would be out of scope for this article as this was mostly about React framework. I'll do another blog post soon on offline-first apps design which will give some insights on how I designed mine.

Thread Thread
 
alvin30595 profile image
Alvin Lai

That will be great, thanks for that. Hope to see it soon.

Collapse
 
gandreini profile image
Giulio Andreini

How did you manage the repositories? Are there common parts in the ReactJS, React Native and NextJS repos? Or just separate repos?
Thanks!

Collapse
 
ash_grover profile image
Ash G • Edited

They all are in separate repos. Architecture for both React and React Native code is similar but the code is different. Also, React Native has some quirks which I have to careful with, so managing each repo separately was the way to go for me.

NextJS is completely different as I used it for the website only, so its in separate repo.

Collapse
 
gandreini profile image
Giulio Andreini

Thanks for the answer! Are you aware if there could be a way to share some parts of the repos to avoid duplicating code? I imagine that some parts of the code (utilities and helpers, fetch from API...) must be similar on all the repos.

Thread Thread
 
ash_grover profile image
Ash G

I'm sure there could be code which I could refactor and share between both projects. However, I wanted to get the app out there in the hands of users as soon as possible. The architecture at the moment is similar so its manageable and since I have to be careful on the React Native side, it works for me this way.

Thread Thread
 
gandreini profile image
Giulio Andreini

Thanks for the answer!

Collapse
 
suvasysbanik profile image
Suvasys Banik

What I liked most is this part -> " I started this project with 2 purposes - to learn React..." 😊👍

Collapse
 
youpiwaza profile image
max

Pretty good advice, thanks for the experience sharing :)

Collapse
 
yougotwill profile image
Will G

Great post! Very informative and I look forward to future posts.

Collapse
 
ash_grover profile image
Ash G

Thanks. I'll doing another one on offline-first apps design soon.

Collapse
 
fofosudarko profile image
Frederick Ofosu-Darko

Awesome!!!

Collapse
 
ash_grover profile image
Ash G

Thanks! :)

Collapse
 
weirdguppy1 profile image
weirdguppy1

Wow! Great concept 👏👏👏👏👏

Collapse
 
darylaranha profile image
Daryl Aranha

Wow... That app is well designed.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Good article seems like a really good learning experience.

Collapse
 
mangor1no profile image
Mangor1no

Your desktop app is incredible smooth. Great work!

Collapse
 
ash_grover profile image
Ash G

Thanks! I'm glad you liked the app.

Collapse
 
devland profile image
Thomas Sentre • Edited

Awesome app. But there is no authentication sign up form for the Android app (only sign in form ). Please try to fix it .

Collapse
 
ash_grover profile image
Ash G • Edited

Thanks. I'm glad you liked the app. Android and iOS app can't have sign up forms in the app according to their store policies. You have to sign up from the website.

Collapse
 
devland profile image
Thomas Sentre

Okay. Thanks for sharing .

Collapse
 
aniruddhabara profile image
Aniruddha

This is so nice. The offline capability makes it a winner. Great job.

Collapse
 
ash_grover profile image
Ash G

Thanks, I'm glad you liked it.

Collapse
 
codewithmaaz profile image
Muhammad Maaz Shakeel

Awesome

Collapse
 
alecbsherman profile image
Alec

Great write-up. Thanks!

Collapse
 
chrisijoyah profile image
Chris Ijoyah

Nice work!

Collapse
 
trailrun80 profile image
trailrun80

Could you expand a bit on the role of Electron? Why did you use it and how?
Also, does the app also work as PWA, if not, did you consider PWA at any point?

Best

Collapse
 
upupkenchoong profile image
Ken Choong

Is all the app in a monorepo??

Collapse
 
ash_grover profile image
Ash G

Different repo for each.

Collapse
 
duridah profile image
durid-ah

The app looks amazing! Does it support any text formatting in the cards?

Collapse
 
ash_grover profile image
Ash G

Thank you! Yes it supports markdown for description of cards.

Collapse
 
loarsaw profile image
Aman Ahmed

Thanks for sharing 😄😄😄😄

Collapse
 
userllamma profile image
userLlamma

After a first glance, I wonder is the end2end encryption slowing down the syncing with the cloud backend? And how do you solve this problem, maybe only syncing at midnight?