Cricket Score Display App: #1 Intro and the server

darshanbajeja

Darshan-Bajeja

Posted on March 24, 2022

Cricket Score Display App: #1 Intro and the server

A blog post after a long time!

Being Indians, me and my friends love playing cricket in our streets and colonies. I would invest 2 hours daily playing cricket with my friends in the evening. And why do I call that an investment? Because that's the only time where I do some physical stuff to keep myself fit as a developer!

Recently we as friends have decided to play tournaments. Each one of us would choose a team, select few players from that team for the tournament, usually 5, and then play for our team.

We wanted to log the data of tournaments so if we want to refer it in future we can do that. Or even when tournament is going on, we need to see points and total runs and stuff like that to know who plays the semi finals and the final match. So I took this as an opportunity to learn a new tech. I told them that I would build a PWA, where we can add players, make their teams, create tournaments and add matches and squads to those tournaments. We would also be able to see results of matches and points table and some similar stuff.

So in this series I would like to document my journey building this PWA.
But have I done anything till now? Yes. I have kind of planned in my mind what I would like to do in this app, and have chosen the techonologies that I would like to use. I chose to use Firebase for the backend, and React Ionic for the frontend. This is going to be my first app built with Ionic. Also I wanted to learn firebase by building this app. I have built few apps with firebase but never did it myself, I have only taken few tutorials on firebase.
But even though I want to learn firebase by building this PWA, I don't want to dedicate much time or money in this, because this is something which I and only 5 of my friends will be using. But how do I make sure that only we can add data to the app? What if someone else, who lands on my website tries to do something fishy? There are two ways to do that:
1) Using security rules for database
2) Adding a master password that only me and my friends know
But I am not planning to add authentication to the app, so there's no using of security rules as well. Now for option 2, I would have to use cloud functions in firebase, but it is a paid feature as of now. And as I mentioned before, I don't want to pay for anything for this app.

So I have done something for that already. I have set up a very simple express js server, with only 1 post route that checks for the master password, which I will request everytime I try to add or edit something.

I have already deployed it to Heroku (as I told you I don't want to pay anything for this).

Also this is my second app where I am using gitlab for VCS. Otherwise mostly I use Github only.

I have also setup a firebase project and generated the ionic project.

So that's what I have done till now. Next I am planning to document and plan my database and some other stuff because the database structure will be a bit complex. Therefore, I can code easily. There's no meaning of designing a mockup or wireframe because I will be directly using components from Ionic.

So as I am done with the documentation, I will be back with another post.

Thank you for reading this post and hope you will enjoy my journey of building this app!

💖 💪 🙅 🚩
darshanbajeja
Darshan-Bajeja

Posted on March 24, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024