DEV Community

Cover image for How I created and deployed another full stack app in just 3 days
Tarun Sharma
Tarun Sharma

Posted on • Updated on

How I created and deployed another full stack app in just 3 days

Hello Folks πŸ‘‹πŸ»

This is Tarun here. I'm a young dev with big dreams and an intention to enhance as a successful web developer. I love building web apps with React. Last week I built my first full-stack application and shared the whole journey with you all, btw if haven't read it here's the link.

Today, I'd like to share yet another journey of building something exciting and useful with you all.
Let's gooooooo πŸš€

Roadmap πŸ—Ί

Day 1

I went over to dribbble and gathered inspirations from different sources for designing the UI.
Then I went over to ColorHunt and picked up a minimalist color palette.
To make it a bit interactive and good-looking I went over to free3Dicon.com and picked up some 3D renders.
After an hour or some, I drew out the UI on a sheet and started coding πŸ‘©πŸ»β€πŸ’»

Firstly, I did set up the folder structure architecture and install all the required dependencies.
Then I created a new app on firebase and connected my app with firebase and make sure everything was connected and working by using console logs(the best thing in JS).
I worked hard for about 3 more hours and finished up creating the landing page.

Day 2

The next step was to add authentication, so I created the Sign-up and Login pages, then with the use of firebase, I added the authentication functionality to my application.
In the next couple of hours, I worked over the dashboard part and figured out its layout, and designed it.
Then I had to look up a way of storing documents in my database and how my database architecture gonna be. It took me some time but finally, I ended up making it(took half of my brain cells 🀐πŸ˜₯)

Day 3

The next task was to apply some logic for calculating the expense, income, and all the good stuff, it gave me some brain damage but I got the job done.
I added responsiveness to it and some animations. Then finally I checked if everything was working correctly and then I make sure there were no console logs(used for debugging purposes) left in my code.
Then I simply deployed it for free on Netlify.

What I used

I used all the free stuff πŸ˜‹πŸ˜

Front-end:

Back-end:

  • Firebase - I used it for authentication and database.

Hosting:

How I keep it look professional

When it comes to design a website/webApp, I want it to look good. And there is no secret to it, as long I keep my spacing and color consistent, it will turn out well eventually.

By using tailwindcss it is so easy and fast to add styling however, the initial setup of it is tedious πŸ₯΄ but once you are done with that it's all smooth and easy to go πŸ±β€πŸ‘€.

Because I make it look so clean and smooth, many of my friends keep on asking me if it's really built by me, LOL. Yes, it is built by me, FFS!!

What's next ✨

I will continue to work on similar projects and eventually enhance my skills cuz practice makes anyone perfect. I am planning to contribute to open source projects too(one of my 2k22 goals).

Wrapping up πŸ‘€

Yeah, that's a wrap. Hope you enjoyed the journey and did get some motivation from it. Feel free to use the app. Do not hesitate to share your feedback. Share on Twitter, tag me @tarunfy

Star the repo ⭐ github.com/tarunfy/expense-tracker

Lets connect πŸ€™πŸ»

Feedback 🎸

Hash tree needs your feedback to improve. Help Hash tree by adding your valuable reviews πŸ’–

Discussion (30)

Collapse
everettblakley profile image
Everett Blakley

Not bad for 3 days! The animations and icons definitely give it that 'modern' web app vibe.

You'll definitely want to work on some input validation. I entered 10,000,000 and it gave me a balance of 10.00. Then I added 'AAA', and it let me submit just fine, and then gave me a balance, unsurprisingly, of NaN. Using <input type="number" /> should help with that.

Keep it up though! This is definitely a great portfolio project!

Collapse
tarunfy profile image
Tarun Sharma Author

Oh, I will surely work on that. Thanks <3

Collapse
pelv profile image
Alex Benfaremo

Really a nice job for a 3 days of work!

My 2 cent: your next step is to focus on User Experience, in particular for error and/or "all good" handling.
I tried to signup and login but in both cases after i clicked the button the input cleared and nothing happens and i was "lost". Some kind of notification (react-hot-toast.com/) that keep me informed with error or other things happening would really be a better experience. Never forget about the user :)

Collapse
pelv profile image
Alex Benfaremo

I tried again and now worked fine, don't know why didn't work the first time.

Again, a loader on the login button after clicked will be a good UX to add.
Really a good dashboard, keep going!

Collapse
tarunfy profile image
Tarun Sharma Author

Thanks alot bro, In this app I forgot to add error messages and isFetching state in the app. But from the next I'll definitely keep these small mistakes in mind and don't repeat 🀞🏻 <3
The fact that you all telling me my mistakes is really great cuz that's how we actually learn :))

Thread Thread
pelv profile image
Alex Benfaremo

I was actually really surprised, I can tell from your answer that those are just experience mistakes... nothing really big :)

P.S. Have you ever seen React Query? I thing you'll fall in love with.
react-query.tanstack.com/quick-start

Thread Thread
tarunfy profile image
Tarun Sharma Author

