Tools I use from design to deployment, testing and setting up analytics
Tags: webdev, beginners, programming, productivity
Published: 2022-01-24 18:26:16

In the previous [blog](https://dev.to/itsrakesh/the-flow-of-building-a-full-stack-web-application-447g), we came to know the flow of building a full-stack application. Throughout building an application we use so many tools that makes our life easy. So in this blog, I will share all the tools I use from setting up the stage to submitting your site to search engines.

## Let's get started

_Note: I will keep updating this article._

### Setting up
Setting up includes IDE, planning the project, management app.

#### IDEs
- All rounder [VSCode](https://code.visualstudio.com)
- [Webstorm](https://www.jetbrains.com/webstorm) for backend or plain javascript projects.(_Please don't use for frontend_)
- [Notepad++](https://notepad-plus-plus.org) for quick editing.

#### Planning the project
- [ClickUp](https://clickup.com) is amazingly useful for project management. It has lots of features and a great UI.

![ClickUp](https://cdn.hashnode.com/res/hashnode/image/upload/v1643033800424/OtLSVy2BA7.png)

#### Operating systems
- I am not yet into Linux, so for now I use Windows for development.

### Design
- As I am not into UI/UX I use UI kits or simply take inspiration from dribbble, Behance etc.

- Then I use [Figma](https://figma.com) to customize those designs according to my needs.

#### Branding
Branding includes deciding a colour palette, font family, logo etc.

- [Colorhunt](https://colorhunt.co) for colour inspiration.
- [Google fonts](https://fonts.google.com) for fonts. 

### Development

- [Git](https://git-scm.com) - version control tool.
- [GitKraken](https://www.gitkraken.com) for everything git.
- [npm](https://www.npmjs.com) to manage node packages.
- [StackOverFlow](https://stackoverflow.com) to find solutions for common issues.

#### Browsers
I primarily use two browsers.

- [Chrome](https://www.google.com/chrome)
- [Firefox developer edition](https://www.mozilla.org/en-US/firefox/developer) - This is amazing.

#### Frontend
- [Responsively](https://responsively.app) for responsive design.
- [Devicons](https://devicon.dev) for coloured icons and [React-icons](https://react-icons.github.io/react-icons) for normal icons.
- [Frontend checklist](https://github.com/thedaviddias/Front-End-Checklist) for everything frontend.
- [React dev tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) to test react components.

- [Debug CSS](https://chrome.google.com/webstore/detail/debug-css/igiofjnckcagmjgdoaakafngegecjnkj) to test alignment of elements

![Screenshot 2022-01-24 205812.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643038269638/O21dpQtgs.png)



#### Backend and database
- [Sendgrid](https://sendgrid.com) + [Nodemailer](https://nodemailer.com/about) to send emails.
- [MongoDB Compass](https://www.mongodb.com/products/compass) to test MongoDB data locally.
- [DB Browser](https://sqlitebrowser.org) to view sqlite data locally.


### Testing
- [Postman](https://www.postman.com) for API testing.
- [ngrok](https://ngrok.com) to expose localhost.
- [LambdaTest](https://www.lambdatest.com) to test website on different browsers.

### DevOps
- [Github actions](https://github.com/features/actions) for CI/CD.
- More coming soon...

### Deployment
- [Netlify](https://www.netlify.com) or [Firebase](https://firebase.google.com) to host frontend.
- [Heroku](https://www.heroku.com) to host backend.

### Rank up
- [Google search console](https://search.google.com/search-console/about) to get indexed on google search and also to track performance, find issues etc.
- [Bing webmaster tools](https://www.bing.com/webmasters) to get indexed on bing search
- [Google page speed insights](https://pagespeed.web.dev) to test how fast my website is.
- [Lighthouse](https://web.dev/measure) to test page quality.

### Analytics
- [Google Analytics](https://analytics.google.com/analytics) to track details like the number of website visitors, which pages are getting popular, how far my website reached.
- [Microsoft Clarity](https://clarity.microsoft.com) - this thing has even more features like heatmaps where you can see where the users are clicking.

---

### 🚨 Need your feedback
I recently deployed my portfolio website. Can you please visit once and give some feedback? It helps a lot.
(For feedback you can use the google form by clicking the "Feedback" button on the footer or simply leave a comment under this blog.)

Here is the link: [itsrakesh.co](https://itsrakesh.co)

---

What is the one tool you can't live without(Apart from VSCode)? Comment below.

---

I write a new blog every week. So follow for more.