DEV Community

Cover image for πŸŽ‰ 17 Javascript repositories to become the best developer in the world 🌍
Eric Allam for Trigger.dev

Posted on • Originally published at trigger.dev

πŸŽ‰ 17 Javascript repositories to become the best developer in the world 🌍

Become a better developer

I've curated a list of 17 GitHub repositories you should know as a JavaScript developer. πŸŽ‰

These repositories span various parts of software and web development.

Feel free to explore their GitHub repositories, contribute to your favorites, and support them by starring the repositories.

Im in


1. Trigger.dev πŸ‘‘

βœ… Create and manage long-running jobs within your applications.

Trigger.dev

Trigger.dev is an open-source library that enables you to create and monitor long-running tasks in serverless environments. You can use Trigger.dev in frameworks like Next.js, Remix, Astro, Nest.js, Nuxt, and many others.

It also offers three communication methods: webhook, schedule, and event.

  • Schedule is ideal for recurring tasks.
  • Event triggers a job upon receiving a payload.
  • Webhook triggers jobs when specific events occur.

The best part is that Trigger.dev allows you to integrate various services and perform specific events or automation when these events occur.

Events

Give Trigger.dev a ⭐️ on GitHub


2. Chart.js

βœ…Β Create dynamic JavaScript charts easily.

ChatJS

Chart.js is a popular JavaScript library for creating interactive and visually appealing charts and graphs. With Chart.js, you can create various charts, including line charts, bar charts, radar charts, doughnut charts, and more.

It is highly customizable and responsive and provides a simple API to create interactive and animated charts.

Give Chart.js a ⭐️ on GitHub


3. React Flow

βœ… Add feature-rich, interactive diagrams to your React applications.

ReactFlow

React Flow is a JavaScript library for building interactive node-based graphs and diagrams in React applications.

It provides a set of React components that enables you to create visual representations of workflows, mind maps, process diagrams, and other graph-based structures.

Its features include:

  • Drag and drop nodes around the screen.
  • Highly customizable to support custom node and edge types.
  • Built-in plugins and components to handle various actions effectively.

Give React Flow a ⭐️ on GitHub


4. Monaco Editor for React

βœ… Fully featured browser-based code editor.

Monaco Editor

Monaco EditorΒ is an open-source code editor built from VS Code. It is fast, lightweight, and can be used as a standalone web-based code editor or integrated into other applications.

TheΒ Monaco Editor for ReactΒ allows you to add a fully responsive and customizable code editor to your web applications. It provides intelligent features such as syntax highlighting, autocompletion, error checking, etc.

Give Monaco Editor for React a ⭐️ on GitHub


5. Novu

βœ… Manage all your notifications from one place.

Novu

Novu is the first open-source notification infrastructure for developers. It allows you to manage and monitor all forms of communication, such as Email, SMS, Direct, and Push, from a single dashboard.

With Novu, you connect to various communication providers and create templates and rules that control your notifications.

Its features include:

  • Unified API for notificaitons across multiple programming languages.
  • Prebuilt in-app notification components.
  • Integration with various communication providers.

Give Novu a ⭐️ on GitHub


6. NX

βœ… Smart, fast, and extensible build system for your projects.

Nx

NX is a next-generation build system that keeps your CI fast and makes your workspace easy to maintain. NX scales your project using modern techniques, such as distributed task execution and computation caching.

Its features include:

  • Monorepo architecture
  • Remote caching
  • Automated and dynamic distribution of tasks across multiple machines.
  • Fast CI and smart to never rebuild the same code twice.

Give NX a ⭐️ on GitHub


7. ClickVote

βœ… Seamlessly integrate like, upvote, and review components to your application.

Clickvote

Clickvote is an open-source library for adding like and upvote components easily to any website, SPA, or no-code tool. It simplifies the process of creating reaction components without writing any complex code.

Its features include:

  • Pre-built components for likes, ratings, stars, and feedback.
  • Supports various frameworks, including React, Vue, Svelte, HTML, etc.
  • Instant analytics about users.

Give ClickVote a ⭐️ on GitHub


8. Mantine

βœ… Stunning UI components for your React applications.

Mantine

