meteor / examples

Project examples with Meteor

Examples of Meteor Projects

Ready

Tic tac toe

• Demo: tic-tac-toe.meteorapp.com
• Repository: meteor/examples/tic-tac-toe
• Why: To show that we can even build multiplayer games with meteor.
• Stack: Meteor and React
• Last Updated At: Sep/06/2022
• Meteor Version: 2.7.3

Simple Tasks

• Demo: simpletasks.meteorapp.com/
• Repository: fredmaiaarantes/simpletasks
• Why: To show how to use Meteor with Chakra UI + Formik + MongoDB
• Stack: Meteor, Chakra UI, React, Formik, MongoDB
• Last Updated At: Apr/07/2021
• Meteor Version: 2.1.1

Complex Svelte Todos

• Demo: complex-todos-svelte.meteorapp.com/
• Repository: guncebektas/complex-todos-svelte
• Why: To show how to use Meteor in real world problems.
• Stack: Meteor, Svelte, Bootstrap, MongoDB, Cypress
• Last Updated At: Aug/21/2021

Chakra UI

• Demo: chakraui.meteorapp.com
• Repository: meteor/examples/chakra-ui
• Why: To show how to set up Chakra UI + Icons + Dark Mode with Meteor
• Stack: Chakra UI, Meteor and React
• Last Updated At: Dec/02/2023
• Meteor Version: 3.0-alpha

Tailwindcss

• Demo: tailwindcss.meteorapp.com
• Repository: meteor/examples/tailwindcss
• Why: To show how to set up tailwindcss with Meteor
• Stack: Tailwindcss, Meteor and React
• Last Updated At: Nov/10/2022
• Meteor Version: 2.8

Wantch: Manage Movies to Watch

• Demo: wantch.meteorapp.com
• Repository: filipenevola/wantch
• Why: To show how simple is to create an app using Meteor Methods and React
• Stack: Meteor, React and PWA
• Last Updated At: Feb/25/2021
• Meteor Version: 2.1

Double app

• Demo: double-app.meteorapp.com
• Repository: denihs/double-app
• Why: To show how to have two apps with different purposes, but sharing the same codebase.
• Stack: Meteor and React
• Last Updated At: Mar/19/2021
• Meteor Version: 2.1

Leaderboards

• Demo: N/A
• Repository meteor/leaderboards
• Why: Complete example of a small Blaze app with only client code that can update the DB.
• Stack: Meteor and Blaze
• Last Updated At: Jul/25/2021
• Meteor Version: 2.13.3

NFT Marketplace

• Demo: https://meteor-nft-marketplace.meteorapp.com (Instructions on how to use it are in the README.md of the project)
• Repository: meteor/examples/nft-marketplace
• Why: To show how to integrate web3 with Meteor
• Stack: Meteor, React, TailwindCSS, Polygon, Solidity, Hardhat, Ethers.js, and IPFS
• Last Updated At: June/1/2022
• Meteor Version: 2.7.2

Simple photo

• Demo: https://simple-photo.meteorapp.com/
• Repository meteor/mobile-packages
• Why: A simple example of mdg:camera package that allows you to take pictures from your web/phone camera.
• Stack: Meteor and Blaze
• Last Updated At: Dec/04/2023
• Meteor Version: 2.14-beta.4

Simple map

• Demo: https://simple-map.meteorapp.com/
• Repository meteor/mobile-packages
• Why: A simple example of using the mdg:geolocation package to get current geolocation and show them on maps.
• Stack: Meteor and Blaze
• Last Updated At: Dec/04/2023
• Meteor Version: 2.13.3

WIP

Parties

• Demo: N/A
• Repository: meteor/examples/parties
• Why: One of the original Meteor examples showcasing how to build a nice working application with Blaze with very little code, while taking advantage of optimistic updates.
• Stack: Meteor, Blaze
• Last Updated At: August/23/2021
• Meteor Version: 2.3.5

Native app with Cordova

• Demo: N/A
• Repository: meteor/examples/cordova
• Why: To show how to set up a proper Native app with Meteor and Cordova
• Stack: Meteor and Cordova
• Last Updated At: May/22/2020
• Meteor Version: 1.10.3

How to add your example?

• Create a PR including it in this README
• Make sure you are using the latest Meteor
• Required fields: Repository, Why, Stack, Last Updated At and Meteor Version.

Housekeeping

We want to list only up-to-date examples here.

If you see old examples that are no longer representing the current state of Meteor or that are not working please open a PR removing it from here.

examples's Issues

tailwindcss example crashes when upgrading to tailwind 3.x

Hello and thankyou for the example: https://github.com/meteor/examples/tree/main/tailwindcss

It works perfectly well, however when I run the instructions to repeat this, I get

"tailwindcss": "^3.2.4"

Which throws the following error:

Errors prevented startup:

While minifying app stylesheet:
app/client/main.css: PostCSS received undefined instead of CSS string

Your application has errors. Waiting for file change.

However, if i use:

  "dependencies": {
    "@babel/runtime": "^7.17.9",
    "autoprefixer": "^10.4.13",
    "jquery": "^3.6.0",
    "meteor-node-stubs": "^1.2.1",
    "postcss": "^8.4.18",
    "postcss-load-config": "^3.0.1",
    "tailwindcss": "^2.0.3"
  },

Then everything is is ok.
Are you able to share what combination of packages and versions will work with tailwindcss 3.x?

Thanks

in tailwindcss example, remove css minifier

this step should be included before installing postcss

meteor remove standard-minifier-css

How to use tailwind with Svelte

Thanks for putting these examples up, they are a great starting point.

However, I have started to get excited again about meteor now that I see it has support for Svelte, but no tailwind is a deal-breaker for me.

Can you add an example of Svelte with Tailwind? Even a Hello World be great, just so I have a starter project, or perhaps advise if it's not possible yet to use a combination of Meteor, Svelte and Tailwind.

Thanks again.

Now,tauri is popular,if meteor can has a to do app with tauri,like react,blaze,vue?

Examples not working

Hello,
when i try to open https://tic-tac-toe.meteorapp.com/
it says

503 Service Unavailable: No endpoints to handle the request. If you're the owner of this app, see this article for more information: http://bit.ly/2uCFzOo (7)

in tailwindcss example, purge in tailwind.config.js should be filled

since it is example of how using tailwindcss, I think it is better to include

purge: ['./imports/ui/**/*.{js,jsx,ts,tsx}', './public/*.html']

instead of

purge: []

imho, just to be as real-world as possible.