I'm Building a Full-Stack App: Here Are the Libraries I'm Going to Use...

I'm Building a Full-Stack App: Here Are the Libraries I'm Going to Use...

There are countless frameworks and libraries that you can use to improve your full-stack application.

We will cover exciting concepts like in-app notifications, making videos with react, and from email API for developers to creating interactive music in a browser.

Let's get started then.

(Don't forget to star these libraries to show them your support).

Image description

DM me on Twitter for collab and sponsorships.


1. CopilotKit - AI Copilots for your product in hours.

copilotKit

You can integrate key AI features into React apps using two React components. They also provide built-in (fully-customizable) Copilot-native UX components like <CopilotKit />, <CopilotPopup />, <CopilotSidebar />, <CopilotTextarea />.

Get started with the following npm command.

npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea

This is how you can integrate a CopilotTextArea.

import { CopilotTextarea } from "@copilotkit/react-textarea";
import { useState } from "react";

export function SomeReactComponent() {
  const [text, setText] = useState("");

  return (
    <>
      <CopilotTextarea
        className="px-4 py-4"
        value={text}
        onValueChange={(value: string) => setText(value)}
        placeholder="What are your plans for your vacation?"
        autosuggestionsConfig={{
          textareaPurpose: "Travel notes from the user's previous vacations. Likely written in a colloquial style, but adjust as needed.",
          chatApiConfigs: {
            suggestionsApiConfig: {
              forwardedParams: {
                max_tokens: 20,
                stop: [".", "?", "!"],
              },
            },
          },
        }}
      />
    </>
  );
}

You can read the docs.

The basic idea is to build AI Chatbots in minutes that can be useful for LLM-based full-stack applications.

Star CopilotKit ⭐️


2. Storybook - UI development, testing, and documentation made easy.

storybook

Storybook is a frontend workshop for building UI components and pages in isolation. It helps in UI development, testing, and documentation.

They have 57k+ commits, 81k+ stars, and 1300+ releases on GitHub.

This is how you can create a simple component for your project.

import type { Meta, StoryObj } from '@storybook/react';

import { YourComponent } from './YourComponent';

//👇 This default export determines where your story goes in the story list
const meta: Meta<typeof YourComponent> = {
  component: YourComponent,
};

export default meta;
type Story = StoryObj<typeof YourComponent>;

export const FirstStory: Story = {
  args: {
    //👇 The args you need here will depend on your component
  },
};

You can read the docs.

These days UIs are painful to debug because they’re entangled in business logic, interactive states, and app context.

Storybook provides an isolated iframe to render components without interference from app business logic and context. That helps you focus development on each variation of a component, even the hard-to-reach edge cases.

Star Storybook ⭐️


3. Appwrite - Your backend minus the hassle.

appwrite

list of sdks with appwrite

Appwrite's open-source platform lets you add Auth, DBs, Functions, and Storage to your product & build any application at any scale, own your data, and use your preferred coding languages and tools.

They have great contributing guidelines and even go to the trouble of explaining architecture in detail.

Get started with the following npm command.

npm install appwrite

You can create a login component like this.

"use client";
import { useState } from "react";
import { account, ID } from "./appwrite";

const LoginPage = () => {
  const [loggedInUser, setLoggedInUser] = useState(null);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");

  const login = async (email, password) => {
    const session = await account.createEmailSession(email, password);
    setLoggedInUser(await account.get());
  };

  const register = async () => {
    await account.create(ID.unique(), email, password, name);
    login(email, password);
  };

  const logout = async () => {
    await account.deleteSession("current");
    setLoggedInUser(null);
  };

  if (loggedInUser) {
    return (
      <div>
        <p>Logged in as {loggedInUser.name}</p>
        <button type="button" onClick={logout}>
          Logout
        </button>
      </div>
    );
  }

  return (
    <div>
      <p>Not logged in</p>
      <form>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <input
          type="text"
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <button type="button" onClick={() => login(email, password)}>
          Login
        </button>
        <button type="button" onClick={register}>
          Register
        </button>
      </form>
    </div>
  );
};

export default LoginPage;

You can read the docs.

Appwrite makes it very easy to build scalable backend applications with extended features out of the box.

Star Appwrite ⭐️


4. Wasp - Rails-like framework for react, node.js, and prisma.

wasp

The fastest way to develop full-stack web apps with React & Node.js. This is not an idea but rather a different way to build crazy fast full-stack applications.

This is how you can integrate it into a component.

import getRecipes from "@wasp/queries/getRecipes";
import { useQuery } from "@wasp/queries";
import type { User } from "@wasp/entities";

export function HomePage({ user }: { user: User }) {
  // Due to full-stack type safety, `recipes` will be of type `Recipe[]` here.
  const { data: recipes, isLoading } = useQuery(getRecipes); // Calling our query here!

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Recipes</h1>
      <ul>
        {recipes ? recipes.map((recipe) => (
          <li key={recipe.id}>
            <div>{recipe.title}</div>
            <div>{recipe.description}</div>
          </li>
        )) : 'No recipes defined yet!'}
      </ul>
    </div>
  );
}

