Microservices In Practice: Developing Instagram Clone —Frontend Service

This is part 9 of Developing Instagram Clone series, other parts are linked below

Disclaimer: I’m a backend developer who learned the front-end for prototyping. So, the code is not well structured and I recommend you follow a better structure, but you’ll get a general understanding of how the front-end service interacts with the back-end services in Microservices architecture

Prerequisites

I assume a basic understanding of ReactJS and React Router.

If you can answer the following questions, then you are good to go:

What is react component ?
What is component states and props?
How to do navigation in react?

I use only React, React-router and ant design components library.

If you are unable to answer the above questions then I recommend the official react tutorials to start with.

Project Structure

Clone instagram-clone-client project, and let’s have a look into the project structure.

**app: **is the entry point of the application where we define our routes.
common: has all the shared components like application constants and the menu header.
post: has everything related to post like news feed, add new post page and post grid.
**user: **has registration, login and profiles components.
util: has an ApiUtil, which encapsulates all the calls to the gateway service.

The ApiUtil

The ApiUtil has a very important method “request” which makes a call to an API.

const request = options => {
  const headers = new Headers();

  if (options.setContentType !== false) {
    headers.append("Content-Type", "application/json");
  }

  if (localStorage.getItem(ACCESS_TOKEN)) {
    headers.append(
      "Authorization",
      "Bearer " + localStorage.getItem(ACCESS_TOKEN)
    );
  }

  const defaults = { headers: headers };
  options = Object.assign({}, defaults, options);

  return fetch(options.url, options).then(response =>
    response.json().then(json => {
      if (!response.ok) {
        return Promise.reject(json);
      }
      return json;
    })
  );
};

It is important to notice at line 8–13, it adds the token to the Authorization header with each request.

Also, ApiUtil has all the method calls to the gateway service.

export function login(loginRequest) {
  return request({
    url: API_BASE_URL + "/auth/signin",
    method: "POST",
    body: JSON.stringify(loginRequest)
  });
}

login method which makes a post request to “/auth/signin”.

export function getUserProfile(username) {
  if (!localStorage.getItem(ACCESS_TOKEN)) {
    return Promise.reject("No access token set.");
  }

  return request({
    url: API_BASE_URL + "/auth/users/summary/" + username,
    method: "GET"
  });
}

getUserProfile, which makes a get request to “/auth/users/summary/{username}” to get a user profile info.

And many other methods which follow the same pattern.

#microservices #react #developer #web-development

What is GEEK

Buddha Community

Microservices In Practice: Developing Instagram Clone —Frontend Service

Marcus Anthony

1627018676

Instagram Clone | Instagram Clone App Development | App-like Instagram

Introduction to social media is a needless thing as we all are aware of how successful they are. They provide a social networking platform for people to connect with others across the world. Instagram, the photo-sharing social networking site, has gained a huge user base. The app is a photo-sharing medium where people can post their photos and videos more than social media.

If the app strongly influences you, then you can try your best to launch an app like Instagram. Here, you will find some important features to include in your Instagram clone.

The Must-have features of an Instagram clone app

Home screen

The home screen is where the users can find all the posts and feeds shared by people in their following list.

Profile creation

Upon downloading the app, the users can create their profiles by adding their photos. They can also give a bio about themselves. This will let others know about them before sending the following request.

Search option

The advanced search option allows the users to search various accounts or feeds featured in the app. By entering their keywords in the search option, they will see the top results out of it.

Uploading photos and videos

The app should allow users to upload their photos and videos from their libraries. While the users upload their media, ask them if they would like to make their post public or visible only to the selected profiles.

Activity log

The Instagram clone will list the mutual list friends in the app to give them follow requests. And if someone from their Facebook friend list has joined the app, they can see them in the app.

Summing up,

Social media apps will always have a warm response from people. Even in recent days, the Clubhouse app has gained huge recognition from people. So, there is still scope for you to entertain people with your** Instagram clone**. Then Appdupe will be your one-stop solution for developing your Instagram clone app. Visit our website for more insights.

#instagram clone #instagram clone app #instagram clone app development #instagram clone script #instagram like app development #instagram app clone

Marcus Anthony

1616737928

How To Develop A Social Media App Solution With Instagram Clone?

The craze for social media among people is increasing day by day and it is resulting in many positive changes in the social media app market. Social media apps are getting better day by day in order to maintain their position in the market. Although this business segment is very competitive, it allows new companies into the segment. Many newly emerging companies are entering into this business segment by trusting the functionality of their applications.

If you are thinking about entering this business segment, you should probably consider proceeding with economic alternatives as to the competition and the cost of building an app from scratch are very high. If you are new to business and planning for small-scale business activity, then the best choice that would be available to you will be Clone applications.

Instagram Clone app is a readily available version in the market that can be further customized and launched in the market. Such applications are white-labeled and are very much legal to use. Instagram clone app comes with loaded features which include the already existing and extra added features. Few of the extra added features are mentioned below,

Quick Sign in / Sign up
Personalized news feed
Photo and video editing
Audio and video calling
Real-time chat
Live Streaming
Block or report users
Upload pictures / videos

And many more, such types of clone applications are worth every penny spent on it and it is the safest way to enter the market. Find an app developing company and get your own Instagram Clone app developed and join this social media apps market and prompt your existence to the people.

#instagram clone #instagram clone app #instagram clone app development #instagram like app development #instagram app clone #instagram clone app script

hourly developer

1598684574

Hire Frontend Developers

Create a new web app or revamp your existing website?

Every existing website or a web application that we see with an interactive and user-friendly interface are from Front-End developers who ensure that all visual effects come into existence. Hence, to build a visually appealing web app front-end development is required.

At HourlyDeveloper.io, you can Hire FrontEnd Developers as we have been actively working on new frontend development as well as frontend re-engineering projects from older technologies to newer.

Consult with experts: https://bit.ly/2YLhmFZ

#hire frontend developers #frontend developers #frontend development company #frontend development services #frontend development #frontend

Marcus Anthony

1613539912

Instagram Clone | Instagram Clone App Development | App-like Instagram

People love to be a user on social media platforms as it is part of a trend in this era. Thus developing an app like Instagram would be much beneficial for users and a huge success for entrepreneurs as the revenue of this app would reach heights. Our solution is pre-packed with all functionality, features, and premium versions. So why wait, call to know more about this app!

#instagram clone #instagram clone app #instagram clone script #instagram like app #app like instagram #instagram clone software

First DigiAdd

1622009130

Mobile App Development Services | Android App Development

First DigiAdd is the Best Mobile App Development Service provider. The application has almost taken control of the workspace to use the Internet. Mobile is a must for all people at this time. In this 21st century. Our team develops a unique and fully located portable application that can be easily operated by anyone.

#mobile app development services #best app development company #mobile app development company, #android app development services #ios app development services #web & app development services