How I created and deployed another full stack app in just 3 days
Tags: react, webdev, showdev, javascript
Published: 2021-10-18 22:42:33

## 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](https://sigma-rules.netlify.app/) and shared the whole journey with you all, btw if haven't read it here's the [link](https://dev.to/tarunfy/how-i-created-and-deployed-my-first-full-stack-web-application-in-just-4-days-2a14). 

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](https://dribbble.com/) and gathered inspirations from different sources for designing the UI.
Then I went over to [ColorHunt](https://colorhunt.co/) and picked up a minimalist color palette.
To make it a bit interactive and good-looking I went over to [free3Dicon.com](https://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:
* [React](https://reactjs.org/docs/getting-started.html) - I used [create-react-app](https://create-react-app.dev/) to start with.
* [Hooks](https://reactjs.org/docs/hooks-intro.html) - like `useState` for local state.
* [Redux](https://redux.js.org/introduction/getting-started) - For global state
* [Tailwindcss](https://tailwindcss.com/) for styling.
* [Framer-motion](https://www.framer.com/motion/) for easy simple animations.

#### Back-end:
* [Firebase](https://firebase.google.com/) - I used it for authentication and database.

#### Hosting:
* [Netlify](https://netlify.com/) 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 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](https://xpense-trackerr.netlify.app/). Do not hesitate to share your feedback. Share on Twitter, tag me [@tarunfy](https://twitter.com/tarunfy)

Star the repo ⭐ [github.com/tarunfy/expense-tracker](https://github.com/tarunfy/expense-tracker)

## Lets connect 🤙🏻
* [Github](https://github.com/tarunfy)
* [Twitter](https://twitter.com/tarunfy)
* [Instagram](https://www.instagram.com/tarunfy/)

## Feedback 🎸
Hash tree needs your feedback to improve. Help Hash tree by adding your valuable reviews 💖