You can read the docs.

Star Wasp ⭐️


5. Novu - Add in-app notifications to your app!

novu

Novu provides an open source notification infrastructure with a fully functional embedded notification center.

This is how you can create a novu component with React for in-app notifications.

import {
  NovuProvider,
  PopoverNotificationCenter,
  NotificationBell,
} from "@novu/notification-center";

function App() {
  return (
    <>
      <NovuProvider
        subscriberId={process.env.REACT_APP_SUB_ID}
        applicationIdentifier={process.env.REACT_APP_APP_ID}
      >
        <PopoverNotificationCenter>
          {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
        </PopoverNotificationCenter>
      </NovuProvider>
    </>
  );
}

export default App;

You can read the docs.

Star Novu ⭐️


6. Remotion - Make videos programmatically with React.

remotion

Create real MP4 videos using React, scale your video production using server-side rendering and parametrization.

Get started with the following npm command.

npm init video

It gives you a frame number and a blank canvas where you can render anything you want using React.

This is an example React component that renders the current frame as text.

import { AbsoluteFill, useCurrentFrame } from "remotion";

export const MyComposition = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        fontSize: 100,
        backgroundColor: "white",
      }}
    >
      The current frame is {frame}.
    </AbsoluteFill>
  );
};

You can read the docs.

The remotion team has been famous for making a GitHub Wrapped for the last 2 years.

Star Remotion ⭐️


7. NocoDB - Alternative of Airtable.

NocoDB

The free and open-source replacement for Airtable is NocoDB. It makes a smart spreadsheet out of any MySQL, PostgreSQL, SQL Server, SQLite, or MariaDB database.

Its main objective is to make powerful computing tools more widely available.

Get started with the following npx command.

npx create-nocodb-app

You can read the docs.

NocoDB was created to give digital businesses around the world a potent open-source and no-code interface for databases.

You can import your airtable data in NocoDB very quickly.

Star NocoDB ⭐️


8. Novel - WYSIWYG editor with AI-powered autocompletion.

novel

It uses Next.js, Vercel AI SDK, Tiptap as a text editor.

Get started with the following npm command.

npm i novel

This is how you can use it. There are multiple options available for improving your application.

import { Editor } from "novel";

export default function App() {
  return <Editor />;
}

Star Novel ⭐️


9. Blitz - Missing full-stack toolkit for NextJS.

blitz

Blitz picks up where Next.js leaves off, providing battle-tested libraries and conventions for shipping and scaling worldwide applications.

Get started with the following npm command.

npm install -g blitz

This is how you can build a new page with Blitz.

const NewProjectPage: BlitzPage = () => {
  const router = useRouter()
  const [createProjectMutation] = useMutation(createProject)

  return (
    <div>
      <h1>Create New Project</h1>

      <ProjectForm
        submitText="Create Project"
        schema={CreateProject}
        onSubmit={async (values) => {
          // This is equivalent to calling the server function directly
          const project = await createProjectMutation(values)
          // Notice the 'Routes' object Blitz provides for routing
          router.push(Routes.ProjectsPage({ projectId: project.id }))
        }}
      />
    </div>
  );
};

NewProjectPage.authenticate = true
NewProjectPage.getLayout = (page) => <Layout>{page}</Layout>

export default NewProjectPage

You can read the docs.

It improves the building by several folds.

blitz

Star Blitz ⭐️


10. Supabase - open source Firebase alternative.

supabase

Most of us would already expect supabase to be here because it's just too great.

Get started with the following npm command (Next.js).

npx create-next-app -e with-supabase

This is how you can create a user using supabase.

import { createClient } from '@supabase/supabase-js'

