DEV Community: Siddharth Verma

Unleash the Potential of T3 Stack

Siddharth Verma — Thu, 08 Jun 2023 06:00:24 +0000

In today's tech-driven world, it's essential for developers to build applications that are scalable, robust, and future-proof. That's where utilizing the right stack comes into play. So, let me introduce you to a game-changer in this regard - the T3 Stack! This powerful toolset harnesses cutting-edge technology to provide unparalleled versatility and efficiency in your development process. In this article, I will take you on an insightful journey to understand what precisely the T3 Stack is and how leveraging it could transform your application development.

What is the T3 Stack?

The T3 Stack (short for TypeScript, Next.js, tRPC, Tailwind.css and Prisma) represents an advanced technology stack designed specifically for developing modern web applications with high performance and ultimately superior user experience. Combining these technologies empowers developers with a streamlined workflow while ensuring adherence to best practices.

This influential toolkit has been gaining popularity due to its dynamic components that integrate seamlessly into any project -- allowing developers unmatched flexibility when working on various projects ranging from e-commerce platforms to intricate data visualization tools.

To further comprehend why the T3 Stack has become an industry favorite, let us delve deep into each critical component that makes up this impressive technological marvel!

Components of the T3 Stack

The T3 stack consists of several modern web development technologies that work together to provide a seamless and efficient environment for developers. Let's explore each component in detail.

TypeScript

TypeScript, the first component of the T3 stack, is an open-source programming language developed by Microsoft. It can be considered a superset of JavaScript since it adds static types to the script for easier code analysis and safer refactoring. Developers appreciate TypeScript because it leads to fewer runtime errors, self-documenting code, autocompletion in most modern editors, and an overall improved developer experience.

Next.js

Next.js is a popular framework built on top of React that simplifies server-rendered applications without sacrificing performance or flexibility. As part of the T3 tech stack, Next.js enables incremental static generation and server-side rendering while offering many built-in features such as automatic code splitting, image optimization, real-time feedback during development, and easy integration with third-party APIs.

With its combination of convenience and performance improvements over traditional React applications, Next.js has become one of the essential components in project t3.

tRPC

tRPC is another vital element in the T3 stack that handles remote data fetching and communication between the client application (such as a browser) and backend APIs. In contrast to RESTful APIs or GraphQL, tRPC uses procedure calls via HTTP endpoints generated from your TypeScript interfaces - removing boilerplate code such as routing configuration or manual type mappings.

By using this approach, tRPC significantly reduces complexity within a create-t3-app implementation while maintaining strong typing end-to-end. This results in both better documentation and fewer runtime errors.

Tailwind CSS

Tailwind CSS plays an important role in styling components within a T3 tech stack application. It's essentially a utility-first CSS framework used to build customizable user interfaces more efficiently than traditional CSS approaches like BEM or SMACSS.

One significant advantage of Tailwind CSS is its ability to compose new utilities on-the-fly without the need for writing separate custom stylesheets. This responsiveness allows developers to iterate faster when building and modifying user interfaces, leading to a more streamlined workflow.

Tailwind CSS also offers built-in support for popular frameworks, such as Next.js. Its flexible design system can be integrated quickly within project T3 applications.

Prisma

Prisma completes the T3 stack by providing an easy-to-use data access layer for your backend APIs. It allows developers to use strongly-typed API calls that automatically map database tables to TypeScript types in their application.

Given its features like auto-generated CRUD operations, atomic batch operations and optimistic concurrency control, Prisma eliminates the majority of boilerplate code required when connecting an application's frontend with server-side data stores.

In conclusion, combining TypeScript, Next.js, tRPC, Tailwind CSS and Prisma creates a powerful T3 tech stack that enables agile development workflows and simplifies complex applications - unleashing their full potential in modern web development.

Creating a T3 stack application with create-t3-app

Creating an application using the T3 tech stack is made seamless with the powerful command-line tool, create-t3-app. This section provides detailed guidance on the pre-requisites and steps for setting up your web development environment by employing this CLI tool.

