SaaSHub helps you find the best software and product alternatives Learn more →
Top 23 TypeScript HacktoberFest Projects
-
-
Material UI
Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
Nest
A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript 🚀
-
Grafana
The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
-
Strapi
🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable and developer-first.
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
-
-
-
-
-
-
-
-
TypeORM
ORM for TypeScript and JavaScript. Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.
-
novu
GitOps based Notification Infrastructure as Code. Embeddable Notification Center, E-mail, Push and Slack Integrations.
-
appsmith
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
-
-
-
-
Mattermost
Mattermost is an open source platform for secure collaboration across the entire software development lifecycle..
-
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
👉️ Link Github: https://github.com/freeCodeCamp/freeCodeCamp
The first tool we’ll look at is Pigment CSS, a zero-runtime CSS-in-JS library built to extract the co-located styles into separate CSS files during the build phase and eliminate the need for runtime style processing.
Just before I went to sleep last Sunday I thought it would be fun to create an app for my friends and I where we can rate the Eurovision Song Contest participants live together. The idea was to have everyones votes being tallied up live as we make adjustments to the ratings. This led me into looking at Replicache as the solution. I've been interested in trying it out for a while now and this was the perfect project for it. I quickly threw together a sketch on Excalidraw so I would have something to go on for tomorrow.
Project mention: NestJS Developers: Upgrade Your Logging with This Simple Guide | dev.to | 2024-05-18NestJS is a powerful, progressive Node.js framework for building efficient and scalable server-side applications. It is written in TypeScript and is heavily inspired by Angular. It comes with a modular architecture and in-built support for a plethora of back-end features straight out of the box. One important part of developing applications with NestJS, or with any other back-end framework, is logging.
Kubernetes Documentation: https://kubernetes.io/docs/home/ Kubernetes Tutorials: https://kubernetes.io/docs/tutorials/ Kubernetes Community: https://kubernetes.io/community/ Prometheus: https://prometheus.io/ Grafana: https://grafana.com/ Elasticsearch: https://www.elastic.co/elasticsearch/ Kibana: https://www.elastic.co/kibana Helm: https://helm.sh/ Prometheus Helm Chart: https://github.com/prometheus-community/helm-charts/tree/main/prometheus Grafana Helm Chart: https://github.com/grafana/helm-charts/tree/main/grafana Elasticsearch Helm Chart: https://github.com/elastic/helm-charts/tree/main/elasticsearch Kibana Helm Chart: https://github.com/elastic/helm-charts/tree/main/kibana RBAC: https://kubernetes.io/docs/reference/access-authn-authz/rbac/ Network Policies: https://kubernetes.io/docs/concepts/services-networking/network-policies/ StatefulSets: https://kubernetes.io/docs/concepts/workloads/controllers/statefulset/ DaemonSets: https://kubernetes.io/docs/concepts/workloads/controllers/daemonset/ Taints and Tolerations: https://kubernetes.io/docs/concepts/scheduling-eviction/taint-and-toleration/ Custom Resource Definitions (CRDs): https://kubernetes.io/docs/concepts/extend-kubernetes/api-extension/custom-resources/ Operators: https://kubernetes.io/docs/concepts/extend-kubernetes/operator/
Strapi is a Headless CMS built with TypeScript. It has a backend and a frontend. Just take a look at how many configuration files it has just for running the project.
Project mention: Bypass CORS errors while testing your APIs using Hoppscotch 🔧 | dev.to | 2024-04-17How can Hoppscotch help you intercept the API calls? 👽
Docusaurus is a popular open-source documentation tool primarily designed for product documentation and other technical documentation needs. It was first released in 2017 by Facebook Open Source (now Meta Open Source). Just recently, Docsaurus version 3.0 was released.
Today we are looking at Error Handling when building websites with Nuxt and Storyblok as CMS. If you haven't tried the two tools, go check out one of the awesome tutorials. It's a perfect match for all your projects.
Prior to React 18, it used to include an implicit children prop, making it suitable for components expected to have children. For a long time, though, the implicit children prop type has been removed according to React 18's type changes.
For large-scale applications with frequently changing state, dedicated state management libraries like Redux, MobX, Zustand, etc. are generally better choices. These libraries offer efficient ways to handle state updates and minimize unnecessary re-renders.
Project mention: How I use Appwrite Databases with Pinia to build my own habit tracker | dev.to | 2024-04-14If you haven't tried Appwrite, make sure you give it a spin. It's a open source backend that packs authentication, databases, storage, serverless functions, and all kinds of utilities in a neat API. Appwrite can be self-hosted, or you can use Appwrite Cloud starting with a generous free plan.
Working with dates and times is an essential part of web development. Whether you're building a blog, an e-commerce site, or a personal project, handling and formatting dates correctly can greatly enhance user experience. In this blog, we'll explore date formatting using three different methods: Carbon (PHP), date-fns (JavaScript), and Vanilla JS Date. We'll provide examples for each to help you understand how to format dates in various contexts.
If you use Sequalize, TypeORM or for MongoDB, we have Mongoose these types of ORM tools, then you are safe by default because these help us against the SQL query injection attacks by default.
import { Body, Column, Container, Head, Heading, Hr, Html, Link, Preview, Section, Text, Row, } from "@react-email/components"; import * as React from "react"; const EmailTemplate = () => ( Hello WorldPreview> Hello WorldHeading> Column> Row> Section> Hey Emil,Text> CoolText> Section> Container> You're receiving this email because your subscribed to Newsletter App Text>
Newsletter Appstrong>, ©{" "} NovuLink> Text> Section> Body> Html> ); export default EmailTemplate; const main = { backgroundColor: "#f3f3f5", fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", }; const headerContent = { padding: "20px 30px 15px" }; const headerContentTitle = { color: "#fff", fontSize: "27px", fontWeight: "bold", lineHeight: "27px", }; const paragraph = { fontSize: "15px", lineHeight: "21px", color: "#3c3f44", }; const divider = { margin: "30px 0", }; const container = { width: "680px", maxWidth: "100%", margin: "0 auto", backgroundColor: "#ffffff", }; const footer = { width: "680px", maxWidth: "100%", margin: "32px auto 0 auto", padding: "0 30px", }; const content = { padding: "30px 30px 40px 30px", }; const header = { borderRadius: "5px 5px 0 0", display: "flex", flexDireciont: "column", backgroundColor: "#2b2d6e", }; const footerDivider = { ...divider, borderColor: "#d6d8db", }; const footerText = { fontSize: "12px", lineHeight: "15px", color: "#9199a1", margin: "0", }; const footerLink = { display: "inline-block", color: "#9199a1", textDecoration: "underline", fontSize: "12px", marginRight: "10px", marginBottom: "0", marginTop: "8px", }; const footerAddress = { margin: "4px 0", fontSize: "12px", lineHeight: "15px", color: "#9199a1", };
Project mention: A list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev | dev.to | 2024-02-05appsmith — Low code project to build admin panels, internal tools, and dashboards. Integrates with 15+ databases and any API.
Portainer
Floating UI (28.7k ⭐) — A JavaScript library that helps you create and position floating elements such as tooltips, popovers, dropdowns, and more. It also provides hooks and components for building accessible user interactions with React. Floating UI is smart, flexible, and platform-agnostic. Floating UI is the evolution of Popper 2, designed to bring the project to a new level.
Project mention: Uppy: Sleek, modular open source JavaScript file uploader | news.ycombinator.com | 2024-05-04
This feel like a corporate greed play, on what should be a relatively simple chat application. Slack has quickly become just another enterprise solution in search of shareholder value at expensive of data privacy. Regulation of these companies should be more apparent to people, but sadly, is not.
I would recommend https://mattermost.com as an alternative.
Cheerio is your ticket to the world of server-side magic, allowing you to manipulate HTML and XML documents with jQuery-like syntax. It’s perfect for web scraping, data extraction, or just making sense of the mess that is web content. With Cheerio, you get to play around with the DOM, use CSS selectors, and basically do all the cool things you'd do in the browser, but server-side.
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
TypeScript HacktoberFest related posts
-
Arquitetura Event-Driven usando AsyncAPI na prática
-
Navigation in React Native
-
Slack AI Training with Customer Data
-
6 CSS tools for more efficient and flexible CSS handling
-
How To Build Your Own Newsletter App? p.1
-
Discord has been using ML to determine the gender and age of some of its users
-
Security-Focused Slack Alternative
-
A note from our sponsor - SaaSHub
www.saashub.com | 20 May 2024
Index
What are some of the best open-source HacktoberFest projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | freeCodeCamp | 390,270 |
| 2 | Material UI | 91,834 |
| 3 | excalidraw | 74,166 |
| 4 | Nest | 64,736 |
| 5 | Grafana | 60,729 |
| 6 | Strapi | 60,740 |
| 7 | Hoppscotch | 60,546 |
| 8 | Docusaurus | 53,209 |
| 9 | nuxt | 52,238 |
| 10 | DefinitelyTyped | 47,313 |
| 11 | zustand | 43,112 |
| 12 | nocodb | 42,920 |
| 13 | Appwrite | 41,376 |
| 14 | Rocket.Chat | 39,008 |
| 15 | date-fns | 33,803 |
| 16 | TypeORM | 33,450 |
| 17 | novu | 33,044 |
| 18 | appsmith | 31,783 |
| 19 | Portainer | 29,109 |
| 20 | floating-ui | 28,720 |
| 21 | Uppy | 28,236 |
| 22 | Mattermost | 28,177 |
| 23 | cheerio | 27,845 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com