Yoooooo I didn't knew that, thnx dude. You're nicer, I hope if there's a way to connect with each even more cuz I need people like you for help in tuff times or for any guidence in any project in future

Thread Thread
pelv profile image
Alex Benfaremo

Since you enjoyed React Query i'll just wrote here my thoughts on some plugin/library/framework i've tried recently:

  • Web App Bundler:
    Create-react-app is and handy tool but react-scripts if too slow and full of vulnerabilities. I've tried NextJS and found it really nice to use but the other day i manage to change react-script in one App i'm working on with ViteJS. I was blown away from it's speed and found it to be really good for me! It has a really good community and a lot of tool (create-vite-app too). With this change i manage to go from 170 packages with 52 vulnerabilities (2 critical!) to a 107 packages with 0 vulnerabilities!

  • Server-side state manager
    I'm trying React Query and it's my way to go. But for small project it's even too much; if you use NextJS you can try SWR that is from the same team (just like Vercel for deployment)

  • Global State Manager
    Since you handle server-side data with a different library, Redux start to be too much code for a simple client-side state management. Contexts are ok but again, too much code for such a small task. I found Zustand or Recoil to be perfect for that.

  • Theming library
    TailwindCSS is good and ok to use it if you want a "boostrap" like programming. I use Material-UI a lot but recently i've seen a Chakra App and found that is really good, as soon as i can i'll try it. Ant Design is fine but doesn't match my design taste.

  • Start a new project
    Ever hear of Superplate? pankod.github.io/superplate/
    it's and handy tool to start a basic new project with most of the most famous plugin and libraries for React (Check also Refine, looks good but never tried).

  • React Hooks libraries
    Yesterday i found this package that collect some handy hooks, maybe you found them useful: github.com/streamich/react-use

  • PWA (Progressive Web App)
    When you start to feel you need more from your Web App check the service workers and how you can implement them.

Hopefully you'll find those thoughts useful.
Make sure you'll check and try want YOU find good and useful, don't just trust me :)

Thread Thread
tarunfy profile image
Tarun Sharma Author

WOW, Thanks bro you're definitely a man of culture <3

Collapse
bushblade profile image
Will Adams

Very impressive.
One thing I noted is that you need to configure your redirects for Netlify in your netlify.toml. Currently if you visit a direct link to a page within your app you'll get a default error page.

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
Enter fullscreen mode Exit fullscreen mode
Collapse
tarunfy profile image
Tarun Sharma Author

Roger that captain. Happy that you liked it 😏

Collapse
tarunfy profile image
Tarun Sharma Author

I fixed it, can you please check and tell me if its okay

Collapse
tojacob profile image
Jacob Samuel G.

Firebase also provides you with free hosting :)

Collapse
burzumumbra profile image
Ronald Flores Sequeira

Really nice app, just want the give you the advice of no sharing your firebase access keys in a github repo. Try yo work with the .env every one on github forking your repo would be capable of adding they'r own keys.

Collapse
munivinayk profile image
munivinayk

Interesting. I am trying to break the firebase authentication and signup to the backend graphql + Fastapi + jwt that i have created. I am new to react redux thunk. Playing around with action, dispatch and reducers. Lets see how it goes...

Collapse
musamasaba98 profile image
Musamasaba98

Love ur ui

Collapse
tarunfy profile image
Tarun Sharma Author

Happy that you liked it πŸ™‚πŸ€žπŸ»

Collapse
katoisa profile image
KatoIsa

I love ur design being a developer, before O start on a global project I always consider what thie user will feel while looking at my app.

Having seen ur PWA made feel 😎😎

Collapse
tarunfy profile image
Tarun Sharma Author

Thanks πŸ»β€β„οΈπŸ€žπŸ»

Collapse
chickensalt profile image
chickensalt • Edited on

Dribbble is something I didn't know I needed until now. Thanks for introducing it to me.

Collapse
tarunfy profile image
Tarun Sharma Author

Happy for you :)

Collapse
lucasalt profile image
LucasAlt • Edited on

Great job!
Only issue on the waves on bigger screen (like in your previous app).
Mine is 2560x1440px

Collapse
tarunfy profile image
Tarun Sharma Author • Edited on

I thought no ones gonna run it on that huge display πŸ‘€ xD, alright I'll fix it later cuz I'm learning node these days, thanks tho ❀️✌🏻

Collapse
ifierygod profile image
Goran Kortjie

Cool

Collapse
tarunfy profile image
Tarun Sharma Author

Happy that you liked it :)

Collapse
loop36 profile image
Anand V Balagopalan

You kept it easy and Neat. Looking forward towards your future works

Collapse
teslimmayor_1 profile image
TESLAR πŸ‘‘

Nice job
But i think there should be a way to change the currency

Collapse
tarunfy profile image
Tarun Sharma Author

Thanks for the feedback I will surely work on that in future, happy that you liked it 🀞🏻❀️

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
matheusvieira profile image
Info Comment hidden by post author - thread only accessible via permalink
Matheus Costa Vieira

Nice, but I saw commits in 7 days, and only in the 4th day appears a "final" commit. But it was really fast.

Some comments have been hidden by the post's author - find out more