#Noteapp with github backend install#
#Noteapp with github backend full#
#Noteapp with github backend code#
#Noteapp with github backend Offline#
#Noteapp with github backend plus#

You also add a Save button and a Delete button for existing notes. On the screen, you show a rich text editor with a toolbar to add advanced text editing. These will be used to store the input values and will have as initial values the note's title and content if it exists. You also create a title and content state variables. This is necessary for the library you're using.

#Noteapp with github backend code#

In this code snippet, you create a editor ref variable for the Rich text editor.

#Noteapp with github backend install#

Next, you'll set up a React Native project.ДЇirst, you need to install the Expo CLI if you don't have it installed:

Once you're done, click Save at the top right. Under Permissions, click on Note to expand it, then select all permissions. Click on the edit icon for the Public row. The next step is to change permissions so that you can access the notes from React Native.Д¬lick on Settings in the sidebar, then go to Roles under Users & Permissions Plugin. You should have a Note collection type with the following fields: Make sure to select datetime in the Type dropdown, and set it required in the Advanced Settings tab. Make sure to set it required in the Advanced Settings tab. In the pop-up, enter Note for display name. Then, click on Create new collection type under Collection Types. Create Content-TypesД¬lick on Content-Type Builder on the sidebar. Once you're done, you'll be redirected to the admin dashboard.

In fact, I plan on writing a third and final part to this series to talk about the app as a simple blueprint for a progressive web app (no code!).This will create a new directory called strapi, and, once the installation is done, a new page will open in your default browser at the Strapi backend.

#Noteapp with github backend plus#

For example, I am unhappy with the lack of server side validation for the data stored in notes (as a minimum, the server should set the owner of a note), plus I really wanted some Bounce.js animations for adding new notes! However, I feel the app is good enough to show how easy it is to create a progressive web app these days. There are obviously many details that could be further worked on. Tools like Create React App and Firebase take the sting out of harder technical setup steps (offline data synchronisation, building a secure login flow, setting up a secure cloud data store etc.), thus leaving developers free to pursue their app ideas. Note bad for a couple of afternoonвЂ™s worth of hacking.

#Noteapp with github backend Offline#

There we have it, a responsive, offline capable and progressively enhancing note app that supports all of your devices and synchronises data between them. The client library takes care of all the messy details of offline caching the data, polling for network availability and synchronising the data when possible (either later on during the same session or at next app startup). This means that we can send changes to Firestore even the device doesnвЂ™t have a network connection! As someone who takes the London underground to work every day, this is a must-have feature for me. One of the cool things about the Firebase client library is that it includes built-in support for offline persistence. This means that only authenticated users are able to create notes and reading and modifying notes is only allowed for the owner. Copy-paste the below configuration into the Rules section.Once the collection is created (you can make it available for everyone, if asked, since we are changing the access rules next!), open the Rules tab.Create a Google account if you didnвЂ™t already have one and add a new project.Firebase authentication to build a passwordless login flow.ItвЂ™s billed as an effortless backend, so the developers can focus on a great frontend experience - exactly what we want. GoogleвЂ™s Firebase fits our requirements quite nicely. I enjoy designing my own RESTful interfaces or setting up GraphQL as much as the next guy, but here we are looking for more of a turnkey solution.

#Noteapp with github backend full#

The theme of this series is rough and ready productivity, rather than detailed full stack engineering. In the third part of the series I will write in more detail about the design philosophy of PWAs. This is the general philosophy around Progressive Web Apps (PWA): add capabilities when network state and device features allow for them, but never take away from the existing experience. We will integrate the login capability in such a way that our users never have to use it, if they donвЂ™t need the data sync and server backup capabilities. This time weвЂ™ll add some progressive enhancement, namely the ability to login and sync your notes between devices. In the previous part we created a simple single page notepad app that was capable of working offline once initial resources were loaded.