I'm Building a Full-Stack App: Here Are the Libraries I'm Going to Use...
Tags: opensource, programming, beginners, javascript
Published: 2024-02-28 10:51:48

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqoipyuoxgb83swyoo4a.gif)

{% cta https://github.com/CopilotKit/CopilotKit %} Star ⭐️ {% endcta %}

---

## 1. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - AI Copilots for your product in hours.

![copilotKit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzuxjfog2ldam3csrl62.png)

&nbsp;

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
npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea
```

This is how you can integrate a CopilotTextArea.

```javascript
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](https://docs.copilotkit.ai/getting-started/quickstart-textarea).

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

{% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %}

---

## 2. [Storybook](https://github.com/storybookjs/storybook) - UI development, testing, and documentation made easy.

![storybook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78rfum1ydisn51qhb408.png)

&nbsp;

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.
```typescript
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](https://storybook.js.org/docs/get-started/setup).

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.

{% cta https://github.com/storybookjs/storybook %} Star Storybook ⭐️ {% endcta %}

---

## 3. [Appwrite](https://github.com/appwrite/appwrite) - Your backend minus the hassle.

![appwrite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8x568uz21seyygw6b72z.png)

![list of sdks with appwrite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp7k8qnamsluto7eifpl.png)

&nbsp;

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.
```javascript
"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](https://appwrite.io/docs).

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

{% cta https://github.com/appwrite/appwrite %} Star Appwrite ⭐️ {% endcta %}

---

## 4. [Wasp](https://github.com/wasp-lang/wasp) - Rails-like framework for react, node.js, and prisma.

![wasp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi2mwazueoc3ezjx8a9q.png)

&nbsp;

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.
```javascript
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](https://wasp-lang.dev/docs).

{% cta https://github.com/wasp-lang/wasp %} Star Wasp ⭐️ {% endcta %}

---

## 5. [Novu](https://github.com/novuhq/novu) - Add in-app notifications to your app!

![novu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/716b7biilet4auudjlcu.png)

&nbsp;

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.
```javascript
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](https://docs.novu.co/getting-started/introduction).

{% cta https://github.com/novuhq/novu %} Star Novu ⭐️ {% endcta %}

---

## 6. [Remotion](https://github.com/remotion-dev/remotion) - Make videos programmatically with React.

![remotion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmnrxhsc7b9mm5oagflm.png)

&nbsp;

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.
```javascript
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](https://www.remotion.dev/docs/).

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

{% cta https://github.com/remotion-dev/remotion %} Star Remotion ⭐️ {% endcta %}

---

## 7. [NocoDB](https://github.com/nocodb/nocodb) - Alternative of Airtable.

![NocoDB](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iw3tchfgyzehye5c39xq.png)

&nbsp;

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](https://docs.nocodb.com/).

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.

{% cta https://github.com/nocodb/nocodb %} Star NocoDB ⭐️ {% endcta %}

---

## 8. [Novel](https://github.com/steven-tey/novel) - WYSIWYG editor with AI-powered autocompletion.

![novel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uo34vd9twpxcpbpzgchi.png)

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

&nbsp;

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.
```javascript
import { Editor } from "novel";

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

{% cta https://github.com/steven-tey/novel %} Star Novel ⭐️ {% endcta %}

---

## 9. [Blitz](https://github.com/blitz-js/blitz) - Missing full-stack toolkit for NextJS.

![blitz](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vz6ineg1o7xyv7pwbuqn.png)

&nbsp;

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.
```javascript
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](https://blitzjs.com/docs/get-started).

It improves the building by several folds.

![blitz](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc4mb5wdksjv1ybx71co.png)

{% cta https://github.com/blitz-js/blitz %} Star Blitz ⭐️ {% endcta %}

---

## 10. [Supabase](https://github.com/supabase/supabase) - open source Firebase alternative.

![supabase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksfygjhrzhmsg9cnvobs.png)

&nbsp;

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.
```javascript
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](https://supabase.com/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.

{% cta https://github.com/supabase/supabase %} Star Supabase ⭐️ {% endcta %}

---

## 11. [Refine](https://github.com/refinedev/refine) - Open source retool for enterprise.

![refine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx0kd6t2jzdtf90k5ke3.png)

Build admin panels, dashboards & B2B apps with unmatched flexibility

&nbsp;

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.
```javascript
import { useLogin } from "@refinedev/core";
const { login } = useLogin();
```

You can read the [docs](https://refine.dev/docs/).

{% cta https://github.com/refinedev/refine %} Star Refine ⭐️ {% endcta %}

---

## 12. [Zenstack](https://github.com/zenstackhq/zenstack) - Database to API & UI In minutes.

![zenstack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3b6n2ea3jeeva6uujoex.png)

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

&nbsp;

Get started with the following npx command.
```
npx zenstack@latest init
```

This is how you can create a RESTful API through server adapters.
```javascript
// 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](https://zenstack.dev/docs/welcome).

{% cta https://github.com/zenstackhq/zenstack %} Star Zenstack ⭐️ {% endcta %}

---

## 13. [Buildship](https://github.com/rowyio/buildship) - Low-code visual backend builder.

![buildship](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzlrynz5xephv4t9layd.png)

&nbsp;

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 🚀

{% cta https://github.com/rowyio/buildship %} Star Buildship ⭐️ {% endcta %}

---

## 14. [Taipy](https://github.com/Avaiga/taipy) - Data and AI algorithms into production-ready web applications.

![taipy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohv3johuz92lsaux52oq.png)

&nbsp;

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.
```python
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](https://docs.taipy.io/en/latest/).

They also have a lot of [demo app tutorials](https://docs.taipy.io/en/latest/knowledge_base/demos/) that you can build.

{% cta https://github.com/Avaiga/taipy %} Star Taipy ⭐️ {% endcta %}

---

## 15. [LocalForage](https://github.com/localForage/localForage) - Offline storage improved.

![localforage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hlrka5pybvmgmo2djel.png)

&nbsp;

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](https://localforage.github.io/localForage/#installation).

{% cta https://github.com/localForage/localForage %} Star LocalForage ⭐️ {% endcta %}

---

## 16. [Zod](https://github.com/colinhacks/zod) - TypeScript-first schema validation with static type inference.

![zod](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s6zvmqr0lv93vsrhofs.png)

&nbsp;

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.
```javascript
const name = z.string({
  required_error: "Name is required",
  invalid_type_error: "Name must be a string",
});
```

You can read the [docs](https://zod.dev/).

It Works in Node.js and all modern browsers

{% cta https://github.com/colinhacks/zod %} Star Zod ⭐️ {% endcta %}

---

## 17. [Doppler](https://github.com/DopplerHQ) - manage your secrets.

![doppler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gycxnuiiwsvibryrytlc.png)

&nbsp;

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](https://github.com/DopplerHQ/cli-action) to install Doppler CLI.

You can read the [docs](https://docs.doppler.com/docs/start).

```yaml
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 }}
```

{% cta https://github.com/DopplerHQ %} Star DopplerHQ ⭐️ {% endcta %}

---

## 18. [FastAPI](https://github.com/tiangolo/fastapi) - High performance, easy to learn, fast to code, ready for production.

![FastAPI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2awncoia6255ycl95lk.png)

&nbsp;

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.
```python
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](https://fastapi.tiangolo.com/).

{% cta https://github.com/tiangolo/fastapi %} Star FastAPI ⭐️ {% endcta %}

---

## 19. [Flowise](https://github.com/FlowiseAI/Flowise) - Drag & drop UI to build your customized LLM flow.

![flowise](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ct732wv07pvwx0nmavp5.png)

&nbsp;

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.
```javascript
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](https://docs.flowiseai.com/).

{% cta https://github.com/FlowiseAI/Flowise %} Star Flowise ⭐️ {% endcta %}

---

## 20. [Scrapy](https://github.com/scrapy/scrapy) - a fast high-level web crawling & scraping framework for Python..

![Scrapy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1b2y1hzdsphw43b6v7b.png)

&nbsp;

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.
```python
 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](https://scrapy.org/doc/).

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

{% cta https://github.com/scrapy/scrapy %} Star Scrapy ⭐️ {% endcta %}

---

## 21. [Tone](https://github.com/Tonejs/Tone.js) - Make interactive music in the browser.

![Tone.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fokxsoblaohgs4tx75g3.png)

&nbsp;

Get started with the following npm command.
```
npm install tone
```

This is how you can start with Tone.js
```javascript
// 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](https://github.com/Tonejs/Tone.js?tab=readme-ov-file#installation).

{% cta https://github.com/Tonejs/Tone.js %} Star Tone ⭐️ {% endcta %}

---

## 22. [Spacetime](https://github.com/spencermountain/spacetime) - lightweight javascript timezone library.

![spacetime](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abfyfuzt4nw4h7b8usab.png)

&nbsp;

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.
```javascript
<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>
```

{% cta https://github.com/spencermountain/spacetime %} Star Spacetime ⭐️ {% endcta %}

---

## 23. [Mermaid](https://github.com/mermaid-js/mermaid) - Generate diagrams from markdown-like text.

![mermaid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggubn86xv7fznxol6fw7.png)

&nbsp;

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

This is how you can create a diagram.
```markdown
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbuo2ey5q2x3sjwywizg.png)

You can read the [docs](https://mermaid.js.org/intro/getting-started.html) and the plugin for [VS Code](https://docs.mermaidchart.com/plugins/visual-studio-code).

See an example in the [live editor](https://mermaid.live/edit#pako:eNpVkE1PwzAMhv9KlvM-2AZj62EIxJd24ADXXLzEbaKlcUkdUDX1v5MONomcnNevXz32UWoyKAvZ4mfCoPHRQRWhVuHeO42T7XZHNhTiFb0nMdRjYelbQETRUbpTwRM1uQ2erbaoDyqI_AbnZfjZVZYFVOBCy8J2DWlLwUQHKmAwKrwRo4gnF5Xid-gd2FEAL9hSyp12pMIpNcee2ArxEhH4LG-3D7TPoAPcnhL_4WVxcgHZkfedqIjMSI5ljbEGZ_LyxwFaSbZYo5JFLg3Eg5Iq9NkHiemjC1oWHBOOZWoM8PlQ_8Un45iiLErwbRY9gcH8PUrumuHKlWs5J2oKpasGPUWfZcvctMVsNrSnlWOb9lNN9ax1xkJk-7VZzVaL1RoWS1zdLuFmuTR6P9-sy8X1vDS3V_MFyL7vfwD_bJ1W).

{% cta https://github.com/mermaid-js/mermaid %} Star Mermaid ⭐️ {% endcta %}

---

## 24. [Public APIs](https://github.com/public-apis/public-apis) - 1400+ APIs in 20+ categories.

![public apis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjapk9rwlzdl6bcyqdnl.png)

&nbsp;

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rld5i88smezo1naawz7a.png)

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/](https://collective-api.vercel.app/)

{% cta https://github.com/public-apis/public-apis %} Star Public APIs ⭐️ {% endcta %}

---

## 25. [Framer Motion](https://github.com/framer/motion) - animations that work like magic.

![framer motion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hn4ecqkrhs8f4729bzps.png)

&nbsp;

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.
```javascript
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](https://www.framer.com/motion/introduction/).

{% cta https://github.com/framer/motion %} Star Framer Motion ⭐️ {% endcta %}

---

## 26. [Btw](https://github.com/btw-so/btw) - set up your personal blog in minutes.

![btw](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnne3lrfpolotmxkdz2m.png)

&nbsp;

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

![btw](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rli7hpoccqwpvba29b4.png)

A [sample blog](https://www.siddg.com/about) built using btw.

{% cta https://github.com/btw-so/btw %} Star Btw ⭐️ {% endcta %}

---

## 27. [Formbricks](https://github.com/formbricks/formbricks) - open source survey platform.

![Formbricks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tp6ggyom33vdifd3m1vt.png)

&nbsp;

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.
```javascript
import formbricks from "@formbricks/js";

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

You can read the [docs](https://formbricks.com/docs/getting-started/quickstart-in-app-survey).

{% cta https://github.com/formbricks/formbricks %} Star Formbricks ⭐️ {% endcta %}

---

## 28. [Stripe](https://github.com/stripe) - payment infrastructure.

![Stripe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79yvcgsi4744cmryh15j.png)

&nbsp;

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.
```javascript
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](https://github.com/stripe/react-stripe-js?tab=readme-ov-file#minimal-example).

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

![integrate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67f3pb2i8xolt635rp2p.png)

{% cta https://github.com/stripe %} Star Stripe ⭐️ {% endcta %}

---

## 29. [Upscayl](https://github.com/upscayl/upscayl) - open source AI image upscaler.

![upscayl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2c1837rev5jb260ro2sd.png)

&nbsp;

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4qq1wm3wey3vihn9al4.png)

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

{% cta https://github.com/upscayl/upscayl %} Star Upscayl ⭐️ {% endcta %}

---

## 30. [Resend](https://github.com/resend) - Email API for developers.

![resend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3auhh3hbxjmmzehe5v0.png)

&nbsp;

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.
```javascript
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](https://resend.com/docs/introduction).

![resend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rer9ym187e4i9l11afkg.png)

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.

{% cta https://github.com/resend %} Star Resend ⭐️ {% endcta %}

---

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](https://github.com/florinpop17/app-ideas).

Have a great day! Till next time.