10 Modern Frameworks with 30+ Projects

Looking to build something impressive for your portfolio or create a revenue-generating side project? I've put together a collection of 10 powerful frameworks and libraries that are making waves in the developer community, along with 30+ real-world applications built with them.

Each tool comes with code examples to get you started right away. Let's explore these options to supercharge your development workflow!

1. CopilotKit - Build AI Assistants in Hours

CopilotKit simplifies adding AI capabilities to React apps with minimal code. With 4,200+ GitHub stars and regular updates, it's becoming a developer favorite.

Getting started:

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

Basic implementation:

"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css"; 

export default function RootLayout({children}) {
  return (
    <CopilotKit url="/path_to_copilotkit_endpoint">
      <CopilotSidebar>
        {children}
      </CopilotSidebar>
    </CopilotKit>
  );
}

Cool Projects Built with CopilotKit:

1. AI-Powered Blogging Platform - Using Next.js, Langchain, and Supabase

2. Text-to-PowerPoint Generator - Convert plain text into presentations

3. V0.dev Clone - Generate UI components from text prompts

4. Chat with Your Resume - Generate and interact with your resume

2. Appwrite - Backend Without the Hassle

Appwrite handles auth, databases, functions, and storage with 40,000+ GitHub stars, making it a powerful Supabase alternative.

Installation:

npm install appwrite

Quick login component:

"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);
  };

  // Additional code here...
};

Awesome Appwrite Projects:

1. FoodMagic - AR food delivery app built with Flutter

2. Repo Rater - Rate GitHub repos based on developer experience

3. Twitter Clone - Full-featured social platform with Flutter

4. Dart Online Compiler - Run Dart code without local installation

3. Resend - Beautiful React Emails

Resend revolutionizes email creation with React components. With 12,000+ GitHub stars, it's becoming the standard for developer-friendly email solutions.

npm install @react-email/components -E

Next.js integration:

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);
}

Projects Using Resend:

1. Anymail - Django email integration (1,500+ stars)

2. Badget - Financial management app with Next.js 14

4. Shadcn UI - Copy-Paste Component Library

This wildly popular UI library (55,000+ GitHub stars) provides beautiful, customizable components without the framework lock-in.

npx shadcn-ui@latest init

Notable Shadcn UI Projects:

1. 10000+ Themes for shadcn/ui - Generate and share custom themes

2. Openv0 - AI-powered UI component generator (3,000+ stars)

5. Buildship - Visual Backend Builder

Buildship offers a no-code approach to creating production-ready backends, perfect for frontend developers who want to avoid DevOps headaches.

Projects Built with Buildship:

1. Travel WebApp - Built with Locofy for frontend and Buildship for backend

2. AI Assistant on Telegram - Chat with your data through Telegram

3. AI YouTube Timestamp Generator - Automatically generate video timestamps

6. Taipy - Python Data Apps Made Simple

Taipy transforms Python data science code into interactive web applications with 8,000+ GitHub stars.

pip install taipy

Interesting Taipy Projects:

1. WalletWise - Financial management with AI-powered insights

2. Population Census - Interactive visualization of Nepal's 2021 census

3. Taipy Chess - Analysis dashboard for 20,000 chess games

4. Olympic Medals Dashboard - Historical Olympic data visualization

7. XYFlow - Interactive Node-Based Interfaces

XYFlow enables creation of flowcharts, diagrams, and node-based UIs with 19,000+ GitHub stars.

npm install reactflow

Simple flow example:

import ReactFlow, { Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';

const edges = [{ id: '1-2', source: '1', target: '2' }];

const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];

function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

Companies Using XYFlow:

1. Stripe - For interactive documentation flows

2. Shaderfrog - Node-based shader creation tool

3. Typeform - For their form logic builder

8. Pieces - AI-Powered Code Management

Pieces helps developers manage code snippets with offline ML capabilities for enhanced productivity without privacy concerns.

Pieces-Powered Projects:

1. DeskBuddy - Track and improve coding habits

2. CLI Agent - Command-line interface for Pieces OS

3. Streamlit & Pieces - Interactive coding assistant

9. Typesense - Lightning-Fast Search Engine

Typesense delivers sub-50ms search experiences with typo tolerance and has 17,000+ GitHub stars.

pip install typesense

Typesense Demo Applications:

1. Linux Kernel Commit Search - Search through 1M Git commits

2. MusicBrainz Explorer - Search 32M songs database

3. E-commerce Product Finder - Fast product search experience

4. Recipe Search Engine - Search 2M cooking recipes

10. Payload CMS - Modern Headless CMS

Payload combines CMS capabilities with application framework flexibility, boasting 19,000+ GitHub stars.

npx create-payload-app@latest

Payload Success Stories:

1. E-commerce Template - Complete online store solution

2. Quikplow - "Uber for snow plows" built in under 120 days

3. Paper Triangles - Interactive media portfolio

4. Bizee - Migrated 2,500 pages in just 3 months

Ready to start building? These tools provide the perfect foundation for creating impressive projects that can enhance your portfolio or even generate income. Each comes with robust documentation and growing communities to support your development journey.

Which of these technologies are you most excited to try? Drop a comment and let me know what you'll build first!