Anmol BaranwalAs developers, we are often confused about which type of projects we should build for our portfolios.
That is why I’m covering 17 iconic projects that can impress anyone.
I've seen over 500 projects so I can confidently say that building these projects will make a huge impact and noise.
This will blow your curiosity, and it's going to be...
👑 1. CopilotKit - add an AI copilot to any project in minutes.
You will agree that it's tough to add AI features in React, that's where CopilotKit helps you as a framework for building custom AI Copilots.
You can build in-app AI chatbots, and in-app AI Agents with simple components provided by Copilotkit which is at least 10x easier compared to building it from scratch.
You shouldn't reinvent the wheel if there is already a very simple and fast solution!
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
This is how you can integrate a Chatbot.
A CopilotKit must wrap all components which interact with CopilotKit. It’s recommended you also get started with CopilotSidebar (you can swap to a different UI provider later).
"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/see_below">
<CopilotSidebar>
{children}
</CopilotSidebar>
</CopilotKit>
);
}
You can read the docs and check the demo video.
You can follow this guide to integrate a chatbot into your application.
You can watch the complete walkthrough!
CopilotKit has 8.5k+ stars on GitHub with 300+ releases.
Why am I discussing a framework?
Because I've already covered 7+ popular apps that you can build with CopilotKit. You can check it out here!
2. Reactive Resume - free resume builder with insane features.
This is one of the best resume builders out there and keeps your privacy in mind. Completely secure, customizable, portable, open-source, and free forever.
It simplifies the process of creating, updating, and sharing your resume. With zero user tracking or advertising, your privacy is a top priority. The platform is extremely user-friendly and can be self-hosted in less than 30 seconds if you wish to own your data completely.
It's available in multiple languages and comes packed with features such as real-time editing, dozens of templates, drag-and-drop customization, and integration with OpenAI for enhancing your writing.
You can share a personalized link of your resume to potential employers, track its views or downloads, and customize your page layout by dragging and dropping sections. The platform also supports various font options and provides dozens of templates to choose from. And yes, there's even a dark mode for a more comfortable viewing experience.
It has some exciting features, and you can even customize several columns. Plus, they have a very good user interface.
Some of the exciting features:
✅ Dashboard.
✅ Option of sections.
✅ Profile section.
✅ Experience section.
✅ Drag and drop layout option.
✅ Typography option.
✅ Theme option.
✅ Stats with public link and you can also make personal notes that are not shared with anyone else.
See the list of all features.
It involves these:
- React (Vite) for frontend.
- NestJS for backend.
- Postgres as primary database.
- Prisma ORM for easy database switching.
- Minio for object storage (avatars, resume PDFs, previews).
- Browserless for headless Chrome (PDF printing, preview generation).
- SMTP Server for password recovery emails.
- GitHub/Google OAuth for user authentication.
- LinguiJS and Crowdin for translation management and localization.
It has 21k stars on GitHub and its primary language is TypeScript.
3. Namviek - project manager for tiny teams.
Namviek is an open-source project manager for small teams with low budgets. It includes essential features for running a small team.
It's built using Next.js on the frontend as it seamlessly integrates with Vercel. For the backend, it uses Node.js, but the team has plans to migrate some functionalities to Golang in the coming future.
It has a good amount of layout options that are needed by any project manager.
Namviek has 1.7k stars on GitHub and is built using TypeScript.
4. Litlyx - One line code Analytics with AI.
Litlyx is a single-line code analytics solution that integrates with every JavaScript/TypeScript framework.
A simple analytics solution for developers but they use a wrapper of GPT that users can query about the data collected with litlyx.
For instance, you can simply ask How many visits did I have 7 days ago?, How many visits I had last week?, how many custom events were triggered with this name or name of the event and so on.
I believe they are planning to generate charts and reports with it in the future.
It tracks 10+ KPIs and as many custom events as you want for your app. Enjoy AI-powered dashboards for intuitive data insights, automatic reports sent straight to your email, and seamless CSV file downloads to work on your data.
You can install it using npm or CDN. The total lib size is less than 4kb so that's a plus point.
It supports 15+ frameworks as shown below.
Read the docs and check the live demo.
Trust me, building a good analytics system as a SAAS is perfect for your portfolio!
Litlyx has 215 stars on GitHub and is built using Vue + TypeScript.
5. Matcha - Drop-in semantic styling library in pure CSS.
Default browser stylesheets are usually pretty bare-bones, and it can be frustrating to not have something "visually nice" when you're prototyping apps, generating static HTML pages, Markdown-generated documents, etc., and don't want to delve into CSS intricacies too early.
matcha.css is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents.
To utilize matcha.css, just include the following line in the
section of your document. It's that simple!<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
For instance, let's check it with an example.
Before adding the script code.
After adding the script code.
Without really doing anything, you get a page that respects user preferences on light/dark mode, nice fonts, and proper spacing.
The <menu> actually looks like a menu, and the <form> is also pretty nice with even "mandatory field" indicators for required inputs. Without any build steps, JavaScript, configuration, or refactoring.
There are a few more "drop-in" CSS libraries out there, but I believe this is the most complete one as it provides additional modern styles out-of-the-box like syntax highlighting, simple layouts, utility classes, and more.
matcha.css is also easily customizable (it does not have any !important rules, and even provides a helper to create custom builds) while being also reversible (if you ever decide to migrate out, just remove the stylesheet).
You can read more on the docs with the HTML elements that are handled with semantic styling.
These are the best types of projects that showcase a lot in terms of credibility. Plus developing something unique and solving a real problem always give you an upper edge.
Matcha CSS has 1.5k stars on GitHub.
6. Instrukt - Integrated AI in the terminal.
Instrukt is a terminal-based AI-integrated environment. It offers a platform where users can:
- Create and instruct modular AI agents.
- Generate document indexes for question-answering.
- Create and attach tools to any agent.
Instruct them in natural language and, for safety, run them inside secure containers (currently implemented with Docker) to perform tasks in their dedicated, sandboxed space.
Built using Langchain, Textual, and Chroma.
Get started with the following command.
pip install instrukt[all]
There are a lot of exciting features such as:
✅ A terminal-based interface for power keyboard users to instruct AI agents without ever leaving the keyboard.
✅ Index your data and let agents retrieve it for question-answering. You can create and organize your indexes with an easy UI.
✅ Index creation will auto-detect programming languages and optimize the splitting/chunking strategy accordingly.
✅ Run agents inside secure docker containers for safety and privacy.
✅ Integrated REPL-Prompt for quick interaction with agents, and a fast feedback loop for development and testing.
✅ You can automate repetitive tasks with custom commands. It also has a built-in prompt/chat history.
You can read about all the features and the installation guide.
You can also debug and introspect agents using an in-built IPython console which is a neat little feature.
Instrukt is licensed with an AGPL license meaning that it can be used by anyone for whatever purpose.
Instrukt has 252 stars on GitHub and is built using Python.
7. NPM Copilot - CLI tool for Next.js that can analyze logs in real-time.
npm/yarn/pnpm copilot is a command-line tool that uses OpenAI's GPT-3 language model to provide suggestions for fixing errors in your code.
The CLI tool detects the project type and package manager being used in the current directory.
It then runs the appropriate development server command (e.g., npm run dev, yarn run dev, pnpm run dev) and listens for logs generated by the running application.
When an error is encountered, the CLI tool provides suggestions for error fixes in real time.
Get started by installing the npm-copilot package with the following npm command.
npm install -g npm-copilot
The CLI tool will begin monitoring the logs generated by the Next.js application and provide suggestions for error fixes in real-time.
You can use this command to use it in the project.
npm-copilot
It supports Next,js, React, Angular, and Vue.js
It has 343 stars on GitHub and is built using JavaScript.
8. Latitude - Developer first embedded analytics.
Latitude is an open source framework to build interactive data apps on top of your database or data warehouse (or even static CSV files!) using code.
With Latitude, you can write composable SQL queries with custom parameters at runtime to pull and transform your data and use our simple frontend components to display it.
The framework takes care of building the queries, running them on your data source and returning them to the frontend, so you can focus on building the best possible data experience for your users.
It's fast to get started, easy to maintain, and scales with your data.
Watch this video to understand more!
You can use the npm package latitude-data/react to integrate this with your frontend
You can check out a list of example projects converting typical use cases in the examples section of the Latitude repository.
Read the docs and the quickstart guide.
Latitude has 800 stars on GitHub and is built using TypeScript.
9. Voice Assistant on Mac - Your voice-controlled Mac assistant.
Your voice-controlled Mac assistant. GPT Automator lets you perform tasks on your Mac using your voice. For example, opening applications, looking up restaurants, and synthesizing information. Awesome :D
It was built during the London Hackathon.
It has two main parts:
a. Voice to command: It generates the command using Whisper running locally (a fork of Buzz).
b. Command to Action: You give the command to a LangChain agent equipped with custom tools we wrote. These tools include controlling the operating system of the computer using AppleScript and controlling the active browser using JavaScript. Finally, like any good AI, we have the agent speak out the final result using AppleScript saying "{Result}" (try typing "Hello World!" into your Mac terminal if you haven’t used it before”).
A custom tool we made to have the LLM control the computer using AppleScript. The prompt is the docstring:
@tool
def computer_applescript_action(apple_script):
"""
Use this when you want to execute a command on the computer. The command should be in AppleScript.
Here are some examples of good AppleScript commands:
Command: Create a new page in Notion
AppleScript: tell application "Notion"
activate
delay 0.5
tell application "System Events" to keystroke "n" using {{command down}}
end tell
...
Write the AppleScript for the Command:
Command:
"""
p = subprocess.Popen(['osascript', '-'], stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
stdout, stderr = p.communicate(applescript.encode('utf-8'))
if p.returncode != 0:
raise Exception(stderr)
decoded_text = stdout.decode("utf-8")
return decoded_text
If you are wondering how it works, GPT Automator converts your audio input to text using OpenAI's Whisper. Then, it uses a LangChain Agent to choose a set of actions, including generating AppleScript (for desktop automation) and JavaScript (for browser automation) commands from your prompt using OpenAI's GPT-3 ("text-davinci-003") and then executing the resulting script.
Just remember, this is not for production use. This project executes code generated from natural language and may be susceptible to prompt injection and similar attacks. This work was made as a proof-of-concept.
You can read the installation guide.
Let's look at some of the prompts and what it will do:
✅ Find the result of a calculation.
Prompt: "What is 2 + 2?"
It will write AppleScript to open up a calculator and type in 5 * 5.
✅ Find restaurants nearby.
Prompt: "Find restaurants near me"
It will open up Chrome, google search for a restaurant nearby, parse the page and then return the top results. Sometimes it’s cheeky, and instead will open up the Google Maps result and say “The best restaurants are the ones at the top of the page on Google Maps”. Other times it opens the top link on Google - and gets stuck on the Google accessibility page…
Here’s what’s printed to the terminal as it runs:
Command: Find a great restaurant near Manchester.
> Entering new AgentExecutor chain...
I need to search for a restaurant near Manchester.
Action: chrome_open_url
Action Input: https://www.google.com/search?q=restaurant+near+Manchester
Observation:
Thought: I need to read the page
Action: chrome_read_the_page
Action Input:
Observation: Accessibility links
Skip to the main content
... # Shortned for brevity
Dishoom Manchester
4.7
(3.3K) · £££ · Indian
32 Bridge St · Near John Rylands Library
Closes soon ⋅ 11 pm
Stylish eatery for modern Indian fare
San Carlo
4.2
(2.8K) · £££ · Italian
42 King St W · Near John Rylands Library
Closes soon ⋅ 11 pm
Posh, scenery Italian restaurant
Turtle Bay Manchester Northern Quarter
4.7
Thought: I now know the final answer
Final Answer: The 15 best restaurants in Manchester include El Gato Negro, Albert's Schloss, The Refuge, Hawksmoor, On The Hush, Dishoom, Banyan, Zouk Tea Room & Grill, Edison Bar, MyLahore Manchester, Turtle Bay Manchester Northern Quarter, San Carlo, The Black Friar, Mana, and Tast Cuina Catalana.
I cannot guarantee that those restaurants are worth it, visit at your own risk. haha!
✅ If you ask GPT Automator to wipe your computer it will.
Yes, it will wipe your computer if you ask!
My inner self screaming to do it :)
You can see the full demo here!
You can read more on Chidi's blog.
It has 218 stars on GitHub and was built using Python.
10. OpenAlternative - list of open source alternatives to proprietary software.
A community-oriented project is also good for the portfolio as long as it contains something unique which in this case does.
OpenAlternative is a community-driven list of open source alternatives to proprietary software and applications.
Some of the neat features are:
✅ Filters and algolia powered search.
✅ Different topics, languages, and options for categorizing.
✅ Submit the project option without creating an issue on GitHub.
OpenAlternative has 477 stars on GitHub and was built using TypeScript.
11. Lively - allows users to set animated desktop wallpapers and screensavers.
I've tried the effects and they are actually very cool. This is a very credible project because it's listed on the app store and anyone can learn a lot using the code.
You can see this video on how insane it looks.
They provide three types of wallpapers including video/GIF, Webpage, and Application/Games.
It is built on C# and some of the cool features that lively supports:
Lively can be controlled with command line arguments from the terminal. You can integrate this with other languages like Python or scripting software AutoHotKey.
Powerful set of API for developers to create interactive wallpapers. Get hardware readings, audio graphs, music information, and more.
Wallpaper playback pauses when fullscreen applications/games run on the machine (~0% CPU, GPU usage).
You can also leverage Machine Learning inference to create dynamic wallpapers. You can predict the distance from the camera of any 2D image and generate a 3D-like parallax effect. Cool :D
I've seen a lot of people using it and many of them aren't even aware that it's open source.
You can download it using installer or through microsoft store.
It was the winner of 2023 on the Microsoft Store which just gives a huge boost to the resume :)
It has 14.5k+ stars on GitHub with 60 releases and is built using C#.
12. Documenso - sign digital documents in the easiest way.
If you're doing freelancing and need to sign an agreement, this is the best choice for that. This solves a huge problem so that developers don't end up wasting time and focusing on what matters.
This is technically quite easy today, but it also introduces a new party to every signature: The signing tool providers.
The tech stack for the project includes TypeScript, Next.js, Prisma, Tailwind CSS, shadcn/ui, NextAuth.js, react-email, tRPC, @documenso/pdf-sign, React-PDF, PDF-Lib, Stripe, and Vercel.
The free tier lets you sign 10 documents per month which is good enough.
You can read this on how to set up the project.
You can read the docs.
I know it's not a very wide use case but you can still learn from the code so that is always a plus point. And it is a good project for your portfolio considering the whole process.
I've tested it properly and it works very well. In a nutshell, this is how it works:
✅ You upload the document and start filling in the information.
✅ Insert the email of all the parties involved.
✅ You just insert the textbox of the email, name, or signature that you need in the document.
✅ You will receive an email when any of the parties signs it and it will be available to download once every member has signed it.
The document will contain the signature and one more attached page with digital information. Very unique!
They have 6.9k stars on GitHub and are built using TypeScript.
13. Open Interpreter - natural language interface for computers.
Open Interpreter lets LLMs run code (Python, Javascript, Shell, and more) locally. You can chat with Open Interpreter through a ChatGPT-like interface in your terminal by running $ interpreter after installing.
This provides a natural-language interface to your computer's general-purpose capabilities:
✅ Create and edit photos, videos, PDFs, etc.
✅ Control a Chrome browser to perform research Plot, clean, and analyze large datasets.
I don't know about you, but their website made me say WOW!
Quickstart using this command.
pip install open-interpreter
// After installation, simply run:
interpreter
You can read the quickstart guide.
You should read about the comparison to ChatGPT's Code Interpreter and the commands that you can use.
You can read the docs.
Open Interpreter works with both hosted and local language models. Hosted models are faster and more capable, but require payment. Local models are private and free but are often less capable.
The codebase might be a little big but you can definitely build a mini prototype version of this.
They have 51k+ stars on GitHub and are built using Python.
14. CodeSnap - beautiful screenshots of your code in VS Code.
It's a VSCode extension that helps you quickly save screenshots of your code in a better way.
We all can agree that plain screenshots are boring and don't really work if you want to showcase them to someone else.
Below are a couple of samples.
It copies screenshots to your clipboard, shows line numbers, and is available with many other configuration options.
But for me, it's about the option of choosing my background color in terms of my brand colors.
If you want to learn how to build a VSCode extension, I recommend these:
- How to Make Your Own VS Code Extension - freeCodeCamp
- Your First Extension - VSCode Documentation
Download CodeSnap from VSCode marketplace that already has 200k+ installs.
I believe a VSCode extension that is validated by so many users is perfect for your portfolio.
CodeSnap has 512 stars on GitHub and is built using JavaScript.
15. SQL Translator - a tool for converting natural language queries into SQL code using AI.
I was trying to build a similar project to ultimately discover that it already exists.
This tool is designed to make it easy for anyone to translate SQL (Structured Query Language) commands into natural language and vice versa.
SQL is a programming language used to manage and manipulate data in relational databases, and while it's a powerful tool, it can also be quite complex and difficult to understand.
On the other hand, natural language is the language that we speak and write in everyday life, and it's often the preferred way to communicate for people who are not familiar with technical jargon.
With the SQL and Natural Language Translator, you don't need to be an SQL expert to understand what's going on in your database or to write SQL queries. You can simply type in your query in natural language and get the corresponding SQL code, or vice versa.
Some of the features are:
- Dark mode.
- Lowercase/uppercase toggle.
- Copy to clipboard.
- SQL syntax highlighting.
- Schema awareness (beta).
- Query history.
You can read the installation structions and it's very simple since it uses Nextjs.
This query is for YOU. haha!
SQL Translator has 4.1k stars on GitHub and is built using TypeScript.
16. 10000+ Themes for shadcn/ui - multiple VS Code Themes for shadcn.
First of all, this went viral on launch especially because so many devs use shadcn/ui.
With this, you can explore, save, generate new ones, and even upvote random themes. One of the nice projects that you can use.
Plus the User Interface is pretty sick.
Let's see some of the neat features:
✅ Randomize theme + prev for developers who just wanna check things out.
✅ Explore themes made by the community.
✅ Copy the current code theme.
✅ Save your themes for future reference.
It's safe to say that you can build more in less :)
It's built using a lot of packages such as react-query, Framer, Zod, and of course shadcn ui.
You can check the GitHub Repository and the live demo.
It has 817 stars on GitHub and was built using TypeScript.
17. DevHub - TweetDeck for GitHub.
DevHub is a mobile and desktop app to help you manage GitHub Notifications and stay on top of repository activities. Save custom searches, apply filters, and don't miss anything important.
Some of the neat features:
✅ All columns support a common set of filters, like Bot, Label, Issue Status, Text, etc. The Issues & Pull Requests columns are special: they give you all the power of GitHub Advanced Search on your hands.
✅ Create a column for each person and see what they are up to: Commits, Comments, Issues, Pull Requests, Tags, Releases, and more.
✅ Choose between two modes: Desktop or Menubar; Enable Push Notifications only for the columns you want.
✅ The same experience on all your devices.
A useful project that is going to have first users instantly.
DevHub has 9.6k stars on GitHub and was built using TypeScript.
Whew! So many mind blowing projects on the list, haha!
You can take inspiration from these projects to build something even greater.
By the way, which project did you love the most?
Have a great day! Till next time.
You can join my community for developers and tech writers at dub.sh/opensouls.
| If you like this kind of stuff, please follow me for more :) |
  
|
|---|
Follow Copilotkit for more content like this.
