Introduction

    All web tips

    PaaS

    A typical web application backend needs to have below features.
    • Some kind of Database
    • Real-time Subscriptions - publish-subscribe model - Listing to database changes
    • Authentication
    • Authorization and Access Control
    • Storage - Space where objects like pdf, documents, excel, text files, audio, video files can be stored.
    • Serverless Functions
    • API Generation
    • WebSockets - This is required for chat applications
    • Scalability and Performance

    firbase

    aws amplify

    appwrite

    supabase

    Supabase is one of the most popular backend as a service platform. It provides below features.
    1. PostgreSQL Database: Supabase uses PostgreSQL as its database engine, which is a powerful and scalable open-source relational database. It allows you to model and store structured data efficiently, supporting complex queries, transactions, and data integrity.
    2. Real-time Subscriptions: Supabase provides real-time functionality through PostgreSQL's NOTIFY/LISTEN mechanism. It enables you to listen for changes in the database and receive real-time updates when data changes, allowing you to build reactive and collaborative applications.
    3. Authentication: Supabase includes built-in authentication features that support various authentication providers, such as email/password, social logins (Google, GitHub), and third-party providers (Auth0, Apple). It provides user management, JWT-based authentication, and customizable email templates.
    4. Authorization and Access Control: Supabase allows you to define fine-grained access control rules to secure your data. You can set row-level security policies, define roles and permissions, and implement attribute-based access control (ABAC) to manage data access based on user roles and conditions.
    5. Storage: Supabase provides an object storage feature to store and manage files and assets. It allows you to upload, download, and manage files with support for server-side file processing, authentication-based access control, and CDN integration.
    6. Serverless Functions: Supabase offers serverless functions, powered by AWS Lambda, to run custom server-side logic and integrate with other services. You can create and deploy serverless functions in popular programming languages like JavaScript, Python, Go, and more.
    7. API Generation: Supabase automatically generates a RESTful API and a client SDK for your PostgreSQL database schema. This allows you to easily interact with your database and perform CRUD (Create, Read, Update, Delete) operations from your client-side applications.
    8. WebSockets: Supabase supports WebSocket connections, enabling bidirectional communication between the server and client applications. This allows you to build real-time features, such as chat applications or collaborative editing.
    9. Scalability and Performance: Supabase is designed to scale and handle high volumes of traffic. It leverages PostgreSQL's scalability and can be horizontally scaled to accommodate increasing user demand.
    10. Open Source and Self-Hosted: Supabase is open-source, allowing you to self-host it on your infrastructure or cloud provider of choice. This gives you control and flexibility over your data and infrastructure.

    Authentication

    Auth0

    Passport.js

    next auth

    Forms

    React Hook Forms

    Formik

    Database Interaction

    Mongodb - Atlas

    Sharding in MongoDB: Sharding in MongoDB is a technique used to horizontally partition data across multiple servers or machines called shards. It allows MongoDB to distribute data and workload across a cluster of machines, enabling the database to handle larger data volumes and provide improved scalability and performance.

    In a sharded MongoDB deployment, the data is divided into smaller subsets called shards. Each shard is a separate MongoDB instance or replica set that holds a portion of the data. The shards collectively form a distributed database.

    Here's how sharding works in MongoDB:

    1. Data Distribution: MongoDB divides the data based on a shard key. The shard key is a field or set of fields chosen to determine how the data is distributed across shards. MongoDB uses a hashing algorithm on the shard key to determine which shard should store the data. This ensures an even distribution of data across the shards.
    2. Sharding Cluster: A sharding cluster consists of three main components:
      • Shard Servers: These are the MongoDB instances or replica sets that store a portion of the sharded data. Each shard can handle read and write operations for its assigned data subset.
      • Config Servers: Config servers store metadata about the sharded cluster, including the mappings between data and shards. They maintain the cluster's configuration, such as the shard key ranges and metadata for efficient data routing.
      • Query Router (mongos): The query router acts as an interface between the application and the sharded cluster. It receives client requests, determines the appropriate shards to query based on the shard key, and forwards the requests to the respective shards. It also merges results from multiple shards if necessary.
    3. Data Operations: When a client application performs a query or write operation, it interacts with the query router (mongos). The query router determines the relevant shards based on the shard key and forwards the operation to the appropriate shards. This allows the workload to be distributed across multiple shards, enabling parallel processing and improved performance.
    4. Data Balancing: MongoDB automatically balances the data distribution across shards by moving chunks of data between shards as needed. It monitors data distribution and rebalances data to ensure an even workload distribution and prevent hotspots on specific shards.

    Sharding offers several benefits in MongoDB:

    • Scalability: By distributing data across multiple shards, MongoDB can handle larger datasets and higher volumes of read and write operations. Sharding allows you to scale horizontally by adding more shards to the cluster as your data and workload grow.
    • Performance: Sharding improves performance by enabling parallel processing of queries across multiple shards. It allows the cluster to handle higher concurrency and provides faster response times for read and write operations.
    • Fault Tolerance: Sharding enhances fault tolerance by replicating data within shards using replica sets. If a shard or replica set fails, MongoDB can continue serving data from the remaining shards, ensuring high availability.
    • Elasticity: With sharding, you can dynamically add or remove shards from the cluster based on the changing needs of your application. This flexibility allows you to scale your MongoDB deployment up or down as required.

    Pocketbase

    https://pocketbase.io/ provides open source backend database. Download executable and run ./pocketbase serve

    Redis

    Redis: Redis is an in-memory data store often referred to as a data structure server. It provides fast and efficient storage and retrieval of data structures like strings, lists, sets, hashes, and more. Redis is known for its excellent performance and high throughput, making it a popular choice for caching, real-time applications, session management, and pub/sub messaging systems.

    Here are a few scenarios where Redis can be useful along with other db

    1. Caching: Redis can be used as a caching layer to improve performance by storing frequently accessed data in memory. This reduces the need to query MongoDB for the same data repeatedly, resulting in faster response times and reduced load on the database.
    2. Real-time Data: If your application requires real-time functionality, such as real-time analytics or collaborative features, Redis can be used to store and manage real-time data in memory. It provides efficient data structures and operations for managing real-time updates and enables fast data retrieval and processing.
    3. Pub/Sub Messaging: Redis has built-in support for publish/subscribe (pub/sub) messaging, allowing different components of your application to communicate and exchange messages. It can be used to implement real-time notifications, event-driven architectures, or message queues for asynchronous processing.
    4. Session Management: Redis provides features like fast key-value storage and automatic expiration, making it suitable for session management. It can store session data in memory, enabling fast retrieval and manipulation of session information.
    5. Rate Limiting and Throttling: Redis can be used to implement rate limiting and throttling mechanisms to control access to resources and prevent abuse. It allows you to set and manage limits based on specific criteria, such as requests per second or user.

    Prisma

    Why we need Prisma:

    1. Type-Safe Database Access:

      Prisma provides a type-safe and auto-generated query API. By defining your data models and schema in Prisma's declarative language, you can leverage type checking and autocompletion in your code editor. This helps catch errors and provides a more robust development experience.

    2. Database Agnostic:

      While Prisma originated as an ORM for SQL databases, it has expanded its capabilities to support other databases as well. Prisma can work with SQL databases like PostgreSQL, MySQL, and SQLite, as well as NoSQL databases like MongoDB. This flexibility allows you to maintain a consistent and familiar data access layer across different database systems.

    3. Automatic Query Generation:

      Prisma generates SQL or database-specific queries based on your high-level, type-safe API calls. This abstraction simplifies complex query construction and reduces the risk of SQL injection vulnerabilities. Prisma takes care of translating your API calls into efficient database queries, optimizing performance and reducing the amount of boilerplate code you need to write.

    4. Schema Migrations:

      Prisma provides schema migration functionality, allowing you to manage changes to your database schema over time. You can easily evolve your data models, add or modify fields, and apply these changes to the database with minimal effort. Schema migrations help maintain database integrity and enable smooth deployment and versioning of your application.

    5. Data Validation and Sanitization:

      Prisma includes built-in data validation and sanitization features. You can define constraints and rules on your data models, ensuring data integrity and preventing invalid or inconsistent data from being stored in the database. Prisma helps enforce data validation at the database layer, reducing the need for additional validation logic in your application code.

    6. Performance and Scalability:

      Prisma optimizes database queries and provides features like query batching and caching. This can improve performance by reducing the number of database round trips and minimizing redundant queries. Prisma also supports database connection pooling, enabling efficient utilization of database connections and scalability as your application grows.

    7. Ecosystem and Community:

      Prisma has a vibrant and active community of developers, and it integrates well with other popular frameworks and tools. It offers integrations with GraphQL frameworks like Apollo Server and Nexus, making it easier to build GraphQL APIs. Prisma's ecosystem provides additional plugins, extensions, and tools that can enhance your development experience and productivity.

    Mock API

    rapidapi

    During development of apps, we often need to consume APIs. But setting up the api server takes time. In such cases, you can use APIs available on Rapid API. e.g. cars by api-ninjas

    DB to API using Swagger

    Swagger Codegen: Swagger Codegen is an open-source code generation tool that can generate server-side API code from a Swagger or OpenAPI specification. You can create a Swagger or OpenAPI specification for your MongoDB database and use Swagger Codegen to generate the API server code in your preferred programming language, such as Node.js, Java, or Python. The generated code will include the necessary endpoints for CRUD operations on your todo items.

    DB to API using Postman

    Postman: Postman is a popular API development and testing tool that provides features for auto-generating APIs based on a database schema. With Postman, you can import your MongoDB database schema and use the "Auto-generate API" feature to automatically generate the API endpoints for managing your todo items. Postman allows you to customize the generated API code and export it in different formats.

    REST Client in VSCode

    • Install the "REST Client" extension in Visual Studio Code.
    • Create a new file with a `.http` or `.rest` extension.
    • Write your POST request in the file using the following syntax:
      • 1
