Instagram-Clone

An app that resembles famous social app, Instagram is built using React-Native App.

Table of contents

• General Info
• Technologies
• API Source
• Setup
• App Structure

General Info

This project is used to display image feed and comment section to add comments

Technologies

Project is created with:

• React Native
• React
• Expo (https://expo.io/learn)
• Android SDK

API Source

export const fetchImages = async () => {
 const response = await fetch('https://unsplash.it/list');
 return await response.json();
};

export const getImageFromId = id => `https://unsplash.it/${600}/${600}?image=${id}`

Setup

Install npm Packages

• npm install react package
• npm install react-native package
• npm install react-dom package
• npm install yarn
• npm install expo-cli --global

Create expo project

$ expo init instagram-clone --template blank@sdk-34 --yarn
$ cd instagram-clone
$ expo start

App Structure

• 📂 instagram-clone
  • 📄 App.js
  • 📄 Constants.js
  • 📄 app.json
  • 📂 assets
    • 📄 icon.png
    • 📄 splash.png
  • 📂 components
    • 📂 Comments
      • 📄 CommentInput.js
      • 📄 CommentList.js
      • 📄 NavigationBar.js
      • 📄 index.js
    • 📂 Feed
      • 📄 AuthorRow.js
      • 📄 Avatar.js
      • 📄 Card.js
      • 📄 CardList.js
      • 📄 index.js
  • 📄 package.json
  • 📂 utils
    • 📄 api.js
    • 📄 getAvatarColor.js
    • 📄 getInitials.js