JavaScript SPA

Open-source JavaScript projects categorized as SPA

Top 17 JavaScript SPA Projects

  • prerender-spa-plugin

    Prerenders static HTML in a single-page application.

  • react-firebase-starter

    Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay

    Project mention: Alternatives to Create React App | dev.to | 2022-10-13

    Let's look at React Starter Kit, which bills itself as an isomorphic web project boilerplate. Additionally, the React Starter Kit is described as, “very opinionated” on the webpage. This implies that it has already chosen our tech stack for us, which consists of Node.js, Express and GraphQL.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • webhook.site

    ⚓️ Easily test HTTP webhooks with this handy tool that displays requests instantly.

  • neo

    The application worker driven frontend framework (by neomjs)

    Project mention: I scraped +650K frontend jobs for 14 months and here are the Most Demanded Javascript Frontend Frameworks in this 2022 (From October 1, 2021 to November 30, 2022) | reddit.com/r/javascript | 2023-01-18

    I'm hoping maybe the guy behind Neo.js and the Vue team can collab to put out an even faster framework that does more with the canvas as opposed to direct dom manipulations. As far as I can tell webGPU & wasm will reshape how things are done in the frontend and it may make sense to just render everything inside of a canvas.

  • vuejs-wordpress-theme-starter

    A WordPress theme with the guts ripped out and replaced with Vue.

    Project mention: Using Vue with a Headless Wordpress setup? | reddit.com/r/Frontend | 2022-07-03

    I'm using a modified version of https://github.com/EvanAgee/vuejs-wordpress-theme-starter as boilerplate. If anyone else had any advice for better boilerplates I'm all ears.

  • react-storefront

    React Storefront - PWA for eCommerce. 100% offline, platform agnostic, headless, Magento 2 supported. Always Open Source, Apache-2.0 license. Join us as contributor ([email protected]). (by storefront-foundation)

    Project mention: How to develop webs %100 faster | reddit.com/r/webdev | 2022-07-02

    17) https://github.com/storefront-foundation/react-storefront

  • Nullstack

    Feature-Driven Ful Stack JavaScript Components

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

  • svelte-navigator

    Simple, accessible routing for Svelte

    Project mention: Click on a tag reloads Page | reddit.com/r/sveltejs | 2022-10-09

    I went to the svelte-navigator github repo and they say that they support SSR. Now, if you use only ssr and not csr, that will reload the page on every navigation.That is because in ssr your front-end asks for entire page from server and doesn't just update components in front-end. For instance here they provide an example with ssr: https://github.com/mefechoel/svelte-navigator/tree/main/example/ssr

  • DataFormsJS

    🌟 DataFormsJS 🌟 A minimal JavaScript Framework, standalone React and Web Components, and JSX Compiler for rapid development of high quality websites and single page applications.

    Project mention: Vanilla JS real life application examples | reddit.com/r/node | 2022-04-19
  • soma-fm-player

    This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channels API endpoint to pull in a list of stations and makes it easy to switch between stations. This app also uses Three.js and the HTML5 Web Audio Context API to sample audio data and create a visualizer effect for the selected station.

  • snippets.ninja

    Code snippets manager for developers. PWA.

    Project mention: Snippets.Ninja - code snippets manager. Open source PWA. | reddit.com/r/SideProject | 2022-08-08
  • psn-social-network-public-source

    A simple social network built with React and Spring Boot

  • Tradefinder

    A web tool to find the most profitable trades between two merchants. Perfect for gamers. 🎮

  • Crack-Buzz

    A full-stack Serverless Single Page Link Sharing Application built using React, Ionic and Firebase.

  • Petite-MVC

    A small MVC framework inspired by react

    Project mention: a routing JS framework that runs directly on the frontend | reddit.com/r/programming | 2022-04-03
  • TODO

    Simple Project Manager. (by kxrn0)

    Project mention: In the face of preservation, only the last hour of the day of the candles can get what we could consider an image of the proper definition of a cuticle. | reddit.com/r/LibraryofBabel | 2022-08-23

    I think I'm done with the CSS for the start screen. I want the screens to slide like what I did with https://kxrn0.github.io/Tic-tac-toe-game/dist/ (which has a bug, that I think I can easily fix with changing a variable on load screen, but haven't bothered to fix), but I think that may be a bit difficult, since I'm using React now. I can implement the sliding the same way I did in the link above, but then the start screen would be rendered for every state transition, which doesn't sound like too much of an issue here, but if I were making a more complex app, having to rerender many screens that are out of view every time the state of the main app changes may affect performance. What I immediately thing of is this 1. create a state variable for the main app, that is true when the start screen is being shown 2. add an event listener to the start button 3. when the start button is pressed, add a class to the main screen that slides it out 4. then set a time out equal to how long it takes for the screen to slide out 5. once the time is over, change the state variable to false The start screen will be rendered conditionally based on the state of the main app. I would have to do something similar to bring back the screen. What kind of data does the main app hold? Fow now I'll test the main button to show and hide the start screen. I will pass a function from the main app to the start screen component. When the start button in the start screen component is pressed, that function will be called. In there, the data of the main app will be set, and the start screen will be hidden. how will the main app data be set there? I still have to think about it a bit more, for now I'll focus on hidding the start screen. Looks like I will need two state variables for hidding the start screen; the first will be for adding the class to hide the component, and the second will be for unmounting the component. The mounted state will only be used inside of the main app, the hidden state variable will be passed down to the start screen. So what happens when the user clicks the start button? the start screen component calls the function that it's passed down through props, inside of this function, a setter function is called, which sets state variables that indicate what kind of questions to query from the API. I will set up a useEffect with that data as a dependency, so everytime it's updated, new questions will be generated. For now I'll just log the data to the console. I can make API calls and I do get the required data, but I need to make it so that the start screen determines the shape of the query. For that I need to set the data in the function that hides the start screen. So I will keep variables for the values of the inputs in the state of the screen component. How do I do this? I have a set of checkboxes, and I want to keep an array in the state of the component, the array holds strings which are the values of the checkboxes that are checked, os whenever I click a checkbox, if the checkbox is checked, I will add its value to the state array, otherwise I will set the state array to the result of filtering out the string in the array whose vaule is equal to the value of the array. I need to keep track of the number of correct answers, for that I guess I'll create a state variable in the main app, then pass a function to each question component, so that every time an option is clicked, it calls that function, which updates the number of correct answers in the main app. I need a different way to keep track of the number of correct answers. At first it was just a variable that increased each time the user selected a correct answer, and decreased each tim the user selected an incorrect one. But this doesn't work, since the user can press the correct answer as many times as they want and get a very large number of correct answers. Instead, I'll need to find a better way to store the answers. Perhaps the answers variable is an array of objects, each object has the id of the question, the correct answer, and the user's answer, then when one choice is clicked, this variable is updated. When the quiz is over, I want to display the choices differently. The radio buttons will be disabled, and the correct answer will be given different styling. The incorrect answers will also be given different stylings. So how am I going to do this? There is a state variable in the main app that indicates if the user has finished the quiz or not. I can use that variable in the question components to conditionally render a class that applies the necessary styles. What about the correct answer and the user's answer? A question object that is passed to a question component has a question field tha holds the string for the question, it also has an array of strings which are the choices, and it has a string variable for the correct answer. How will I know the user's answer? I can pass down a variable to the question component to the main app, but I think a better way would be to keep a state variable in the question component. This state variable has a value of the value of the checked radio button, and only the button with this value will be checked. For this I would need the user to have answered all questions, so there should be a way in the parent component to prevent the user from finishing the quiz before all questions have been answered. I think the answers variable will serve that purpose; if answers.length < questions.length; show an error message to the user asking them to finish all the questions. So now I have all answers, and the correct answer as well, when I'm mapping the question data to create the radio buttons, if the quiz is over, and if the current choice value is equal to the value of the selected state variable; then add a class to this particular radio button, which will indicate that this one holds the correct answer. The correct one is styled correctly, how do I add a class to the wrong one? If the selected is equal to choice and selected is different from question.answer; then this is the wrong hole. I think that's it for this. As always, CSS feels a bit hacky, but I think that's how CSS is s'pposed to be. I think I would like to implement another three features before I can consider this as finished. 1. I want to force the user to enter a number of questions and select at least one category before submitting. 2. I would like to force the user to answer all questions before they can finish the quiz. 3. Finally, I'd like to add a loading screen before the questions are loaded. I know that due how I'm quering the questions sometimes I may get repeated questions, but that's a result of selecting too few categories, so for now I'll overlook that. I wanted to add the loading spinner that I used in https://github.com/kxrn0/TODO/blob/main/src/empty_period.js#L78, but it looked a bit complicated, so I decided to go for a premade one that I found online. I think I may be done with this. It looks a bit squished on mobile, and I think I need to learn more stuff, but all in all it's quite decent for my first solo React app. https://kxrn0.github.io/Quiz-App/

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.

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 2023-01-18.

JavaScript SPA related posts

Index

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

Project Stars
1 prerender-spa-plugin 7,253
2 react-firebase-starter 4,450
3 webhook.site 3,738
4 neo 2,580
5 vuejs-wordpress-theme-starter 1,551
6 react-storefront 719
7 Nullstack 700
8 svelte-navigator 426
9 DataFormsJS 159
10 soma-fm-player 123
11 snippets.ninja 75
12 psn-social-network-public-source 36
13 links 19
14 Tradefinder 11
15 Crack-Buzz 7
16 Petite-MVC 1
17 TODO 0
Build time-series-based applications quickly and at scale.
InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.
www.influxdata.com