// Initialize 
const supabaseUrl = 'https://chat-room.supabase.co'
const supabaseKey = 'public-anon-key'
const supabase = createClient(supabaseUrl, supabaseKey)

// Create a new user
const { user, error } = await supabase.auth.signUp({
  email: 'example@email.com',
  password: 'example-password',
})

You can read the docs.

You can build a crazy fast application with Auth, realtime, Edge functions, storage, and many more. Supabase covers it all!

They also provide several starting kits like AI Chatbot & Stripe Subscriptions.

Star Supabase ⭐️


11. Refine - Open source retool for enterprise.

refine

Build admin panels, dashboards & B2B apps with unmatched flexibility

You can set it with a single CLI command in under a minute. It has connectors for 15+ backend services including Hasura, Appwrite, and more.

Get started with the following npm command.

npm create refine-app@latest

This is how easy it is to add a login using Refine.

import { useLogin } from "@refinedev/core";
const { login } = useLogin();

You can read the docs.

Star Refine ⭐️


12. Zenstack - Database to API & UI In minutes.

zenstack

A TypeScript toolkit that supercharges Prisma ORM with a powerful access control layer and unleashes its full power for full-stack development.

Get started with the following npx command.

npx zenstack@latest init

This is how you can create a RESTful API through server adapters.

// pages/api/model/[...path].ts

import { requestHandler } from '@zenstackhq/next';
import { enhance } from '@zenstackhq/runtime';
import { getSessionUser } from '@lib/auth';
import { prisma } from '@lib/db';

// Mount Prisma-style APIs: "/api/model/post/findMany", "/api/model/post/create", etc.
// Can be configured to provide standard RESTful APIs (using JSON:API) instead.
export default requestHandler({
    getPrisma: (req, res) => enhance(prisma, { user: getSessionUser(req, res) }),
});

You can read the docs.

Star Zenstack ⭐️


13. Buildship - Low-code visual backend builder.

buildship

For the apps you are building, with no-code app builders (FlutterFlow, Webflow, Framer, Adalo, Bubble, BravoStudio...) or frontend frameworks (Next.js, React, Vue...), you need a backend to support scalable APIs, secure workflows, automation, etc. BuildShip gives you a completely visual way to build these backend tasks scalably in an easy-to-use fully hosted experience.

This means you don't need to wrangle or deploy things on the cloud platform, perform DevOps, etc. Just Build and Ship, instantly 🚀

Star Buildship ⭐️


14. Taipy - Data and AI algorithms into production-ready web applications.

taipy

Taipy is an open-source Python library for easy, end-to-end application development, featuring what-if analyses, smart pipeline execution, built-in scheduling, and deployment tools.

Get started with the following command.

pip install taipy

This is a typical Python function, and the only task used in the filter scenario.

def filter_genre(initial_dataset: pd.DataFrame, selected_genre):
    filtered_dataset = initial_dataset[initial_dataset['genres'].str.contains(selected_genre)]
    filtered_data = filtered_dataset.nlargest(7, 'Popularity %')
    return filtered_data

You can read the docs.

They also have a lot of demo app tutorials that you can build.

Star Taipy ⭐️


15. LocalForage - Offline storage improved.

localforage

LocalForage is a JavaScript library that improves the offline experience of your web app by using an asynchronous data store with a simple, localStorage-like API. It allows developers to store many types of data instead of just strings.

Get started with the following npm command.

npm install localforage

Simply include the JS file and start using localForage.

<script src="localforage.js"></script>

You can read the docs.

Star LocalForage ⭐️


16. Zod - TypeScript-first schema validation with static type inference.

zod

Zod aims to be developer-friendly by minimizing duplicate type declarations. With Zod, you declare a validator once, and Zod will automatically infer the static TypeScript type. It's easy to compose simpler types into complex data structures.

Get started with the following npm command.

npm install zod

This is how you can customize some common error messages when creating a string schema.

const name = z.string({
  required_error: "Name is required",
  invalid_type_error: "Name must be a string",
});

You can read the docs.

It Works in Node.js and all modern browsers

Star Zod ⭐️


17. Doppler - manage your secrets.

doppler

You can eliminate secrets sprawl by organizing your secrets in projects with development, staging, and production environments.

Get started with the following command (MacOS).

$ brew install dopplerhq/cli/doppler
$ doppler --version

This is GitHub Actions workflow to install Doppler CLI.

You can read the docs.