2     POST https://api.example.com/endpoint
3     Content-Type: application/json
4
5     {
6       "key1": "value1",
7       "key2": "value2"
8     }
    • Save the file and click the "Send Request" button that appears above the request. Alternatively, you can right-click anywhere in the file and select "Send Request" from the context menu.
    • The response will be displayed in the lower part of the editor.

    Using Curl

    • Open the integrated terminal in Visual Studio Code
    • Use the cURL command to send a POST request. 
    1curl -X POST -H "Content-Type: application/json" -d '{
2       "key1": "value1",
3       "key2": "value2"
4     }' https://api.example.com/endpoint

    Thunderclient

    When I was using thunder client to access api hosted on localhost, I was getting connection refused error. I fixed this by using different host name. e.g.http://localhost:8000/todos was renamed to http://[::1]:8000/todos [::1] is IP6 equivalent for localhost.
      - Open the extension in Visual Studio Code.
  - Create a new request, specify the method as POST, provide the URL, headers, and request body if needed.
  - Send the request and view the response within the extension's interface.

    JSONPlaceholder

    JSONPlaceholder is a sample JSON-based RESTful API. It provides a set of predefined API endpoints that return placeholder data in JSON format. JSONPlaceholder is specifically designed for front-end developers who need a mock API for testing and prototyping purposes. It mimics a typical RESTful API with endpoints for retrieving, creating, updating, and deleting resources. The data returned by JSONPlaceholder is fixed and does not change.

    Postman Mock Server

    Postman is a widely-used API development and testing platform. It offers a "Mock Server" feature that allows you to create and run a mock API based on the request and response examples you define. Postman Mock Server supports various request types and is useful for simulating API behavior.

    JSON Server

    You can use below commands.
    1
