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 colour 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 setup 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 Next couple of hours I worked over the dashboard part and figured out it's layout and designed it.
Then I had to look up for 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

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:

• React - I used create-react-app to start with.
• Hooks - like useState for local state.
• Redux - For global state
• Tailwindcss for styling.
• Framer-motion for easy simple animations.

Back-end:

• Firebase - I used for authentication and database.

Hosting:

• Netlify for free deployment.

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 colour 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 2k20 goal).

Wrapping up

Yeah, that's a wrap. Hope you enjoyed the journey and did got 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

• Github
• Twitter
• Instagram

Feedback

Hash tree needs your feedback to improve. Help Hash tree by adding your valuable reviews