Folks at Google are keen on improving developer experience. Over the years they’ve come up with all kinds of tools and technologies to make otherwise complex processes, a lot more simpler and Firebase is one of those technologies. Firebase has been extremely popular among front end developers since it essentially eliminates the need to have a separate backend. From authentication, to a realtime database to file storage, you can literally have a robust backend without actually building one from scratch. But that does not mean you can’t. Firebase does provide a solution for backend services called Firebase Admin SDK. …

We’ll be building a low level google keep clone from scratch with VueJs, Firebase & GraphQL. You can check out the live demo for this application here. You can also find the source code for this project at the end of this article. Let’s get started.

Setup & Installation

Install nodejs & vue-cli if you haven’t already. Open up the terminal and create a vue project

vue create google-keep-client

After that, install the following list of dependencies.

npm i buefy axios vuex vue-masonry-css @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome sass sass-loader

Buefy : A UI Component library.
Axios : A popular http client library.
Vuex : State management…

State management for a web application is an intricate process. There’s no correct way of doing it per se, but it can get messy pretty quickly if you don’t follow a certain set of rules. Vuex is VueJs’ way of maintaining state. It’s pretty straightforward and super easy to understand if you’re already familiar with something like Redux. This article will take you through the key concepts of Vuex and at the end we’ll have a basic demo application that makes use of all those concepts. Let’s get started.

Basics of Vuex

Vuex essentially uses a single source of truth, which means that…

Alright, so you’re sitting on your couch reading tweets about political instability in the US and how it’ll affect you even though you don’t live there. The very next minute you’re scrolling through cat asmr posts on instagram because why not. After about 20 minutes of feline purring therapy, you start to have an elaborate discussion with your friends about how you can run your country better than the government. The above activities have one thing in common. You need to get a job. Other than that, if you noticed, everything’s happening in real time. The endless stream of tweets…

User management is an essential part of any application. Whether it’s an e-commerce business or a social media platform, it’s important to have proper authentication protocols and access-control measures in place. Data security is very crucial in this day and age and if you’re starting an online business, it certainly needs to be on the very top of your priority list. There are multiple service providers who will handle these security measures for you. We’ll be focusing on one such player, Auth0. This article mainly focuses on authentication for your Single Page Application(SPA) but I’ll also explain how you can…

I’ll spare you an introduction on this topic. I’m sure you’ve read many elaborate blogs on how to implement state management for a React application, and you just want a quick to-the-point solution.

I’m here to show you exactly that, using React’s very own Context API.

While this is not the only way of implementation, it’s just how I do it and it helps me scale my applications efficiently.

Primarily, it’s a 3 step process:

1. Create a context file.
2. Provide this context to a component, root or otherwise (Based on your use case).
3. Consume the contents of this context

1. Create a context file

Your…

When you open up an app on your phone or go to a website from your browser, the content that you see by default is what everyone else sees. But once you sign in or sign up into the application, you are provided with content based on your information, interests and preferences. This authentication process not only creates a tailored user experience but also acts as a security layer for users. No one else can access your profile without the credentials that you have set for the application. Building such an authentication system used to be a tedious task but…

Building a full stack application with a good looking front end and a robust back end is not an easy job. It can get overwhelming pretty quickly for not only junior developers but also for someone who’s just trying to get started with web development in general. I’m writing this article to make the very first step(and in my opinion the most crucial one) easier for those who’re confused on how to get started. I’ll try to make it as simple as possible for anyone who’s not familiar with either React or Firebase. I’ll also be adding references if you…