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 🚀
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.
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 🤐😥)
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.
I used all the free stuff 😋😁
- React - I used create-react-app to start with.
Hooks - like
useStatefor local state.
- Redux - For global state
- Tailwindcss for styling.
- Framer-motion for easy simple animations.
- Firebase - I used it for authentication and database.
- Netlify for free deployment.
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!!
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).
Star the repo ⭐ github.com/tarunfy/expense-tracker
Hash tree needs your feedback to improve. Help Hash tree by adding your valuable reviews 💖