DEV Community

loading...
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
✨ Indie developer / solopreneur, traveller, loves hiking and snowboarding, and Creator of https://Brisqi.com ✨
Updated on ・4 min read

I developed an offline-first personal Kanban app called Brisqi and launched it for 5 different platforms. I started this project with 2 purposes - to learn React and to build my own offline Kanban app as I always wanted one. I've been working on Brisqi since June last year.

Here's the tech stack I used in case you're curious:

  • ReactJS + BlueprintJS + custom styling for desktop app.
  • React Native + React Native elements + custom styling for Android/iOS App.
  • NextJS + BulmaCSS for the website.
  • Firebase Auth for authentication + Firestore for the database.
  • Google cloud functions - to handle backend operations.

Electron framework was the obvious choice to make it cross-platform as it has good eco-system around it so I went ahead with it as the underlying framework.

Following are the things I learned and followed specific to React, hope its helpful to you:

  • Start with Context API for state management if your app is small, learn how it works. This will get you use-to the reducer pattern in React. Don't worry about the performance in the beginning, React is smart enough and optimizes rendering for you. Optimize for performance or re-renders only if performance becomes an issue. And only move to Redux if you feel your app needs more than a simple state management.
  • Learn Immer and how it works. It's a great library to modify state in an immutable way. It makes life so much easier by modifying the "draft" of a state directly without the use of spread operators if the state is made of nested objects. It also comes in handy when implementing reducers with Context API.
  • If you move to Redux, use Redux Toolkit. It's a great toolkit made by the same people who made/maintain Redux.

    It states following on their website:
    "Redux Toolkit is our official, opinionated, batteries-included toolset for efficient Redux development. It is intended to be the standard way to write Redux logic, and we strongly recommend that you use it."

  • This one's subjective I feel. Learn how to use Functional Components and Hooks effectively. All my apps are written using Functional components and Hooks. I personally feel they are easier to read and understand, it certainly helps in avoiding the need of HOC or render props which is a plus for me. If you're starting new projects, start using Functional components and Hooks.
  • Optimizing performance in React Native can be a tricky thing to do if you have lot of data to display. If you're using lists, use FlatList instead of iterating over values using map function or similar. Using Redux here can be beneficial to you here so you can avoid unnecessary re-renders. Remember, in Context API, using useContext within a component will re-render that component and child components everytime unless you use React.memo on child components. Check out this Github link to learn more. In Redux, accessing part of state using useSelector hook prevents re-rendering if that part hasn't changed.
  • Speaking of unnecessary re-renders, learn how to use React.memo(), useCallback() and useMemo() effectively. Learn them, understand them and use them to avoid re-renders if performance becomes a problem. If you're using Redux, learn about Reselect library to create memoized selector functions. All of this helped me a lot in improving performance of Brisqi mobile app. If you're developing on iOS first, you might not see performance issues immediately, test it on Android. In my personal experience, an app written in React Native performs better on iOS than Android. I go by this rule of thumb, if it's performant on Android, it probably performs equally well or better on iOS, but I still test thoroughly on both platforms.
  • Break components into smaller components if possible. Smaller components are re-usable, easier to work with when using React.memo(), easier to manage state in them and code is easier to read and maintain when you come back to it after a couple of months.
  • Use third-party utility libraries sparingly. Use them if you think you cannot reproduce that functionality on your own "reliably". For example, I wrote my own Keyboard avoiding/aware view from scratch because - 1) I could simplify it, 2) tweak it according to my needs , 3) adapt it for both Android and iOS platforms and 4) I'd avoid external dependency. I'm not saying that other solutions are not good enough, they might be and some are, but less dependency = more stability because you know the functionality in and out.
  • For styling/convention, be consistent with whatever you pick. Airbnb style guide can be a good starting point, however I don't follow everything they say. For example - I disagree with them on the usage of single and double quotes. I use double quotes everywhere to be consistent where as they use both single quotes and double quotes.
  • Keep things simple, don't over-complicate your architecture. Add things as you go along. Similarly, don't prematurely optimize for performance, do it when it becomes an issue.
  • NextJS is for websites or multi-page apps and React(CRA or manual setup) is for single page apps. I personally don't try to adapt one into another. Makes things easier that way.
  • Keep refactoring as you find out better approaches of doing things. It's part of the learning process.
  • Keep learning, don't stop and share your knowledge with others.

Links:

Discussion (39)

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 Author

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 Author

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 Author

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 Author

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 Author • 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 Author

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
yougotwill profile image
William Grant

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

Collapse
ash_grover profile image
Ash G Author

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

Collapse
mangor1no profile image
Mangor1no

Your desktop app is incredible smooth. Great work!

Collapse
ash_grover profile image
Ash G Author

Thanks! I'm glad you liked the app.

Collapse
fofosudarko profile image
Frederick Ofosu-Darko

Awesome!!!

Collapse
ash_grover profile image
Ash G Author

Thanks! :)

Collapse
andrewbaisden profile image
Andrew Baisden

Good article seems like a really good learning experience.

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
thomasmax99 profile image
Thomas-Max99 • 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 Author • 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
thomasmax99 profile image
Thomas-Max99

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 Author

Thanks, I'm glad you liked it.

Collapse
weirdguppy1 profile image
weirdguppy1

Wow! Great concept 👏👏👏👏👏

Collapse
procoder88 profile image
Muhammad Maaz Shakeel

Awesome

Collapse
alecbsherman profile image
Alec

Great write-up. Thanks!

Collapse
chrisijoyah profile image
Chris Ijoyah

Nice work!

Collapse
upupkenchoong profile image
Ken Choong

Is all the app in a monorepo??

Collapse
ash_grover profile image
Ash G Author

Different repo for each.

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
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 Author

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

Collapse
loarsawcorporation profile image
Aman Ahmed

Thanks for sharing 😄😄😄😄