2      npm i -D json-server --legacy-peer-deps
3
4      npx json-server --watch db.json --port 8000
5

    JSON Server: JSON Server is a simple and lightweight backend server that allows you to quickly set up a RESTful API using JSON as the data format. It is primarily used for development and testing purposes when you need to simulate a backend server without actually implementing a full-fledged server.

    With JSON Server, you can create a mock API by defining JSON files that represent your data. These JSON files act as a lightweight database, and JSON Server provides a set of predefined endpoints for performing CRUD (Create, Read, Update, Delete) operations on the data.

    Some key features of JSON Server include

    1. RESTful API: JSON Server automatically generates RESTful API endpoints based on the data defined in the JSON files. This means you can interact with the API using standard HTTP methods like GET, POST, PUT, PATCH, and DELETE.
    2. Data Relationships: JSON Server allows you to define relationships between data entities by using nested JSON structures. This enables you to model more complex data scenarios and handle associations between resources.
    3. Filtering, Sorting, and Pagination: JSON Server provides query parameters for filtering, sorting, and pagination. You can easily filter data based on specific criteria, sort data based on specific fields, and paginate results to control the amount of data returned.
    4. Custom Routes: JSON Server allows you to define custom routes in addition to the default RESTful endpoints. This gives you the flexibility to create custom API endpoints that perform specific operations or combine data from multiple resources.
    5. Middleware Support: JSON Server supports middleware functions that can intercept and modify requests and responses. You can use middleware to add custom logic, authentication, authorization, or any other functionality you need in your API.

    JSON Server is a convenient tool for front-end developers who want to rapidly prototype or test their applications without the need for a fully implemented backend. It provides a simple and easy-to-use API for interacting with mock data.

    UI Components

    You can use reusable component e.g. CustomButton, Modal etc

    CSS

    Tailwind CSS

    tailwind css provides utility classes. You can also use tailwind css intellisense extension. When you create nextjs project, tailwind is configured automatically. Additionally you can install plugins like daisyui using below command.
    npm i -D daisyui@latest
    Then you can update tailwind.config.js to incluse the plugin.
    plugins:[require("daisyui")]
    Now instead of utility classes, you can use component classes.
    1<button class="cursor-pointer rounded bg-blue-400 px-2 py-2 text-center text-sm text-white">
