How To Create a ReactJS Application For Photo Sharing

Hello developer community! Today smartphones have entered our lives so tightly that they have practically displaced the market of professional digital cameras and since 2012 their sales have fallen more than 10 times. Nevertheless, people have not stopped taking pictures, moreover, every year the total number of photos is growing, and at the same time, the needs of users for photo sharing applications are growing. In this article you will read why these programs are so important, the most popular of them and most interesting – how to create such an application using ReactJS.

If you survey Americans between the ages of 18 and 45 about photos and ask what their needs are, such as whether to send photos to friends, 65% will say yes. The methods they use to share photos are quite outdated, such as email or messengers. This is quite inconvenient, because applications such as Instagram have much more features related to photos and even allow you to enjoy the process of photo sharing. Instagram is the most popular image app sharing platform. It has 1 billion monthly active users, so that is 1/7 of the population. On average a user spends about roughly an hour on Instagram. Some users upload photos and others react over it mainly through likes or comments. First you upload any photo (or selfie), apply some filters, write a nice caption, add some hashtags and press the ‘post’ button. When the image gets uploaded to the server, all of your followers will see it in their news feed. When someone likes or writes a comment you will see it in the notifications. This is basically what Instagram does. There are some requirements to any media sharing app: users should be able to upload photos on the profile, view these photos, follow other users, view feeds, like and comment on the posts. This is the bare minimum essential things that your app should do. You can also receive and send messages (like Direct in Instagram). How does it work? First of all we have a user which posts a picture, loading the user’s feed or posting a like or comment on someone else’s photo. Next this request will land on to a front-end load balancer which will then be forwarded to a fleet of highly scalable Instagram web servers that are running the application to handle these operations. They will persist the action directly into the craft data store, then these actions are published onto a streaming service. You will be wondering why we need this streaming service here. So the main benefit we get is that it provides the flexibility to scale out the system by adding several other micro services. Now the question is what do we do with this data? This data is consumed by a fleet of micro services for instance like this LikesEvent data is consumed by media counter service to upload the likes count. Similarly the user feed service puts the events to generate the user feeds for all the followers. Instagram components are: User Feed Service, Followers Service, Media Hosting Service, Posts Service, Comments Service, Likes Service.

Now you understand how such applications work and we can start with how to build your own photo sharing app using the ReactJS. Getting started.

The easiest way to create a mobile photo sharing application is to use Expo. Expo is a framework (a framework for a framework, think about it) and a platform that makes life much easier for a novice developer or a React developer. This technology makes it possible to develop and test an application without using Xcode or Android SDK and their ecosystems, a very convenient system for testing your code and UI application without the need to create an installation file, a huge number of ready-made tools and APIs for working with device modules, automatically manage your Play Market and Apple Store certificates and subscriptions. Before you start you need to have pre installed software: the latest stable version of NodeJS; Git version control system.

1. Run the expo cli command to create an empty project. Next, you need to enter some parameters for the initial setup of the project. When choosing a template for the starter application, select the blank template and write the name of the project and its text identifier. If you have Yarn installed, Expo will suggest using it instead of npm. Next, Expo will create a folder with a project under the name you specified in the slug, and will install the necessary dependencies themselves. If you did everything correctly, then when you run the ‘npm run start’ command, your console will display information that the application has been built, and a QR code will appear to open it in the Expo application. The browser will open the corresponding page, which will also have a live reload console and a UI for launching emulators. Create a Screens folder. We will put files with screen components in it. We start writing code for UI. Ultimately, we will pass an array with image elements to our gallery component. It will be just a grid with pictures with rounded edges (according to the latest Apple guides, this is very fashionable). Place the gallery component in the components folder. It will only be responsible for rendering our array of images. Later, we will wrap it in a higher-order component, which will pass data and functions to it in props to execute when interacting with it. This will separate the logic and data from the presentation a bit.
   
   
2. Stylization. From React, we are importing StyleSheet here. It is a class that provides access to styling abstraction (like CSS). We use the Create method to create an object containing references to specific sets of styles. The names of the links correspond to the names of the properties of the object. The styles themselves are assigned to the component using the style props. We can also pass just an object to style.
   
   
3. Now it is necessary to separately mention the component Image. It is styled in the same way as the rest of the components, it has a required parameter source, with which we specify the path of the image that we want to display.
   
   
4. Navigation. To implement navigation between screens, we will use the react-navigation package.
   
   
5. Let’s touch on the topic of compilation into an installation file and preparation for release on the App Store and Google Play platforms. First, you need to prepare the app.json configuration file. In it, you need to specify the data for the release: bundle ID, link to the application icon, version, etc. After that, you just need to run the Expo command for the expo build: android or expo build: ios build, in the process it will ask you for the information necessary for compilation.

You have read to the end, which means you are well done. If you seriously intend to release your application, then this will be just the beginning of preparation. There are a huge number of nuances and requirements that need to be met. This still varies across platforms.

Conclusion

In this article, I outlined the basic principles of photo sharing applications on the example of the most popular of them, Instagram. Developing such React applications is not a very difficult task, but it requires certain skills. The requirements for such an app are also presented above. I wish you success in the React JS development and maybe you will create such a successful project as Instagram or even the best! Good luck and happy coding!