name: Example action

on: [push]

jobs:
  my-job:
    runs-on: ubuntu-latest
    steps:
      - name: Install CLI
        uses: dopplerhq/cli-action@v3
      - name: Do something with the CLI
        run: doppler secrets --only-names
        env:
          DOPPLER_TOKEN: ${{ secrets.DOPPLER_TOKEN }}

Star DopplerHQ ⭐️


18. FastAPI - High performance, easy to learn, fast to code, ready for production.

FastAPI

FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.8+ based on standard Python type hints.

Get started with the following command.

$ pip install fastapi

This is how you can start working with FastAPI.

from typing import Union

from fastapi import FastAPI

app = FastAPI()


@app.get("/")
def read_root():
    return {"Hello": "World"}


@app.get("/items/{item_id}")
def read_item(item_id: int, q: Union[str, None] = None):
    return {"item_id": item_id, "q": q}

Your editor will auto-complete the attributes and know their types which is one of the best features of working with FastAPI.

You can read the docs.

Star FastAPI ⭐️


19. Flowise - Drag & drop UI to build your customized LLM flow.

flowise

Flowise is an open source UI visual tool to build your customized LLM orchestration flow & AI agents.

Get started with the following npm command.

npm install -g flowise
npx flowise start
OR
npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234

This is how you integrate the API.

import requests

url = "/api/v1/prediction/:id"

def query(payload):
  response = requests.post(
    url,
    json = payload
  )
  return response.json()

output = query({
  question: "hello!"
)}

You can read the docs.

Star Flowise ⭐️


20. Scrapy - a fast high-level web crawling & scraping framework for Python..

Scrapy

Scrapy is a fast high-level web crawling and web scraping framework, used to crawl websites and extract structured data from their pages. It can be used for a wide range of purposes, from data mining to monitoring and automated testing.

Get started with the following command.

 pip install scrapy

Build and run your web spiders.

 pip install scrapy
 cat > myspider.py <<EOF
import scrapy

class BlogSpider(scrapy.Spider):
    name = 'blogspider'
    start_urls = ['https://www.zyte.com/blog/']

    def parse(self, response):
        for title in response.css('.oxy-post-title'):
            yield {'title': title.css('::text').get()}

        for next_page in response.css('a.next'):
            yield response.follow(next_page, self.parse)
EOF
 scrapy runspider myspider.py

You can read the docs.

It has around 50k+ Stars so a huge credibility to the web scraping.

Star Scrapy ⭐️


21. Tone - Make interactive music in the browser.

Tone.js

Get started with the following npm command.

npm install tone

This is how you can start with Tone.js

// To import Tone.js:
import * as Tone from 'tone'

//create a synth and connect it to the main output (your speakers)
const synth = new Tone.Synth().toDestination();

//play a middle 'C' for the duration of an 8th note
synth.triggerAttackRelease("C4", "8n");

You can read the docs.

Star Tone ⭐️


22. Spacetime - lightweight javascript timezone library.

spacetime

You can calculate time in remote timezones; support daylight savings, leap years, and hemispheres. Orient time by quarter, season, month, week..

Get started with the following npm command.

npm install spacetime

This is how you can use it.

<script src="https://unpkg.com/spacetime"></script>
<script>
  var d = spacetime('March 1 2012', 'America/New_York')
  //set the time
  d = d.time('4:20pm')

  d = d.goto('America/Los_Angeles')
  d.time()
  //'1:20pm'
</script>

Star Spacetime ⭐️


23. Mermaid - Generate diagrams from markdown-like text.

mermaid

You can generate diagrams like flowcharts or sequence diagrams from text like Markdown with Mermaid.

This is how you can create a diagram.

sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

It will make the following diagram.

diagram

You can read the docs and the plugin for VS Code.

See an example in the live editor.

Star Mermaid ⭐️


24. Public APIs - 1400+ APIs in 20+ categories.

public apis

We mostly use external APIs for building an application, here you can find a list of all the APIs. The website link is at the end.

It has around 279k+ stars on GitHub.

public apis

It is insanely hard to hard to get the website link from the repository. So, I'm pasting it here.

Website - collective-api.vercel.app/

Star Public APIs ⭐️


25. Framer Motion - animations that work like magic.

framer motion

One of the most powerful animation libraries available. Framer uses simple declarative syntax means you write less code. Less code means your codebase is easier to read and maintain.