Pre-requisites

Before diving into the process of creating a T3 stack application, it's essential to ensure that your development environment meets all the required prerequisites. By doing so, you'll mitigate potential compatibility issues or errors during project setup. Here are the imperative prerequisites:

Node.js: As a crucial component of both Next.js and tRPC ecosystems, Node.js runtime must be installed (version 12.x or later). You can download it from their official website.
NPM/Yarn: Both of these dependency management tools facilitate package installation and maintenance for your project. While NPM comes bundled with Node.js installations by default, you can also opt for Yarn as an alternative.
Git: Version control plays an essential role in modern web development workflows. Git is one such version control system that allows smooth collaboration and easy tracking of changes in your codebase.
Code Editor: A suitable code editor like Visual Studio Code (VSCode) or similar editors is recommended for efficiently writing code following organized structure incorporating syntax highlighting capabilities.

With these prerequisites met, we are ready to proceed to developing a T3 tech stack application.

Steps

Once your development environment is set up correctly, follow these steps to leverage create-t3-app for building a new project:

Install create-t3-app: Initiate by installing create-t3-app globally via npm/yarn running either npm install -g create-t3-app or yarn global add create-t3-app.
Generate new app: Utilize newly installed create-t3-app to scaffold a brand-new T3 stack application by executing the command create-t3-app my-project, replacing "my-project" with your desired project name.
Navigate to the project: Move into the created project directory using cd my-project.
Install dependencies: Install all necessary dependencies for your new T3 tech stack-powered app through npm install or yarn.
Launch development server: Lastly, initiate your local development server provided by Next.js via running npm run dev or yarn dev. By doing so, you can view your newly created T3 stack application in action at http://localhost:3000.

With these steps completed, you have successfully programmed a T3 stack app employing create-t3-app CLI tool enabling efficient TypeScript/Next.js/tRPC/Tailwind.css/Prisma integration . Make sure to explore the generated codebase to familiarize yourself with how various components interact and contribute towards seamless web development experience using the powerful T3 tech stack.

Advantages of Using Create-T3-App

Utilizing the create-t3-app tool offers several notable benefits for developers looking to harness the T3 stack. This section will explore how create-t3-app simplifies the development process, streamlines efficiency, and helps establish solid coding foundations.

Streamlined Development Process

Create-t3-app provides a scaffolded template for developers to build upon, eliminating repetitive setup routines when starting a new project. This approach allows you to save precious time by removing unnecessary bottlenecks during initialization. Moreover, it ensures consistency between projects designed with the T3 tech stack.

Best Practices and Conventions

Leveraging create-t3-app ensures that all required dependencies are installed correctly and adheres to community best practices and conventions within your T3 stack project. Doing so promotes cleaner code structures, streamlined processes, and an overall better experience for collaborating developers.

Enhanced Efficiency through Bundled Technologies

Create-t3-app bundles TypeScript, Next.js, tRPC, Tailwind CSS, and Prisma -- all essential components of the T3 stack -- into a single package. This bundling enhances developer efficiency by automating the integration of these technologies in a seamless fashion. As a result, programmers can focus on building functional applications instead of wrestling with configuration issues.

Simplified Application Structure

Through engineer-friendly presets offered by creating t3 app, managing resources across various frameworks becomes much more accessible. By incorporating file-based routing provided by Next.js or simplifying server-side logic using tRPC, creative teams can concentrate solely on developing impressive results while leaving structural complexities at bay.

Increased Code Maintainability

By adopting create-t3-app within your team's workflow processes ensure cohesive compliance with established practices centered around scalability, modularity, and maintainability. Implementing these wide-ranging standards makes it substantially easier for team members overseeing future expansion plans or remediations any encountered challenges connected to previous phases of deployment.

