Replicating Expensify.com in Next.Js

Disclaimer:

This is not yet another How-to guide but to share with you the project am currently working on from the ground up in Next.Js - a framework I have discovered recently so I can quickly implement the different shiny stuffs that it has to offer and understanding its ecosystem.

Though Still a work in progress, You can clone and contribute to the code here next-expense

the Stacks:

• React
• Next.Js
• MUI
• Magic Auth
• Airtable
• JavaScript
• TypeScript

Quite recently I have chanced upon Next.Js barely two months ago when I was contributing to a commercial product for a client - a mobile first web application built entirely in Next.Js - front-to-backend.

I presume you're already familiar with the Reacct/Js ecosystem of building application, if you're not, you can checkout the React docs here getting started with react to familiarize yourself. Even though it is claimed you don't need much react to get started with Next.Js - but you definitely need it.

I was fascinated about the framework which preached the gospel according their website:

I quickly glanced at the docs, and played with the demo tutorial to quickly get started.

That wasnt enough so I decided to scout some resource more - and chanced upon a full stack implementation of Next.Js to build a Nextflix-like clone. Code here as well next-flix

Fast forward having come from a React background, I want to go a step further in applying my skills to other concepts and implementing more complex systems with differentiate kind of approach. I must say I like the abstraction Next.Js has to offer in terms routing, image handling and optimizations, in-built optional api right out of the box during project scaffold, the different _rendering _- (ssr, isr, csr) techniques for data manipulation and fetching.

But I was thorn between what I could build with this new found technology and skill I just acquired.

I brainstormed and alas! I decided to replicate as seemly as possible one of my favorite products I began using this year in the same time frame as I have come to found Next.Js - Expensify- an Expense Tracker.

Note:

this is not an ad but it's by far what I have come in to terms with to build, so I could learn the nitty gritty of the Next.Js framework and what it has to offer and how I can leverage that into other similar projects going forward.

Because the app is already a production one, I didn't have to bother so much on design. Thus I referenced the app as my design guide.

The First Steps:

I quickly set up the project scaffold in the getting started section

Then I built the Login page UI - to implementing the AUTH process before anything else.

I didnt want to complicate anything since the main goal is using Next.Js to quickly prototype or build out a fullstack application.
So I leverage the Magic Auth platform to handle user authentication for me during login. I read there is next-auth

- which am going to look into next and see how I can leverage that as well in the same project.

Next up,

is building out the dashboard after a successful user login and redirect to the dashboard. Still using the already built production app as a design guide, I quickly setout to implement the UI first with a dummy data, as this is basically my approach to building out stuffs' as quickly as possible as I can before leveraging dynamic data. Some components has to do with a sidebar, header which display dynamic data based on the navigation items selected - of which I handle perfectly with React useState. The first major thing to implement afterwards was to build the modal that handle the C aspect of CRUD - and this means I will need a database of sort to store my data - so I leverage on Airtable to handle this for me since am also new to Airtable and want to take advantage of this to learn about it as well.

Setting up Airtable was quite straight forward but with a little reading here and there and some figuring outs to do, since its a new technology to me.

The other steps:

I would need to build a user table in Airtable to handle individual users on the app, so when they perform CRUD functions, they will interact only with their data based on their Id's - which am looking forward to using JWT in the process to provide a unique token for each logged in user.

• use redux, specifically rtk query to manage application-wide state

• add relational database with GraphQL