JavaScript HacktoberFest

Open-source JavaScript projects categorized as HacktoberFest | Edit details

Top 23 JavaScript HacktoberFest Projects

  • GitHub repo material-ui

    MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.

    Project mention: How to Setup Next App, and MUI5 with Typescript | dev.to | 2022-01-16

    import * as React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import createEmotionServer from '@emotion/server/create-instance'; import theme from '../styles/theme'; import createEmotionCache from '../lib/createEmotionCache'; export default class MyDocument extends Document { render() { return ( {/* PWA primary color */} ); } } // `getInitialProps` belongs to `_document` (instead of `_app`), // it's compatible with static-site generation (SSG). MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: // 1. app.getInitialProps // 2. page.getInitialProps // 3. document.getInitialProps // 4. app.render // 5. page.render // 6. document.render // // On the server with error: // 1. document.getInitialProps // 2. app.render // 3. page.render // 4. document.render // // On the client // 1. app.getInitialProps // 2. page.getInitialProps // 3. app.render // 4. page.render const { renderPage: originalRenderPage } = ctx; // You can consider sharing the same emotion cache between all the SSR requests to speed up performance. // However, be aware that it can have global side effects. const cache = createEmotionCache(); const { extractCriticalToChunks } = createEmotionServer(cache); ctx.renderPage = () => originalRenderPage({ // eslint-disable-next-line react/display-name enhanceApp: (App: any) => (props) => , }); const initialProps = await Document.getInitialProps(ctx); // This is important. It prevents emotion to render invalid HTML. // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153 const emotionStyles = extractCriticalToChunks(initialProps.html); const emotionStyleTags = emotionStyles.styles.map((style) => ( )); return { ...initialProps, // Styles fragment is rendered after the app and page rendering finish. styles: [ ...React.Children.toArray(initialProps.styles), ...emotionStyleTags, ], }; };

    Enter fullscreen mode Exit fullscreen mode

    step 7
    we also need to wrap material UI with the app component, let copy the following lines of code to _app.ts file inside the page folder.

    import * as React from 'react';
    import Head from 'next/head';
    import { AppProps } from 'next/app';
    import { ThemeProvider } from '@mui/material/styles';
    import CssBaseline from '@mui/material/CssBaseline';
    import { CacheProvider, EmotionCache } from '@emotion/react';
    import theme from '../styles/theme';
    import createEmotionCache from '../../src/lib/createEmotionCache';
    
    // Client-side cache, shared for the whole session of the user in the browser.
    const clientSideEmotionCache = createEmotionCache();
    
    interface MyAppProps extends AppProps {
      emotionCache?: EmotionCache;
    }
    
    const App = (props: MyAppProps) => {
      const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
      return (
        
          
            My page
            
          
          
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            
            
          
        
      );
    };
    
    export default App;
    
    
    Enter fullscreen mode Exit fullscreen mode

  • GitHub repo Chart.js

    Simple HTML5 Charts using the <canvas> tag

    Project mention: Interactive websites with graphs that get updated when filters are triggered. | reddit.com/r/learnjavascript | 2022-01-18

    Have a look at Chart.js and specifically the git repo in terms of how to use data and interact with the canvas API.

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • GitHub repo Meteor JS

    Meteor, the JavaScript App Platform

    Project mention: Memory leaks: the forgotten side of web performance | reddit.com/r/programming | 2022-01-05

    Because a closure retains a reference to originalThing, the existence of the replacement thing's closure means that the originalThing reference remains alive - and so every new thing adds to the chain of references, and no previous things can be collected. This is a contrived example, but it's based off of an actual Meteor bug.

  • GitHub repo Strapi

    🚀 Open source Node.js Headless CMS to easily build customisable APIs

    Project mention: Using GitHub as a CMS | dev.to | 2022-01-19

    I found most people were happy to recommend other headless CMS services like Strapi, Sanity, GraphCMS, etc which did seem to do the job I wanted of providing a platform for me to curate & manage my content without having to redeploy. But most of them had the same issues that I didn't like.

  • GitHub repo Web-Dev-For-Beginners

    24 Lessons, 12 Weeks, Get Started as a Web Developer

    Project mention: Top Github repo trends in 2021 | dev.to | 2022-01-12

    three educational courses- Web Dev, ML, and IoT for beginners. Note re using educational resources as a strategy for marketing , at least the ML course links to various Azure services. Google does this a bunch as well, with Collab notebooks often being used to demo educational materials.

  • GitHub repo Ghost

    Turn your audience into a business. Publishing, memberships, subscriptions and newsletters.

    Project mention: CMS for HTML CSS blog site | reddit.com/r/webdev | 2022-01-19

    Ok, so you have many options for that. 1. Contentful 2. Sanity 3. Hugo 4. Strapi 5. Ghost etc.

  • GitHub repo github-readme-stats

    :zap: Dynamically generated stats for your github readmes

    Project mention: How many github projects should i have before applying for and entry level jobs as a Software developer? | reddit.com/r/RSA | 2022-01-09

    Use this to make your profile look better at glance(for HR specifically, if they decide to look at your profile)

  • SonarLint

    Deliver Cleaner and Safer Code - Right in Your IDE of Choice!. SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.

  • GitHub repo hackathon-starter

    A boilerplate for Node.js web applications

    Project mention: Hackathon Starter: A boilerplate for Node.js web applications | news.ycombinator.com | 2022-01-12
  • GitHub repo Rocket.Chat

    The communications platform that puts data protection first.

    Project mention: Ask HN: Safest place for young kids to chat to friends online? | news.ycombinator.com | 2022-01-11

    At one point I seriously considered self-hosting a Rocket Chat [1] instance for very similar reasons. It seems to have a good balance of features, moderation controls, and polish while still being pretty straight-forward to host.

    The main challenge I ran into was, of course, convincing folks to use it (instead of the "easier" forms of communication that they already had....).

    1. https://rocket.chat/

  • GitHub repo react

    Cheatsheets for experienced React developers getting started with TypeScript (by typescript-cheatsheets)

    Project mention: What is TypeScript? | dev.to | 2022-01-07
  • GitHub repo date-fns

    ⏳ Modern JavaScript date utility library ⌛️

    Project mention: How to build a slack birthday bot | dev.to | 2022-01-20

    date-fns

  • GitHub repo webtorrent

    ⚡️ Streaming torrent client for the web

    Project mention: Pure Node.js Torrent Library and CLI | news.ycombinator.com | 2022-01-18
  • GitHub repo Modernizr

    Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

    Project mention: My Current HTML Boilerplate | news.ycombinator.com | 2021-04-27

    Website is unmaintained, check the Github repo for the lastest version.

    https://github.com/Modernizr/Modernizr

  • GitHub repo jsPDF

    Client-side JavaScript PDF generation for everyone.

    Project mention: I need to be able to save some HTML+CSS content as a PDF. Currently opening a new tab with only that content, then using the Print to PDF option, which works fine, but I want to offer a more native "Save as PDF" option. Any recommendations that don't cost an arm and leg? | reddit.com/r/Frontend | 2021-12-12
  • GitHub repo Nodemon.io

    Monitor for any changes in your node.js application and automatically restart the server - perfect for development

    Project mention: Configuring nodemon with TypeScript | dev.to | 2022-01-17

    nodemon is a CLI for Node.js that makes JavaScript development much quicker by restarting an execution process when a file is updated. For example, if you have a project with an index.js file that you want to quickly test and iterate on, you can run nodemon index.js, and a new Node.js execution process will begin for index.js, restarting whenever a file in the project is updated. Simple, right?

  • GitHub repo Ember.js

    Ember.js - A JavaScript framework for creating ambitious web applications

    Project mention: crates.io requires js | reddit.com/r/rust | 2022-01-07

    Crates.io is currently written using Ember.js and, if I remember correctly, the plan was to incorporate Ember FastBoot.

  • GitHub repo swagger-ui

    Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.

    Project mention: What is OpenAPI? | dev.to | 2022-01-18

    Swagger UI

  • GitHub repo Portainer

    Making Docker and Kubernetes management easy.

    Project mention: My docker build image deployed from Github Packages on portainer runs but fails to connect to the database | reddit.com/r/portainer | 2022-01-16

    Putting all this together (especially upgrading Portainer) should help you along the way. I would also suggest looking at the GitOps functionality we added in the newer versions of Portainer, but be aware there are some caveats at present especially around relative paths in volumes.

  • GitHub repo ava

    Node.js test runner that lets you develop with confidence 🚀

    Project mention: Chaijs.com just let their domain expire | news.ycombinator.com | 2021-12-17

    I really enjoy Ava [1] or anything assert-tape-like [2]. "uvu" [3] is getting a lot of love lately, but it's very feature limited and much of it's touted advantages are at the detriment to feature set.

    [1] https://github.com/avajs/ava

    [2] https://github.com/substack/tape

    [3] https://github.com/lukeed/uvu

    Jest is great for front-end (or full stack integration) testing, but I feel it's specialized for that use-case and doesn't always play nice with backend/middle-tier testing needs.

  • GitHub repo JHipster

    JHipster is a development platform to quickly generate, develop, & deploy modern web applications & microservice architectures.

    Project mention: Is it still worth it to learn how to code a backend in Java with frameworks if it's faster to use a backend generator? | reddit.com/r/learnjava | 2021-12-28

    How about jhipster? https://www.jhipster.tech/ This one is based on Java Spring Boot, and it claims to be a faster way to build apps.

  • GitHub repo parse-server

    API server module for Node/Express

    Project mention: Any general purpose visualisation "just add the data" framework | reddit.com/r/Frontend | 2022-01-03

    There's numerous standard backends which frontenders could use in simplistic cases to start, say https://github.com/PostgREST/postgrest or https://github.com/parse-community/parse-server

  • GitHub repo validator.js

    String validation

    Project mention: Schema based validation using express-validator in Node.js | dev.to | 2022-01-09

    express-validator is a set of express.js middlewares that wraps validator.js validator and sanitizer functions.

  • GitHub repo remote-jobs

    A list of semi to fully remote-friendly companies (jobs) in tech.

    Project mention: Any jobs going? | reddit.com/r/dundee | 2022-01-15

    I work for Automattic. I also run a remote job type site: https://remoteintech.company

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). The latest post mention was on 2022-01-20.

JavaScript HacktoberFest related posts

Index

What are some of the best open-source HacktoberFest projects in JavaScript? This list will help you:

Project Stars
1 material-ui 74,492
2 Chart.js 55,900
3 Meteor JS 42,768
4 Strapi 42,497
5 Web-Dev-For-Beginners 40,040
6 Ghost 39,435
7 github-readme-stats 36,227
8 hackathon-starter 32,523
9 Rocket.Chat 31,379
10 react 30,920
11 date-fns 26,939
12 webtorrent 25,776
13 Modernizr 25,132
14 jsPDF 23,576
15 Nodemon.io 23,493
16 Ember.js 22,123
17 swagger-ui 21,405
18 Portainer 20,682
19 ava 19,547
20 JHipster 19,233
21 parse-server 19,204
22 validator.js 19,004
23 remote-jobs 17,944
Find remote jobs at our new job board 99remotejobs.com. There are 29 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
OPS - Build and Run Open Source Unikernels
Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.
github.com/nanovms