SocialLink - Instagram Clone

A fully-functional Instagram clone built with React Native (Expo) and Appwrite backend.

Features

✨ Core Features

• 📱 User authentication (sign up, login, logout)
• 👤 User profiles with avatars and bios
• 📸 Photo posts with captions
• 🏠 Feed with infinite scroll
• ❤️ Like and comment on posts
• 👥 Follow/unfollow users
• 🔍 Search for users
• 📊 User statistics (posts, followers, following)

Tech Stack

• Frontend: React Native with Expo
• Backend: Appwrite (BaaS)
• Navigation: Expo Router
• State Management: React Context API
• UI: Custom Instagram-inspired design system

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Expo CLI
• Appwrite account (https://cloud.appwrite.io)
• Appwrite CLI (npm install -g appwrite-cli)

Installation

1. Clone the repository

cd "c:\Users\Administrator\Desktop\stuff\New folder\SocialLink"

2. Install dependencies

npm install

3. Set up Appwrite backend

Follow the detailed setup guide in appwrite-setup-guide.md or see the quick setup below.

4. Configure environment variables

Update .env with your Appwrite credentials:

EXPO_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
EXPO_PUBLIC_APPWRITE_PROJECT_ID=your-project-id
EXPO_PUBLIC_APPWRITE_DATABASE_ID=your-database-id
EXPO_PUBLIC_APPWRITE_USERS_COLLECTION_ID=users
EXPO_PUBLIC_APPWRITE_POSTS_COLLECTION_ID=posts
EXPO_PUBLIC_APPWRITE_COMMENTS_COLLECTION_ID=comments
EXPO_PUBLIC_APPWRITE_LIKES_COLLECTION_ID=likes
EXPO_PUBLIC_APPWRITE_FOLLOWS_COLLECTION_ID=follows
EXPO_PUBLIC_APPWRITE_STORAGE_BUCKET_ID=your-bucket-id

Quick Appwrite Setup

1. Create an Appwrite project at https://cloud.appwrite.io
2. Create a database named sociallink-db
3. Create collections: users, posts, comments, likes, follows
4. Create a storage bucket: sociallink-media
5. Configure permissions and attributes as specified in appwrite-setup-guide.md

Running the App

# Start the development server
npm start

# Run on iOS simulator
npm run ios

# Run on Android emulator
npm run android

# Run on web
npm run web

Project Structure

SocialLink/
├── app/                    # Expo Router pages
│   ├── (auth)/            # Authentication screens
│   ├── (tabs)/            # Main tab screens
│   ├── post/              # Post detail screen
│   └── user/              # User profile screen
├── components/            # Reusable components
│   ├── PostCard.tsx       # Instagram-style post card
│   └── UserAvatar.tsx     # User avatar component
├── context/               # React Context providers
│   └── AuthContext.tsx    # Authentication context
├── services/              # API service layers
│   ├── auth.service.ts    # Authentication services
│   ├── post.service.ts    # Post-related services
│   └── interaction.service.ts # Likes, comments, follows
├── lib/                   # Configuration
│   └── appwrite.ts        # Appwrite client setup
├── constants/             # App constants
│   └── theme.ts           # Design system & theme
└── .env                   # Environment variables

Features Breakdown

Authentication

• Email/password sign up and login
• Session management
• Protected routes

Posts

• Create posts with images and captions
• View feed of all posts
• Like/unlike posts
• Comment on posts
• Delete own posts

User Profiles

• View own profile
• View other users' profiles
• Edit profile (bio, avatar)
• Follow/unfollow users
• View user statistics

Search & Explore

• Search users by username
• Discover new users

Screenshots

Add screenshots of your app here once it's running!

Troubleshooting

Common Issues

"Project not found" error

• Verify your Project ID in .env
• Check that you're using the correct API endpoint

"Collection not found" error

• Ensure all collection IDs in .env match those in Appwrite Console
• Verify the database ID is correct

Image upload fails

• Check storage bucket permissions
• Verify file size limits (default: 10MB)
• Ensure allowed file extensions include image types

App crashes on startup

• Clear Expo cache: npx expo start -c
• Reinstall dependencies: rm -rf node_modules && npm install

Next Steps

• Add Stories feature
• Add Direct Messages
• Add Reels/Video support
• Add notifications
• Add profile editing
• Add post editing/deletion
• Add hashtags and mentions
• Add saved posts
• Add dark mode toggle

Contributing

This is a learning project. Feel free to fork and experiment!

License

MIT

Support

For Appwrite-specific issues:

• Documentation: https://appwrite.io/docs
• Discord: https://appwrite.io/discord

For Expo issues:

• Documentation: https://docs.expo.dev
• Forums: https://forums.expo.dev