In summary, using create-t3-app proves to be a powerful and beneficial ally for developers seeking to harness the full potential of the T3 tech stack. By offering a streamlined development process, adherence to industry best practices, bundled technologies for efficiency, simplified application structure, and enhanced code maintainability, this tool acts as an invaluable resource in any developer's arsenal.

Similarities between create-t3-app and create-react-app

As you dive deeper into the world of T3 stack, it's essential to understand its similarities with another popular tool, create-react-app. Both of these libraries are designed to kickstart your web development projects in a matter of minutes. Let's explore some key similarities between create-t3-app and create-react-app.

Rapid Environment Setup

One common ground between both tools is their focus on rapid environment setup for developers. By using either create-t3-app or create-react-app, developers can quickly scaffold a new project without manual configuration. Thus, they save time and effort.

Zero Configuration

Both t3 stack and create-react-app adhere to the zero-configuration philosophy. This means that after executing the respective commands (npx create-t3-stack appName or npx create-react-app appName), you get a fully-configured environment with pre-installed dependencies and built-in project structure --- leaving no need for tweaks or adjustments in most cases.

Webpack Integration

Webpack is utilized as the core bundler by both t3 stack and create-react-app. It offers an abundance of features such as hot-reloading during development, code-splitting for efficient delivery, optimization techniques for production builds, and more.

Babel Integration

Babel plays a significant role in both stacks. It allows developers to write modern JavaScript (ES6+) code while ensuring browser compatibility through automated transpilation down to ES5 syntax. In essence, Babel ensures that your cutting-edge JavaScript code runs seamlessly across different browsers.

Extensibility

Another similarity lies in their extensibility. While created with sensible default settings out-of-the-box, both tools allow developers to customize configurations if needed --- making room for tailoring specific requirements that curated settings might not cover.

To sum up, although there are inherent differences due to varying tech stacks (T3 stack featuring TypeScript, Next.js, tRPC, Tailwind.css, and Prisma), both create-t3-app and create-react-app bring considerable benefits in terms of rapid project setup, zero-configuration philosophy, Webpack and Babel integrations, as well as extensibility. As a developer or a team working on web applications, choosing between these options will ultimately depend on your project requirements and familiarity with the constituent technologies that t3 stack and create-react-app embrace.

Drawbacks of using create-t3-app

As impressive and efficient as the T3 tech stack may appear, it is not devoid of drawbacks. The use of create-t3-app comes with certain limitations that might deter some developers from choosing this option for their projects. In this section, we will discuss a few notable challenges associated with using create-t3-app.

Limited Customizability

While the pre-configured setup provided by create-t3-app can save time and effort, many developers may want to customize the stack according to their unique project requirements. Unfortunately, create-t3-app does not offer extensive customization options as one might desire. This limitation can make it challenging for developers who prefer building complex applications tailored to specific needs.

Smaller Community & Ecosystem

Compared to other popular tech stacks like MERN or MEAN, the T-content writer Stack has a smaller ecosystem and community support. It might be more difficult to find comprehensive resources, guides, or libraries built specifically for components within the T3 Stack. Additionally, if you encounter any issues when working on your project t3 application, you may need to rely heavily on official documentation rather than crowd-sourced solutions.

Learning Curve

Though create-t3-app aims to streamline app development, several components within the T3 Stack have a steep learning curve. For instance:

TypeScript: Developers accustomed to JavaScript must learn new syntax rules and typing concepts.
Next.js: Understanding its server-side rendering and middleware implementations could be challenging.
Tailwind.css: If familiar with traditional CSS frameworks like Bootstrap or Materialize, mastering utility-first classes takes practice.

The necessity to gain proficiency in these individual technologies can prolong initial setup and development time for less experienced developers.

Not Suitable for All Project Types

It is important to note that while powerful capabilities are offered by utilizing the T-content writer Stack approach, this doesn't mean it is suitable for every project. When working on small projects or when there is no need for advanced functionalities offered by the T3 Stack components, it might not be practical to use create-t3-app as your starting point.