You can create events and gestures, and the community using Framer is big meaning good support.

Get started with the following npm command.

npm install framer-motion

This is how you can use it.

import { motion } from "framer-motion"

<motion.div
  whileHover={{ scale: 1.2 }}
  whileTap={{ scale: 1.1 }}
  drag="x"
  dragConstraints={{ left: -100, right: 100 }}
/>

You can read the docs.

Star Framer Motion ⭐️


26. Btw - set up your personal blog in minutes.

btw

You can sign up and use btw without installing anything. You can also use the open source version to self-host.

btw

A sample blog built using btw.

Star Btw ⭐️


27. Formbricks - open source survey platform.

Formbricks

Formbricks provides a free and open source surveying platform. Gather feedback at every point in the user journey with beautiful in-app, website, link, and email surveys. Build on top of Formbricks or leverage prebuilt data analysis capabilities.

Get started with the following npm command.

npm install @formbricks/js

This is how you can start using formbricks.

import formbricks from "@formbricks/js";

if (typeof window !== "undefined") {
  formbricks.init({
    environmentId: "claV2as2kKAqF28fJ8",
    apiHost: "https://app.formbricks.com",
  });
}

You can read the docs.

Star Formbricks ⭐️


28. Stripe - payment infrastructure.

Stripe

Millions of companies of all sizes use Stripe online and in person to accept payments, send payouts, automate financial processes, and ultimately grow revenue.

Get started with the following npm command (React.js).

npm install @stripe/react-stripe-js @stripe/stripe-js

This is how you can use hooks.

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import {loadStripe} from '@stripe/stripe-js';
import {
  PaymentElement,
  Elements,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();

    if (elements == null) {
      return;
    }

    // Trigger form validation and wallet collection
    const {error: submitError} = await elements.submit();
    if (submitError) {
      // Show error to your customer
      setErrorMessage(submitError.message);
      return;
    }

    // Create the PaymentIntent and obtain clientSecret from your server endpoint
    const res = await fetch('/create-intent', {
      method: 'POST',
    });

    const {client_secret: clientSecret} = await res.json();

    const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe || !elements}>
        Pay
      </button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Fully customizable with appearance API.
  appearance: {
    /*...*/
  },
};

const App = () => (
  <Elements stripe={stripePromise} options={options}>
    <CheckoutForm />
  </Elements>
);

ReactDOM.render(<App />, document.body);

You can read the docs.

You can integrate almost anything. It has a huge list of options.

integrate

Star Stripe ⭐️


29. Upscayl - open source AI image upscaler.

upscayl

Free and Open Source AI Image Upscaler for Linux, MacOS, and Windows built with Linux-First philosophy. It might not be related to full-stack, but it can be useful for upscaling your images.

upscayl

With state-of-the-art AI, Upscayl helps you turn low-resolution images into high resolution. Crisp and sharp!

Star Upscayl ⭐️


30. Resend - Email API for developers.

resend

You can build and send emails using React. One of the most hyped products of 2023.

Get started with the following npm command.

npm install @react-email/components -E

This is how you can integrate it with a next.js project.

import { EmailTemplate } from '@/components/email-template';
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
  const { data, error } = await resend.emails.send({
    from: 'onboarding@resend.dev',
    to: 'delivered@resend.dev',
    subject: 'Hello world',
    react: EmailTemplate({ firstName: 'John' }),
  });

  if (error) {
    return Response.json({ error });
  }

  return Response.json(data);
}

You can read the docs.

resend

The basic idea is a simple, elegant interface so you can start sending emails in minutes. It fits right into your code with SDKs for your favorite programming languages.

Star Resend ⭐️


Whew! Such a long list of projects.

I know you have more ideas, share them, and let's build together :D

It is not hard to build full-stack applications these days, but every application can increase that unique factor just by using good open-source projects effectively to solve any problem. For instance, you can build something that gives notifications or makes a UI flow to scrape the data.

I hope some will be useful for you in your developer journey. These have a top-notch Developer experience; you can depend on them.

Since you will be building stuff, here you can find some crazy ideas.

I create tech content to help others grow 1% daily so you can follow me on Twitter and LinkedIn to get daily insights.

Connect with me: TwitterLinkedInGitHub

"Write more, inspire more!"

Ending GIF waving goodbye

Did you find this article valuable?

Support Anmol Baranwal by becoming a sponsor. Any amount is appreciated!