Firebase + Progressive Web App Ideas Needed πŸ”₯πŸ“±

twitter logo github logo Updated on ・1 min read

Hello there, DEV community! πŸ‘‹πŸ»

I'm currently appointed as a volunteer mentor for teaching a small workshop community on creating basic progressive web apps using Firebase. The given target is for three weeks, a team of two or three people can make their own progressive web apps. Most of the attendees are quite new to the web universe, so nothing complex and still on a basic level. I've shared with them about JavaScript ES6 in a nutshell, how to use Parcel bundler, and using several Firebase features. Was hoping to give them about React or Vue, but probably only for those who already understand JS further.

Update: the meetup is once per week on Saturday from 9am to 1pm, so there's not much to talk about. So the rest of the week is communicating via a WhatsApp group.

Any ideas on what should they make? Thanks in advance. πŸ˜„

twitter logo DISCUSS (29)
markdown guide
 

I think one of the coolest applications of PWA + Real-time are social party games. Either come up with a new game or implement an existing game in a different way.

Low barrier to start + lots of interactivity.

 

Call me old fashioned, but I never know any kind of social party games. Any examples or existing projects? πŸ˜…

 

You can use like who's the wolf game. Its pretty simple just guessing the who is the wolf among others. I think you from Indonesia so you know Hago right? The wolf game section.

Yes, we're in the same country, but I have zero knowledge about Hago or any mobile games. Never interested in playing mobile games, but yeah, I'll ask around how Hago works. Thanks for the feedback! πŸ˜„

yeah πŸ˜„ buat aja sebuah puzzle yg bisa dimainkan bersama om. entah itu tanya jawab atau apa.

Ada referensi kah? Mungkin di GitHub atau artikel? Nanti aku sesuaikan buat peserta nya. πŸ˜…

 

if you wanted to throw an algorithm portion, have the host browser generate a maze and then have all the clients race through it

I'll try researching first. Any references or existing repositories on maze generation?

 

I like playing board games, and making score-keeping apps for my favorite games is my standard "Hello World" for learning new things. They are great because you can keep them very simple or make them really complex, and there's lots to learn along the way. Not to mention, it's more exciting than a to do list, because you might actually keep using it later 😊

For simpler apps, you can go with little more than a list of players and button to increment/decrement their score. You can start to play around managing state with multiple buttons to increment/decrement different values (+1, +5, +10, etc) and make those values configurable.

Adding a bit of complexity, you can introduce OOP structure with making base classes for generic "games", then extending that with addition functionality for specific game types or scoring systems.

Going even further, you can set up the users/games/etc in a database and introduce the fundamentals of SQL. Many-to-many relationship of games to players, etc.

Using firebase, you can actually make these score keeping apps all synced up so that each player can always view the scores of the game at any time! Just make sure proper permissions are in place to prevent cheating 😜

 

I guess creating minigames are better than todo apps, definitely considering that. Do you have any resources or existing projects that I can share to them? Would love to check it out.

Thanks for the feedback! πŸ˜„

 

You're really making me dig up my Github Graveyard here!

This one was my first Android app, and my first non-trivial programming thing ever. I had absolutely no idea what I was doing at this point.

cjbrooks12 / scorekeeper

Android Application

scorekeeper

Android Application


I recently did the same thing in Kotlin/Android, playing around with a variety of Android design patterns and new helpful libraries, such as Android Jetpack, event-driven programming, and Firebase.

cjbrooks12 / KotlinScoreKeeper

Remaking the ScoreKeeper app in Kotlin


On the web side of things, I made this one when Angular 2 just came out. I haven't touched Angular since then, so I have no idea how "good" of an Angular example this is.

cjbrooks12 / Angular-2-Scorekeeper

An introduction to Angular 2 by building an app to keep score for board games.

Angular-2-Scorekeeper

An introduction to Angular 2 by building an app to keep score for board games.


Most recently, I threw together one in Vue.js

The full repo is below, which is the source for my personal website. It's made using Orchid, a static site framework I've been building, and was mostly me playing around adding scripts dynamically. Also, the master branch is the current site, and src is a new theme on it, and the Vue.js example is only on the src branch.

cjbrooks12 / caseyjbrooks

Sources for my personal website

caseyjbrooks

Sources for my personal website


Sorry for the hassle, and thanks for the resource! πŸ˜…

 

I was thinking if you could ask each group what kind of problem they face and how they can create a PWA to solve/automate that problem.

Should there be only one project, the community can discuss/vote on what to create πŸ˜‰

 

Creating based on problems, noted. Thanks for the feedback! πŸ˜„

 
[deleted]
[deleted]
 

The best kind of roadmap I would want for an event like this would teach, callbacks, promises, async/await. And then move on to some sort of site bundler like parcel, of course with the library of your choice. Make the basic Twitter, have post and likes and profiles and pages for each user, and lastly teach them how routing and query params are passed around.

 
 

Creating a blog? Was my first project on web dev, would have done it again if possible, great to go through a lot of concepts (Firebase auth, store, ...), and very cool if you have students that are in advance, you can always find ways to improve their projects.

 

You can ask them to use any of the free public APIs from here. Let them select the subject they find interesting.

I built a news headlines app to learn PWA concepts using News API. They can use it as inspiration or contribute to it - Headlines App.

Good luck!

 

Interesting idea! Probably going to recommend them to use Hacker News API and create their own reader. Thanks for the feedback! πŸ˜„

 

I think a Real-time chat application works well to describe firebase's basic core tools. It also has a starter kit from google too.

 

Yes, I have shared the starter kits to them. And we've already made a basic real-time chat for demonstration. Thanks for the feedback! πŸ˜„

 

Welcome buddy! Also, I just thought about this too; How about a Multiplayer Break-out game using HTML5 Canvas API. It's easy to make, fun to play and has lots of resources.

Never thought about creating games using web technologies. Probably considering that. Probably, though. πŸ˜…

 

Nice that you are mentoring!

For beginners I you can start with a simple TODO app and you can always add more features like task properties, due date, reminders, etc, or some other kind of CRUD app.

 
 
 

Never heard of that, I'll try looking it up. Thanks for the feedback! πŸ˜„

Classic DEV Post from May 10

What do you wish you knew about Developer Relations?

A conversation... what do DevRel professionals wish devs knew about their job? And what do devs wish they knew about DevRel?

Griko Nibras profile image
Love working on web technologies like Laravel, Node, and React frameworks, especially Gatsby and Next.

DEV has become a critical resource for healthy software careers.

Create Your Account

100% free forever