In conclusion, while create-t3-app unquestionably streamlines and accelerates the development process, one cannot overlook its drawbacks. Developers must consider their specific project requirements, available resources, and personal preferences before deciding to adopt the T3 tech stack using this tool.

Best Practices for using the T3 Stack

To fully unleash the potential of the T3 tech stack, adopting best practices is crucial. By adhering to these guidelines, you can optimize your project's efficiency and performance while maintaining code quality and scalability. Let's explore several recommended standards when utilizing the T3 Stack.

Maintain a Consistent Coding Style

One of the most essential best practices while working with any tech stack is to maintain consistent coding style across your project. This includes following standardized naming conventions, file structure organization, and applying indentation correctly. Adhering to such uniformity results in readable, maintainable code that your team members can effortlessly work on together.

Stay Up-to-Date with Updates

Project T3 involves multiple components like TypeScript, Next.js, tRPC, Tailwind CSS, and Prisma. Since these technologies are evolving rapidly, it's essential to stay up-to-date with their latest improvements. Regular updates enable you to take advantage of new features or security patches when available. Always assess your dependencies periodically and update them accordingly.

Leverage TypeScript's Power

Since TypeScript forms an integral part of the T3 stack foundation, making full use of its power should be a priority. By embracing strong typing and interfaces offered by TypeScript:

Code consistency improves
Possible runtime errors are detected early during development
Integration with IDEs becomes smoother

Additionally, invest time in learning advanced TypeScript techniques to further enhance your development experience.

Optimize Performance with Next.js

The inclusion of Next.js in the T3 Tech Stack offers numerous optimization opportunities like server-side rendering (SSR), static site generation (SSG), image optimization, and built-in automated code splitting to improve web application performance drastically. By taking advantage of these features whenever feasible

Conclusion

The T3 tech stack has emerged as a powerful and efficient combination of tools for developing modern web applications. By leveraging the strengths of TypeScript, Next.js, tRPC, Tailwind CSS, and Prisma, it paves the way for an improved development experience that caters to the ever-growing needs of today's developers.

Using the create-t3-app tool simplifies the process of setting up a new project with this innovative stack. It allows developers to harness its full potential without having to worry about configuring individual components manually. However, it is crucial to be aware of certain drawbacks when using create-t3-app so you can make informed decisions in your projects.

Zero Downtime Deployment Strategy for a React Dashboard with NGINX

Siddharth Verma — Mon, 24 Apr 2023 09:44:58 +0000

In this blog, we'll discuss a zero-downtime deployment strategy for a React Dashboard using NGINX. With this approach, you'll be able to make seamless updates to your application without any downtime, ensuring a smooth user experience.

Overview

Here's how the zero-downtime deployment strategy works:

NGINX points to a folder that is a symlink, which we'll call the "deployment" folder.
When deploying a new instance, a new folder is created with the timestamp as its name.
The symlink is switched to point to the new folder.
This allows users to easily switch between deployments and roll back to previous versions if necessary.
Older folders are deleted after five deployments.

Let's dive into each step in more detail.

Step 1: Set Up NGINX Configuration

First, let's configure NGINX to point to our symlinked "deployment" folder. Create an NGINX configuration file named nginx.conf and add the following content:

http {
    server {
        listen 80;
        server_name yourdomain.com;

        location / {
            root /path/to/your/deployment/folder;
            try_files $uri /index.html;
        }
    }
}

Replace yourdomain.com with your actual domain name and /path/to/your/deployment/folder with the path to your symlinked "deployment" folder.

Step 2: Create a New Folder with a Timestamp

When deploying a new instance, create a new folder with the current timestamp as its name. You can do this using a simple bash script:

#!/bin/bash
timestamp=$(date +%Y%m%d%H%M%S)
mkdir /path/to/your/instances/folder/$timestamp

Replace /path/to/your/instances/folder with the actual path to your instances folder.

