Full-Stack Developer's Tools

We learned how to develop a full-stack application from the ground up. We utilise a lot of technologies to make our lives easier when developing an application. As a result, I'll provide all of the tools I use in this blog, from setting up the stage to submitting your site to search engines.

Setting up

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

IDEs

• All rounder VSCode

• Webstorm for backend or plain javascript projects.(Please don’t use for frontend)

• Atom for quick editing.

Planning the project

• ClickUp is amazingly useful for project management. It has lots of features and a great UI.

Design

• As I am not into UI/UX I use UI kits or simply take inspiration from dribbble, Behance etc.
• Then I use Figma to customize those designs according to my needs.

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

• Colorhunt for colour inspiration.
• Google fonts for fonts.

Development

• Git — version control tool.
• GitKraken for everything git.
• npm to manage node packages.
• StackOverFlow to find solutions for common issues.

Browsers

I primarily use two browsers.

• Chrome
• Firefox developer edition — This is amazing.

Frontend

• Responsively for responsive design.
• Devicons for coloured icons and React-icons for normal icons.
• React dev tools to test react components.
• Debug CSS to test alignment of elements

Backend and database

• Sendgrid + Nodemailer to send emails.
• MongoDB Compass to test MongoDB data locally.
• DB Browser to view sqlite data locally.

Testing

• Postman for API testing.
• ngrok to expose localhost.
• LambdaTest to test website on different browsers.

DevOps

• Github actions for CI/CD.
• GitLab

Deployment

• Netlify or Firebase to host frontend.
• Heroku to host backend.

Rank up

• Google search console to get indexed on google search and also to track performance, find issues etc.
• Bing webmaster tools to get indexed on bing search
• Google page speed insights to test how fast my website is.
• Lighthouse to test page quality.

Analytics

• Google Analytics to track details like the number of website visitors, which pages are getting popular, how far my website reached.
• Microsoft Clarity — this thing has even more features like heatmaps where you can see where the users are clicking.