Beginner Web Dev Toolbox

This article is specially for developers who are new, here you will get a list of services and tool which you can use to ease your developer experience as a new developer.

Basics

• VS Code: The most popular code editor with large collection of plugins & extensions. Customize according to your taste
• Git: Learn to use git and github, as it is an essential skill as well as makes you coding workflow maintained and organized, you can travel though the timeline of your code.

UI & Animation Libraries

You have that perfect million dollar app idea in your mind, but it needs to be attractive, works perfectly in all devices, you can use a CSS framework and it will make your life a lot easier, styling is a very important part of any app, add little animations to bring life to your app, use the perfect colors. Listed below are some popular CSS framewokrs and animation libraries.

• TailWind: A utility-first & mobile-first CSS framework
• BootStrap: Quickly design and customize responsive mobile-first sites with Bootstrap
• ChakraUI: Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
• Framer Motion: A production-ready motion library for React.
• Animate.css: Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
• Neumorphism: Generate neumorphism CSS
• GlassMorphism: Generate glassmorphism CSS
• UI Gradients: A handpicked collection of beautiful color gradients for designers and developers.
• Color Hunt: Choose Color Palettes for your UI
• Tint Generator: Generate tints and shades for a color.

Database

You have successfully built your first app and now you need a way to store data in a database, there are several free to use databases present using different technologies and each having their special frature, given below are the most popular ones.

• Firebase: Firebase provides you with two different real-time NoSQL Data is synced across all clients in realtime, and remains available when your app goes offline.
• Supabase: Open source firebase alternative.
• MongoDB: Most popular NoSQL database.
• PlanetScale: The MySQL-compatible serverless database platform.

Authentication

You successfully stored your precious data in a database, but now you want to limit access to that by only allowing authenticated users to have access to that data, authentication is an important part of any application, you can of course build your own authntication system from scratch but there are some excellent tools which allows all that for us so that we can just plug that in and focus on other important parts of our app.

• Firebase:Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. You can also write rules for databases based on firebase auth.
• Supabase:Supabase Auth is designed to work either as a standalone product, or deeply integrated with the other Supabase products
• Auth0: Auth0 is an easy to implement, adaptable authentication and authorization platform
• NextAuth: Authnetication for your NextJS apps, supports a large number of social providers.
• Clerk: Supports all major web frameworks along with Expo.

Hosting

Your app is ready but now you need to host it so that it becomes accessible to the world, here is a list of free to use hosting providers which also provide you a domain and of course you can add your own custom domain.

• Firebase: It can host both static and dynamic ontent, along with multiple hosting.
• Vercel: NextJS was created by Vercel, it is a free hosting and has support for numerous frameworks along with node backend and specially optimized for NextJS..
• Netlify:Netlify unites an entire ecosystem of modern tools and services into a single, simple workflow for building high performance sites and apps.
• Heroku: Host websites, backends, scripts, and more on Heroku.