Mantine is a popular open-source React component library for building modern web applications. It provides a set of accessible and customizable components that enable you to create responsive and stunning user interfaces.

Its features include:

  • Highly customizable components for building modern applications.
  • Built-in hooks to simplify common frontend tasks.
  • Dark mode and TypeScript support.

Give Mantine a ⭐️ on GitHub


9. Styled Components

βœ… Write CSS code within JavaScript.

Styled Components

Styled Components is a popular library for styling your React applications. It allows you to write CSS code within JavaScript by creating custom components with scoped styles.

In Styled Components, styles are contained within the components, ensuring a clear and maintainable code structure.

Its features include:

  • Painless maintenance and debugging.
  • Component-based styling
  • No class name bugs

Give Styled Components a ⭐️ on GitHub


10. Supabase

βœ… The open-source Firebase Alternative.

Supabase

Supabase is an open-source Firebase alternative that enables you to add authentication, file storage, Postgres, and real-time database to your software applications.

With Supabase, you can build secured and scalable applications in a few minutes.

Its features include:

  • Real-time data synchronization.
  • Serverless functions and interaction via RESTful API.
  • Provides authentication, security, and scalability for your applications.

Give Supabase a ⭐️ on GitHub


11. TanStack Query

βœ… Asynchronous state management for TS/JS, React, Solid, Vue, and Svelte.

TanStack

TanStack Query is a powerful data-fetching and state management library that simplifies the process of fetching, caching, synchronizing, and updating data within your software applications.

With TanStack Query, you can manage memory and garbage collection of server state, update data in the background, cache data, and many more.

Its features include:

  • Automatic caching
  • Pagination and infinite loading
  • Powerful developer tools for inspecting queries.
  • Support for TS/JS, React, Solid, Vue and Svelte

Give TanStack Query a ⭐️ on GitHub


12. Axios

βœ… A simple way to perform HTTP requests.

Axios

Axios is a popular JavaScript library for making HTTP requests in web browsers and Node.js environments.

It provides a simple and consistent way to handle asynchronous HTTP tasks, simplifying the process of sending and receiving data from web services and APIs.

Its features include:

  • Built on top of the Promise API.
  • Automatic JSON data transformation.
  • Browser and Node.js support.
  • Interceptors

Give Axios a ⭐️ on GitHub


13. Swiper

βœ… Create modern carousels and touch sliders.

Swiper

Swiper is a modern and mobile-friendly JavaScript library for building touch-enabled carousels and sliders in web applications.

It provides a simple, powerful, and customizable API for creating responsive and interactive slideshows, image galleries, and content carousels that work smoothly on desktop and mobile devices.

Its features include:

  • Fully responsive to all screen sizes.
  • Supports touch and drag events
  • Rich transition effects.

Give Swiper a ⭐️ on GitHub


14. Chance

βœ… Random generator helper for JavaScript.

Chance

Chance is an open-source software that enables you to generate random data for various purposes, such as testing, simulations, and data visualization.

It can generate random numbers, strings, names, phone numbers, addresses, emails, etc. You can use it to simulate different scenarios, mock data, and test your application's ability to handle diverse input.

Give Chance a ⭐️ on GitHub


15. Day.js

βœ… Best alternative to Moment.js.

DayJS

Day.js is a minimalistic JavaScript library for handling various date and time operations.

If you use Moment.js, you already know how to use Day.js. Unlike Moment.js, Day.js is lightweight (2KB), making it a popular choice among developers.

Its features include:

  • Ensuring data consistency by using immutable objects.
  • Chainable API that simplifies complex date manipulations and enhances code readability.
  • Highly customizable and extensible with plugins.

MomentJS is not maintainable anymore, it's super important to move to Dayjs

Give Day.js a ⭐️ on GitHub


16. FullCalendar

βœ… Fully interactive calendar for your JavaScript applications.

FullCalendar

FullCalendar is a popular JavaScript library for creating interactive and customizable calendar interfaces in web applications.

It provides a robust set of features for displaying events. It supports multiple calendar views, including month, week, day, and agenda views, making it suitable for building applications involving time-based data.

Its features include:

  • Provides multiple views
  • Highly customizable and interactive.
  • Click event handling and drag-and-drop support.