Step 3: Switch the Symlink to the New Folder

After creating the new folder with the timestamp, switch the symlink to point to it. You can do this using the ln command in your bash script:

#!/bin/bash
timestamp=$(date +%Y%m%d%H%M%S)
mkdir /path/to/your/instances/folder/$timestamp
ln -sfn /path/to/your/instances/folder/$timestamp /path/to/your/deployment/folder

Step 4: Deploy the React Dashboard

Now, deploy the React Dashboard to the newly created timestamp folder. You can use any build tool or process you prefer, such as Webpack or Create React App. For example:

#!/bin/bash
timestamp=$(date +%Y%m%d%H%M%S)
mkdir /path/to/your/instances/folder/$timestamp
ln -sfn /path/to/your/instances/folder/$timestamp /path/to/your/deployment/folder

cd /path/to/your/react/dashboard
npm install
npm run build
cp -R build/* /path/to/your/instances/folder/$timestamp

Step 5: Delete Older Folders

To prevent clutter, delete older folders after five deployments. You can do this using the find command in your bash script:

#!/bin/bash
timestamp=$(date +%Y%m%d%H%M%S)
mkdir /path/to/your/instances/folder/$timestamp
ln -sfn /path/to/your/instances/folder/$timestamp /path/to/your/deployment/folder

cd /path/to/your/react/dashboard
npm install
npm run build
cp -R build/* /path/to/your/instances/folder/$timestamp

find /path/to/your/instances/folder -mindepth 1 -maxdepth 1 -type d | sort | head -n -5 | xargs rm -rf

This script will delete all folders except the five most recent ones.

Conclusion

By following these steps, you can achieve a zero-downtime deployment strategy for your React Dashboard with NGINX. This approach ensures that your users will always have access to the latest version of your application without any interruptions. Additionally, it allows for seamless rollbacks and easy management of multiple deployments.

5 AI Trends For The Next 5 Years

Siddharth Verma — Thu, 22 Dec 2022 14:44:22 +0000

AI is rapidly evolving, I had many opportunities to work with some of the leading AI researchers and according to them, AI is going to change the world in the next 5 years. Here are the top 5 AI trends for the next 5 years that you should know as a developer.
PS - Not another chat-GPT article 😅

Rise of Federated Learning

Federated learning is a machine learning approach that allows multiple devices, such as smartphones or another internet of things (IoT) devices, to collaborate and learn a shared model without the need to share raw data. In this approach, each device trains a local model based on its own data, and then the local models are aggregated to produce a global model.
With the increase in the computational power of these devices and dedicated onboard AI processors, I believe that we will see a rise in the use of federated learning. This will be a game-changer for the privacy of the users and will also help in the development of AI models for edge devices.

The Emergence Of Explainable AI

Explainable AI (XAI) refers to artificial intelligence systems that can provide explanations for their decisions, predictions, or actions in a way that is understandable to humans. The goal of XAI is to create AI systems that can be trusted and understood by people, which can be particularly important in situations where the consequences of AI decisions have significant impacts on people's lives, such as in healthcare, finance, and law.
XAI will become a very important aspect of AI. It will help in the development of trust in AI systems and will also help in the development of AI systems that are more transparent and understandable.

HiveMind/Decentralized AI

HiveMind AI is an artificial intelligence system that is designed to work in a decentralized manner, using a network of interconnected devices or computers to process and analyze data. This could involve the use of techniques such as federated learning, which allows multiple devices to collaborate and learn a shared model without the need to share raw data.
With the rise of 5G and the increase of Electric Vehicles, I believe this technology is inevitable. This will make AI systems more robust and will also help in the development of AI systems that can work in a decentralized manner.

More Robust Multilingual AI

Multilingual AI refers to artificial intelligence systems that are able to process and understand multiple languages. This can be particularly useful in situations where there is a need to interact with people who speak different languages, or in scenarios where data is available in multiple languages.
This means more people who don't speak English will have access to Modern AI. This will reduce the language barrier and will also lead to more AI acceptance. We can already see the rise of this technology in Generative AI Models like GPT-3, Facebook's No Language Left Behind, and HuggingFace's Big Science.

First Quantum AI

Ok, this is a bit of a stretch but I believe at least in a lab setting, we will see the first steps toward Quantum AI. Although, Quantum computers are still in the early stages of development, they have the potential to solve certain types of problems much faster than classical computers. This means that quantum computers can solve problems that would take classical computers millions of years to solve in a matter of seconds.
An AI powered by a Quantum Computer will be the next step in the evolution of AI. This will not only be a game changer for AI but will also be a game changer for the world of Physics and Mathematics.

Conclusion

The future of AI looks very promising. We can already observe the rise of some of these technologies. I believe that the next 5 years will be very exciting. What a wonderful time to be alive! 🤩.
I hope you enjoyed this article. If you love AI as much as I do, feel free to connect with me on LinkedIn or Say Hi to me on my Personal Website(Siddharth Verma).

My First Step Towards Passive Income | The MVP Challenge💵

Siddharth Verma — Tue, 22 Nov 2022 16:38:16 +0000

Today, I took a day off from freelancing and challenged myself to build something in a day that could potentially generate some income.

The Idea

Over the years I had to build a lot of scripts for myself that I use. A lot of people to whom I showed them have shown interest in using them. So the approach was pretty simple to convert them to tools and APIs that other people can use.

The Execution

Time was of the essence hence I took the fastest way. I still wanted a good experience for the users So I used a bunch of tools.

I went through the scripts I have and decided to move forward with a #seo Page Audit Python Script that I have developed in the past. The reason I went with this is that it has a pretty wide use case with relatively less competition.
I restructured the code to a lambda function behind an API gateway and deployed it using serverless. Serverless is just amazing, it streamlines the whole process and makes the deployment and management pretty scale. So in a few lines of YAML code, my API had dev and prod mode and was on the cloud.
Made a RapidAPI account. Took me around an hour to set it up(The documentation is pretty confusing) which includes creating limits, testing, and documentation for my API. RapidAPI takes care of Authentication, Documentation, Rate Limits, and specially Monetization(It took a single click to connect my PayPal).
Did the final testing via a different account to ensure limits are correctly enforced and everything is working correctly.
Made a quick website using Docusaurus and documented the features. This tool is so amazing you can create a website for documentation very quickly. It's a self-hosted open-sourced (courtesy of Meta) platform built in react that can generate static HTML pages using Markdown language.
Created a Git repository pushed the code and connected the repository with Vercel and my website is live(from creation to hosting) in under 2 Hours.
I already had a domain api.ind.in (pretty cool name right 😎). Changed its domain servers to Cloudflare and pointed it to Vercel. This process took minutes. A single click enabled a catch-all system for emails for my domain which are forwarded to my personal email address.
Made a contact us form using tally and linked it to the website. Where people can request new APIs or get in touch with me.
Linked my website to my RapidApi profile, the documentation page to my API and enabled Search Console for the website.
Wrote an article about it 🤓.

The Final Product

The whole process took me less than 10 hours. Below are the links to the final products.

If you know the right tools you can be 10X productive. Checkout my picks for best tools for startups.
Feel free to subscribe if you like such content. If you have any questions feel free to comment.

A Developer's Content Writing System. Idea 👉Publish

Siddharth Verma — Sun, 23 Oct 2022 11:12:27 +0000

Let's be honest. We developers are busy fixing bugs, writing code, and making sure our applications are running smoothly. We don't have time to write content all the time and it takes a lot of time to create quality content. Here is the system that I use to ideate, manage and create content quickly and efficiently.

Getting The Idea

The problem with getting an idea is never there when you want it 😒. I have my second brain system for capturing and curating ideas. The core idea behind this approach is to capture ideas as they come as frictionlessly as possible and then curate them later. Here are the tools that I use to capture ideas:

Microsoft Todo - It's a to-do app in which you can create multiple lists and folders. I have a list called Blog Ideas. An idea can come at any time and this app offers an android widget that is pinned to my second screen and can be easily accessed by my laptop using windows + W.
Pocket Automation - When I come across an article that inspires me to write, I save it to Pocket via the browser extension with a tag called To Write. I have an IFTTT recipe that automatically adds the article to my Blog Ideas list in Microsoft Todo.

As you can imagine the Blog Ideas list in Microsoft Todo is a mess.

Curating The Idea

The next step is to curate the ideas. Whenever I feel like writing, I open my Todo List and go through the ideas. I pick the ones that I feel about writing and move them to Notion and ignore the others. Then I mark all the ideas as done. This is important to clear your list in one sitting. My base notion template in broken down into 3 sections and each idea is a page separated by a divider:

Draft - This is where I add the ideas that I am currently adding a content outline to.
Backlog - This is where I add the ideas that I want to write about(Yeah I am a Jira nerd).
Done - The ideas which are published go here.

This page is shared with my content intern and a few friends who work with me. This way I can get feedback on the ideas and also get help in writing. They sometimes add references to the ideas which I can use in my writing or curate the outline.

For Each idea. I use the following template for the pages:

Title - The title of the article
Outline - This is a list of sections that I want to write.
References - This is a list of links either curated by me or my friends.
Topics - I use this to broaden the scope of the article and make sure I cover the topic in depth.
Stats - Word count, outbound link count, etc.

Here is the secret sauce 🤫

I have a python script that takes an idea does research, adds references based on a scoring system, writes the outline, and topics to write about with their SERP competition and some stats. My initial draft of Notion is created by this script. It uses a SERP API, some NLP and GPT3.

Writing The Article

Non-developers will be shocked by this. I use VSCode to write my articles in markdown. It's a homely feeling, I know all the shortcuts and It has a dark mode 😎. But the main reason is I use GitHub Copilot and when you write in markdown in VSCode it suggests writing prompts. So sometimes it's like I am writing with a ghostwriter. Not only the suggestions are relevant but are formatted in markdown. Trust me, it's a game-changer. I can write an article in 1-2 hours. If you are on windows like me you can add emojis by this shortcut (windows + .[dot]).

Editing The Article

I use Google Docs to edit my articles(You can create a new doc by typing doc.new in your browser). I use a markdown-to-HTML converter to convert the markdown to HTML and then copy and paste it into Google Docs. All of these docs are in a shared folder which is subdivided into folders based on the month. Here is why I use Google Docs

I use the Grammarly Chrome extension which now works very well with Google Docs. It catches all my typos and grammatical errors and I can fix them in one go by clicking on the suggestions.
I can easily share the document with my editor and get feedback in form of comments.
This gonna blow your mind when you select a word/phrase in Google Docs to hyperlink(ctrl + k). It automatically suggests the most relevant pages by understanding the context from the web and other docs. So it's super easy to add links to the article. If the link is to a Google Doc, I can copy the published link from the notion. It's linking and interlinking at its best. You can even search the web in that input.
It also has a lot of other nice features like word count(ctrl+shift+c), quick access to a thesaurus, etc.

Publishing The Article

Not much to say here. I either copy-paste the HTML, convert the doc to markdown, or if the article have to go on my website. I have a script that converts the markdown to JSON which is then published to my website using sanity.io(How everything is handled from here is a blog post for another day).

Then I move the notion page to the Done section.

Conclusion

Following this process I can ideate, write, edit and publish an article in 1-2 days. I have a lot of ideas in my backlog and I am working on them.

I hope this helps you in your content writing journey. If you have any questions or improvements, feel free to drop a comment. Subscribe to my newsletter here to get notified when I publish something cool.

Host Your SAAS Completely Serverless and Free

Siddharth Verma — Sat, 22 Oct 2022 16:45:00 +0000

SAAS architecture is inherently complex and designing one on a tight budget can be extremely difficult. When you are starting as a founder your focus should be on acquiring users, getting feedback, and building a great product. This is where a serverless architecture comes in, it handles all the underline complexity of managing servers through an abstract interface.

Disclaimer ⚠️ - This article doesn't convey that you will be able to host your SAAS for free forever. A lot of these tools have Free tier and credits for Startups. That can be used to host your SAAS app for a year or so, or until you receive traction.

What are the benefits of hosting your SAAS on a serverless architecture?

Most serverless platforms have generous limits and have pay as you go, model. So your cost is directly proportional to your usage. If you price your product correctly you don't need to worry about the infrastructure pricing at all.
Serverless scales really and the underlying complex infrastructure is abstracted. This way when your SAAS takes off you do not need to about scaling your infrastructure on worry about the platform going down.

What things to consider before using a serverless architecture?

You have tonnes of users and a big team. Although, If you are following a microservice-based architecture some of your services can be hosted on these platforms but at that stage, it makes more sense to look into Bare Metal Servers, you will be able to reduce your cost drastically(That's a topic for another day).
Your SAAS uses very long-running processes like web crawling. Most serverless platforms have a hard timeout limit. This only means your backend for this service. The rest of your application can still be serverless.
Your SAAS uses really huge Machine Learning models. The most popular platforms have a memory limit(AWS has 10Gb). Bonus: If you are planning to use such a model. You might want to look into GPT3. Here is a crash course to get started with GPT3.

Tools to consider for your Serverless architecture

There are a lot of tools in the market. Here are my personal picks, Which I have personally used and should cover a majority of use cases.

Website and Web Application Hosting

Netilify and Vercel are best suited for web hosting. I personally use Vercel but Netilify is equally good. They both have CDN built in, generous limits(paid plans starting at 20$), image optimization, Continuous Integration and Continuous Deployment.

You might want to consider using Cloudflare as A DNS management service as it offers DDOS protection, loads of optimizations and a free inbox for your @domain emails. If you don't want to buy Gsuite or similar services.

Backend and Crons Hosting

AWS Lambda is my go-to choice when it comes to backend hosting. You can configure your domain or subdomain in Route 53 and API Gateway to interface with your functions via REST API. I highly recommend using Serverless for deploying your code. It abstracts all the complexity and you can deploy all the complex cloud configurations using a simple YAML file.

Databases

Depending on your use case you should consider one of the following.

Firestore - If you need a real-time database and need 2-way communication between your frontend and backend.
AWS DynamoDB - If your SAAS requires basic CRUD operation and you are planning to use a No SQL Database. This DB scales very well horizontally.
PlanetScale - If you are planning to use a SQL database.
MongoDB - If your SAAS requires Advance No SQL queries, Aggregations and etc. MongoDB Atlas has a serverless option and you can get free credits by applying to the MongoDB Startup program

Authentication

For Authentication trust me to go with Firebase. It's super easy to implement and has tonnes of Authentication options including auth by phone numbers. The limits are amazing and are perfect if you are in the initial stages.

Monitoring And Logging

In a serverless environment, it's super important to keep track of your errors, logs and usage. These are the must-haves for any serverless application.

Sentry - Monitor all your errors in a single place using this. This tool converts errors into issues so you can prioritize the important issue.
New Relic - Extremely powerful with a very generous limit. Help you analyze all your logs in a single place. This comes in extremely handy when your whole application is distributed. It integrates very well with all the services mentioned above.

Conclusion

Choosing a serverless architecture will save you a lot of time and a lot of headaches. Launching a SAAS product requires juggling multiple things. This architecture just takes the infrastructure off your plate until you can afford a dedicated DevOps person. It takes some work but you can incrementally move your application to a dedicated server.

I personally feel using the right tools can 10x your productivity. Like what you read? Check out my top list of must have SAAS Tools.

Happy Building 😊