2  Sell
3</button>
4<button class="btn">Sell</button>
    But if you want to override css of the component, you can also use utility classes.
    <button class="btn w-20">Sell</button>

    Bootstrap

    Icons

    Fontawesome

    React Icons

    Deployment

    Performance Optimization

    Caching

    Load Balancing

    Security

    Logging

    Analytics

    Monitoring

    Environment Variables

    Adsense

    Manual HTML Ad

    Copy and paste the ad unit code in between the body tags of your pages
    1<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4354027605127587"
2  crossorigin="anonymous"></script>
3<!-- responsive manual ad - square -->
4<ins class="adsbygoogle"
5  style="display:block"
6  data-ad-client="ca-pub-4354027605127587"
7  data-ad-slot="4429111582"
8  data-ad-format="auto"
9  data-full-width-responsive="true"></ins>
10<script>
11  (adsbygoogle = window.adsbygoogle || []).push({});
12</script>
13

    Manual AMP Ad

    Put the script in head tag and amp-ad element in body.
    1<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
2<amp-ad width="100vw" height="320"
3     type="adsense"
4     data-ad-client="ca-pub-4354027605127587"
5     data-ad-slot="4429111582"
6     data-auto-format="rspv"
7     data-full-width="">
8  <div overflow=""></div>
9</amp-ad>
10

    Auto Ad

    Put this code in head of html
    1<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4354027605127587"
2crossorigin="anonymous"></script>

    Syntax Highlighter

    Below librabries can be used for syntac highlighting.
    • JS Highlight
    • Prism