Give Full Calendar a ⭐️ on GitHub


17. Zod

βœ… Schema validation library

Zod

Zod is a TypeScript-first schema declaration and validation library. It enables you to define the data structure and schemas for any data type, including primitive data types, arrays, and objects, in a concise and type-safe manner.

With Zod, you can create complex data models, validate input data, and ensure type safety in your applications.

Give Zod a ⭐️ on GitHub


If you have any awesome suggestions that weren't covered in the article, don't hesitate to share them in the comment section below.

As an open-source developer, you're invited to join ourΒ communityΒ to contribute and engage with maintainers. Don't hesitate to visit ourΒ GitHub repositoryΒ to contribute and create issues related to Trigger.dev.

Thank you for reading!πŸŽ‰

Top comments (23)

Collapse
 
bogomil profile image
Bogomil Shopov - Π‘ΠΎΠ³ΠΎ • Edited

How will this make you the "best" developer in the world? :)

Collapse
 
jankapunkt profile image
Jan KΓΌster

Why does it have 300+ emotions? I mean does it add any value to the reader besides being another Top-X List?

Collapse
 
bogomil profile image
Bogomil Shopov - Π‘ΠΎΠ³ΠΎ

It's a marketing trick. Most people believe if there are emojis, they will get more reads. I believe it they focus on the value instead the effect will be much more significant.

Collapse
 
nevodavid profile image
Nevo David

I think those are good libraries!
They might not make you the best one, but can make you a better one :)

Collapse
 
preciousxploit profile image
Precious-Xploit

They're probably hoping for you to make use of whatever info accumulated in those repo. πŸ€·πŸ½β€β™€οΈ

Collapse
 
best_codes profile image
Best Codes

My question exactly. I think it is clickbait.

Collapse
 
nevodavid profile image
Nevo David

Fetch is nice.
But Axios is not meant only for requests. It's an entire framework for HTTP.
It has things like interceptors and transformers.

You would need to build your own with fetch.

Collapse
 
nevodavid profile image
Nevo David
Collapse
 
ingosteinke profile image
Ingo Steinke, web developer

Yes, I know. Connection abort etc. is not handled natively by fetch.
I should have updated this comment with the one I did under the axios post.

Thread Thread
 
webjose profile image
JosΓ© Pablo RamΓ­rez Vargas

fetch() can in fact be cancelled by using a signal from an AbortController object.

Collapse
 
nombrekeff profile image
Keff

Hmm, so, no, this will not make you the best developer of course, not even better at coding. But they are all decent projects.

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer
Collapse
 
webjose profile image
JosΓ© Pablo RamΓ­rez Vargas

I'm a fecth() guy. Axios was cool when fetch() wasn't around. Now even Node has it.

Collapse
 
jodoesgit profile image
Jo

Cheesy moment, in that I assumed you were a time traveler:

Image screenshot of the post stating Oct 24

As I am still new to this site, and assumed what I was reading was M:YY. Hot damn, that broke my brain. I've got this post floating somewhere in the abyss and while I don't know if it'd be a great resource for me as it stands, it's good to know what's out there. Thank you!

Collapse
 
ngfizzy profile image
Olufisayo Bamidele

Awesome collection. The first one on the list grabbed my attention.

Collapse
 
webjose profile image
JosΓ© Pablo RamΓ­rez Vargas

Went to their Impress repository. Opened lib folder, then application.js. First thing I see: require(). Immediately closed it.

It is time we let require() go. It is all ESM now.

Collapse
 
bekatomas profile image
Beka Tomashvili

Title should be "17 Javascript repositories to become a millionaire"

Collapse
 
srbhr profile image
Saurabh Rai

Our team is using Zod and Day.js dailyβ€”a life-saver.

But when it comes to JavaScript & TypeScript. People forget about Angular πŸ˜‚πŸ˜‚

Collapse
 
srbhr profile image
Saurabh Rai

Nx has a youtube channel and they post good content on there. Please check it out as well, if you wish to know more about it.

Collapse
 
flowzai profile image
Flowzai

Very helpful content, great job

Some comments may only be visible to logged-in visitors. Sign in to view all comments.