Fullstack Applications

To wrap up our series on the media-library project I want to reflect on the positive and negative parts of the project with a view to doing things better in the future, and then discuss what features might make sense for the next iteration. Positive Hooks - This entire application is written without using a single React Class Component. To say I am a fan of Hooks is an understatement. By not using Hooks I find my code is both easier to write and read. Render props - I am a fan of the render props pattern, although it does seem that custom Hooks may replace render props over time. I am not a fan of Higher Order Components (HOC). This entire application is written without creating a single HOC (but we do use a few). Firebase (the platform) - I really like Firebase as a platform. I don't remember having a problem with it throughout the entire development cycle. I appreciate the efforts to keep Firebase minimal and not bloat it with a bunch of rarely used features. In particular,

It feels like this blog series has been going on forever, maybe because it has. We finally reached our goal of having something worth showing users in the last post. We can now turn our attention to getting the application published somewhere users can access it. Code  https://github.com/fullsapps/media-library Background  Not surprisingly we will leverage Firebase Hosting to host our application. This in one of the most straightforward operations related to our application.  Walk Through I am going to start by creating a production build of our application. > npm run build There are some good bits in the create-react-app documentation about installing and using serve. This is a good way to test your production build before you push it to a live server. See:  https://facebook.github.io/create-react-app/docs/deployment . The steps to deploy to Firebase Hosting are also discussed on that same page. Below are the steps we are using and the answers to the Fir

In this post we will finally get to the key part of the application - letting users select and download images. Code  https://github.com/fullsapps/media-library/tree/41.Images Background  For the most part this post is about pulling together a lot of the concepts we have applied elsewhere.  Walk Through Let's start by replacing our Images component placeholder with a component that will display all of the images for a selected property. Before we create the component itself I want to create a helper component. I want to be able to let users filter the list of displayed images. We can use react-select to help. I'm going to create a generic component that uses react-select to allow us to generically identify a list for filtering. MultiSettingSelect.jsx import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import Select from 'react-select'; export default function MultiSettingSelect({   values,  

In the last post we created a property list from which users can select a property. In this post we continue by creating the property components/pages. Code  https://github.com/fullsapps/media-library/tree/40.Property Background  There is one new concept I want to introduce in this post. When we display property details I want to display a map with the location of the property. I've decided to use Leaflet, and the React helper library React-Leaflet. In my opinion Leaflet is the best open-source option for displaying the map we want. https://react-leaflet.js.org/ https://leafletjs.com/   Walk Through Let's start by create the property container to pull in the bits of the store we will need. We want a specific property, its images and the settings. Notice that we are using ownProps to leverage the property ID from the url to filter on a specific property. PropertyContainer.jsx import { connect } from 'react-redux'; import Property from '../../