Nulltagram

Nulltagram is a full-stack Instagram clone - a social media platform that enables users to share photos, interact through likes and comments, and build networks of followers. This project demonstrates modern full-stack development skills using contemporary technologies.

Live Demo | GitHub Repository

Tutorial: Build Your Own Instagram Clone

This comprehensive tutorial will guide you through building Nulltagram from scratch. By the end, you'll have a fully functional social media platform with authentication, image uploads, and social features.

Prerequisites

• Node.js 20+ installed
• pnpm package manager (npm install -g pnpm)
• A Firebase account
• Basic knowledge of React, Express.js, and JavaScript

Part 1: Project Setup

1.1 Initialize the Project Structure

Create the project directory and initialize the monorepo:

mkdir nulltagram && cd nulltagram
pnpm init

Create pnpm-workspace.yaml for monorepo management:

packages:
  - 'ntagram'

1.2 Project Structure Overview

Our final structure will look like this:

nulltagram/
├── app.js                    # Express server entry
├── package.json              # Backend dependencies
├── pnpm-workspace.yaml       # Monorepo config
├── config/
│   └── firebase.js           # Firebase Admin SDK
├── middleware/
│   └── requireLogin.js       # Auth middleware
├── routes/
│   ├── auth.js               # Authentication routes
│   ├── post.js               # Post CRUD routes
│   └── user.js               # User routes
└── ntagram/                  # React frontend
    ├── src/
    │   ├── App.jsx
    │   ├── config/
    │   ├── components/
    │   ├── context/
    │   ├── reducers/
    │   └── utils/
    └── package.json

Part 2: Firebase Setup

2.1 Create a Firebase Project

1. Go to Firebase Console
2. Click "Create a project" and follow the wizard
3. Enable the following services:

Authentication:

• Go to Authentication > Sign-in method
• Enable "Email/Password" provider
• Enable "Google" provider

Firestore Database:

• Go to Firestore Database > Create database
• Start in test mode (we'll add rules later)

Storage:

• Go to Storage > Get started
• Start in test mode

2.2 Get Firebase Credentials

For Frontend (Web App):

1. Go to Project Settings > General
2. Under "Your apps", click the web icon </>
3. Register your app and copy the config object

For Backend (Service Account):

1. Go to Project Settings > Service accounts
2. Click "Generate new private key"
3. Save the JSON file securely

2.3 Configure Storage CORS

Firebase Storage requires CORS configuration for browser uploads:

# Create cors.json
echo '[{"origin":["*"],"method":["GET","POST","PUT","DELETE","HEAD"],"maxAgeSeconds":3600,"responseHeader":["Content-Type","Authorization"]}]' > cors.json

# Apply CORS rules (requires gsutil)
gsutil cors set cors.json gs://YOUR_PROJECT_ID.appspot.com

Part 3: Backend Development

3.1 Install Backend Dependencies

pnpm add express cors firebase-admin @scalar/express-api-reference
pnpm add -D nodemon

Update package.json:

{
  "name": "nulltagram",
  "type": "module",
  "scripts": {
    "dev": "nodemon app.js",
    "start": "node app.js"
  }
}

3.2 Firebase Admin Configuration

Create config/firebase.js:

import admin from 'firebase-admin';

// Parse service account from environment variable
const serviceAccount = JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT);

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});

export const db = admin.firestore();
export const auth = admin.auth();

3.3 Authentication Middleware

Create middleware/requireLogin.js:

import { auth, db } from '../config/firebase.js';

const requireLogin = async (req, res, next) => {
  const authHeader = req.headers.authorization;

  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ error: 'Unauthorized - No token provided' });
  }

  const token = authHeader.split(' ')[1];

  try {
    // Verify the Firebase ID token
    const decodedToken = await auth.verifyIdToken(token);

    // Fetch user data from Firestore
    const userDoc = await db.collection('users').doc(decodedToken.uid).get();

    if (!userDoc.exists) {
      return res.status(401).json({ error: 'User not found' });
    }

    req.user = { _id: userDoc.id, ...userDoc.data() };
    next();
  } catch (error) {
    console.error('Auth error:', error);
    return res.status(401).json({ error: 'Invalid token' });
  }
};

export default requireLogin;

3.4 Express Server Setup

Create app.js:

import 'dotenv/config';
import express from 'express';
import cors from 'cors';
import { apiReference } from '@scalar/express-api-reference';

import authRoutes from './routes/auth.js';
import postRoutes from './routes/post.js';
import userRoutes from './routes/user.js';

const app = express();
const PORT = process.env.PORT || 5001;

// Middleware
app.use(cors());
app.use(express.json());

// Routes
app.use(authRoutes);
app.use(postRoutes);
app.use(userRoutes);

// Health check
app.get('/health', (req, res) => {
  res.json({ status: 'ok', timestamp: new Date().toISOString() });
});

// API Documentation
app.use('/docs', apiReference({
  spec: { url: '/openapi.json' },
  theme: 'purple',
}));

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

3.5 Authentication Routes

Create routes/auth.js:

import express from 'express';
import { db } from '../config/firebase.js';
import requireLogin from '../middleware/requireLogin.js';

const router = express.Router();

// Create user profile after Firebase signup
router.post('/create-profile', requireLogin, async (req, res) => {
  try {
    const { name, email, image } = req.body;
    const userId = req.user._id;

    const userData = {
      _id: userId,
      name: name || email.split('@')[0],
      email,
      image: image || null,
      bio: null,
      followers: [],
      following: [],
      createdAt: new Date().toISOString(),
    };

    await db.collection('users').doc(userId).set(userData);
    res.json({ user: userData });
  } catch (error) {
    console.error('Create profile error:', error);
    res.status(500).json({ error: 'Failed to create profile' });
  }
});

// Get current user's profile
router.get('/get-profile', requireLogin, async (req, res) => {
  res.json(req.user);
});

export default router;

3.6 Post Routes

Create routes/post.js:

import express from 'express';
import { db } from '../config/firebase.js';
import requireLogin from '../middleware/requireLogin.js';

const router = express.Router();

// Helper: Populate post with user data
const populatePost = async (post) => {
  const userDoc = await db.collection('users').doc(post.postedBy).get();
  const userData = userDoc.exists ? userDoc.data() : null;

  // Populate comment authors
  const populatedComments = await Promise.all(
    (post.comments || []).map(async (comment) => {
      const commentUserDoc = await db.collection('users').doc(comment.postedBy).get();
      return {
        ...comment,
        postedBy: commentUserDoc.exists
          ? { _id: commentUserDoc.id, name: commentUserDoc.data().name, image: commentUserDoc.data().image }
          : { _id: comment.postedBy, name: 'Unknown' },
      };
    })
  );

  return {
    ...post,
    postedBy: userData
      ? { _id: userDoc.id, name: userData.name, image: userData.image }
      : { _id: post.postedBy, name: 'Unknown' },
    comments: populatedComments,
  };
};

// Get all posts with pagination
router.get('/allposts', requireLogin, async (req, res) => {
  try {
    const limit = parseInt(req.query.limit) || 10;
    const cursor = req.query.cursor;

    let query = db.collection('posts')
      .orderBy('createdAt', 'desc')
      .limit(limit + 1);

    if (cursor) {
      const cursorDoc = await db.collection('posts').doc(cursor).get();
      if (cursorDoc.exists) {
        query = query.startAfter(cursorDoc);
      }
    }

    const snapshot = await query.get();
    const posts = [];

    for (const doc of snapshot.docs.slice(0, limit)) {
      const postData = { _id: doc.id, ...doc.data() };
      posts.push(await populatePost(postData));
    }

    const hasMore = snapshot.docs.length > limit;
    const nextCursor = hasMore ? snapshot.docs[limit - 1].id : null;

    res.json({ posts, nextCursor, hasMore });
  } catch (error) {
    console.error('Get posts error:', error);
    res.status(500).json({ error: 'Failed to fetch posts' });
  }
});

// Create a new post
router.post('/createpost', requireLogin, async (req, res) => {
  try {
    const { title, body, url } = req.body;

    if (!title || !url) {
      return res.status(400).json({ error: 'Title and image are required' });
    }

    const postData = {
      title,
      body: body || '',
      picture: url,
      postedBy: req.user._id,
      likes: [],
      comments: [],
      createdAt: new Date().toISOString(),
    };

    const docRef = await db.collection('posts').add(postData);
    const post = { _id: docRef.id, ...postData };

    res.json({ post: await populatePost(post) });
  } catch (error) {
    console.error('Create post error:', error);
    res.status(500).json({ error: 'Failed to create post' });
  }
});

// Like a post
router.put('/givelike', requireLogin, async (req, res) => {
  try {
    const { postId } = req.body;
    const postRef = db.collection('posts').doc(postId);

    await postRef.update({
      likes: admin.firestore.FieldValue.arrayUnion(req.user._id),
    });

    const updatedDoc = await postRef.get();
    res.json({ post: await populatePost({ _id: postId, ...updatedDoc.data() }) });
  } catch (error) {
    console.error('Like error:', error);
    res.status(500).json({ error: 'Failed to like post' });
  }
});

// Unlike a post
router.put('/removelike', requireLogin, async (req, res) => {
  try {
    const { postId } = req.body;
    const postRef = db.collection('posts').doc(postId);

    await postRef.update({
      likes: admin.firestore.FieldValue.arrayRemove(req.user._id),
    });

    const updatedDoc = await postRef.get();
    res.json({ post: await populatePost({ _id: postId, ...updatedDoc.data() }) });
  } catch (error) {
    console.error('Unlike error:', error);
    res.status(500).json({ error: 'Failed to unlike post' });
  }
});

// Add comment
router.put('/insert-comment', requireLogin, async (req, res) => {
  try {
    const { postId, text } = req.body;
    const postRef = db.collection('posts').doc(postId);

    const comment = {
      text,
      postedBy: req.user._id,
      createdAt: new Date().toISOString(),
    };

    await postRef.update({
      comments: admin.firestore.FieldValue.arrayUnion(comment),
    });

    const updatedDoc = await postRef.get();
    res.json({ post: await populatePost({ _id: postId, ...updatedDoc.data() }) });
  } catch (error) {
    console.error('Comment error:', error);
    res.status(500).json({ error: 'Failed to add comment' });
  }
});

// Delete post
router.delete('/delete-post/:postId', requireLogin, async (req, res) => {
  try {
    const { postId } = req.params;
    const postDoc = await db.collection('posts').doc(postId).get();

    if (!postDoc.exists) {
      return res.status(404).json({ error: 'Post not found' });
    }

    if (postDoc.data().postedBy !== req.user._id) {
      return res.status(403).json({ error: 'Unauthorized' });
    }

    await db.collection('posts').doc(postId).delete();
    res.json({ message: 'Post deleted' });
  } catch (error) {
    console.error('Delete post error:', error);
    res.status(500).json({ error: 'Failed to delete post' });
  }
});

export default router;

3.7 User Routes

Create routes/user.js:

import express from 'express';
import { db } from '../config/firebase.js';
import admin from 'firebase-admin';
import requireLogin from '../middleware/requireLogin.js';

const router = express.Router();

// Get user profile
router.get('/user/:id', requireLogin, async (req, res) => {
  try {
    const userDoc = await db.collection('users').doc(req.params.id).get();

    if (!userDoc.exists) {
      return res.status(404).json({ error: 'User not found' });
    }

    // Get user's posts
    const postsSnapshot = await db.collection('posts')
      .where('postedBy', '==', req.params.id)
      .orderBy('createdAt', 'desc')
      .get();

    const posts = postsSnapshot.docs.map(doc => ({
      _id: doc.id,
      ...doc.data(),
    }));

    res.json({ user: { _id: userDoc.id, ...userDoc.data() }, posts });
  } catch (error) {
    console.error('Get user error:', error);
    res.status(500).json({ error: 'Failed to fetch user' });
  }
});

// Search users
router.get('/search-users', requireLogin, async (req, res) => {
  try {
    const { q } = req.query;
    if (!q) return res.json([]);

    const snapshot = await db.collection('users').limit(50).get();
    const users = snapshot.docs
      .map(doc => ({ _id: doc.id, ...doc.data() }))
      .filter(user => user.name.toLowerCase().includes(q.toLowerCase()))
      .slice(0, 10);

    res.json(users);
  } catch (error) {
    console.error('Search error:', error);
    res.status(500).json({ error: 'Search failed' });
  }
});

// Follow user
router.put('/follow', requireLogin, async (req, res) => {
  try {
    const { followId } = req.body;
    const currentUserId = req.user._id;

    // Add to target's followers
    await db.collection('users').doc(followId).update({
      followers: admin.firestore.FieldValue.arrayUnion(currentUserId),
    });

    // Add to current user's following
    await db.collection('users').doc(currentUserId).update({
      following: admin.firestore.FieldValue.arrayUnion(followId),
    });

    res.json({ message: 'Followed successfully' });
  } catch (error) {
    console.error('Follow error:', error);
    res.status(500).json({ error: 'Failed to follow user' });
  }
});

// Unfollow user
router.put('/unfollow', requireLogin, async (req, res) => {
  try {
    const { unfollowId } = req.body;
    const currentUserId = req.user._id;

    await db.collection('users').doc(unfollowId).update({
      followers: admin.firestore.FieldValue.arrayRemove(currentUserId),
    });

    await db.collection('users').doc(currentUserId).update({
      following: admin.firestore.FieldValue.arrayRemove(unfollowId),
    });

    res.json({ message: 'Unfollowed successfully' });
  } catch (error) {
    console.error('Unfollow error:', error);
    res.status(500).json({ error: 'Failed to unfollow user' });
  }
});

// Update profile
router.put('/update-profile', requireLogin, async (req, res) => {
  try {
    const { name, bio } = req.body;

    await db.collection('users').doc(req.user._id).update({
      name,
      bio,
    });

    const updatedDoc = await db.collection('users').doc(req.user._id).get();
    res.json({ user: { _id: updatedDoc.id, ...updatedDoc.data() } });
  } catch (error) {
    console.error('Update profile error:', error);
    res.status(500).json({ error: 'Failed to update profile' });
  }
});

export default router;

Part 4: Frontend Development

4.1 Create React App with Vite

cd nulltagram
pnpm create vite ntagram --template react
cd ntagram
pnpm install

4.2 Install Frontend Dependencies

pnpm add firebase react-router-dom lucide-react materialize-css
pnpm add -D vitest @testing-library/react @testing-library/jest-dom

4.3 Firebase Client Configuration

Create src/config/firebase.js:

import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const storage = getStorage(app);
export const googleProvider = new GoogleAuthProvider();

Create src/config/api.js:

export const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5001';

4.4 User State Management

Create src/reducers/userReducer.js:

export const initialState = null;

export const reducer = (state, action) => {
  switch (action.type) {
    case 'USER':
      return action.payload;
    case 'CLEAR':
      return null;
    case 'UPDATE':
      return {
        ...state,
        followers: action.payload.followers,
        following: action.payload.following,
      };
    case 'UPDATEPROFILEIMAGE':
      return { ...state, image: action.payload };
    default:
      return state;
  }
};

4.5 Main App Component

Create src/App.jsx:

import { createContext, useReducer, useEffect } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { reducer, initialState } from './reducers/userReducer';

import Navbar from './components/Navbar';
import Home from './components/screens/Home';
import Signin from './components/screens/Signin';
import Signup from './components/screens/Signup';
import Profile from './components/screens/Profile';
import UserProfile from './components/screens/UserProfile';
import CreatePost from './components/screens/CreatePost';
import PostDetail from './components/screens/PostDetail';
import Explore from './components/screens/Explore';

import 'materialize-css/dist/css/materialize.min.css';
import './App.css';

export const UserContext = createContext();

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    const user = JSON.parse(localStorage.getItem('user'));
    if (user) {
      dispatch({ type: 'USER', payload: user });
    }
  }, []);

  return (
    <UserContext.Provider value={{ state, dispatch }}>
      <BrowserRouter>
        <Navbar />
        <div className="container">
          <Routes>
            <Route path="/" element={state ? <Home /> : <Navigate to="/signin" />} />
            <Route path="/signin" element={<Signin />} />
            <Route path="/signup" element={<Signup />} />
            <Route path="/profile" element={state ? <Profile /> : <Navigate to="/signin" />} />
            <Route path="/profile/:id" element={state ? <UserProfile /> : <Navigate to="/signin" />} />
            <Route path="/create" element={state ? <CreatePost /> : <Navigate to="/signin" />} />
            <Route path="/post/:id" element={state ? <PostDetail /> : <Navigate to="/signin" />} />
            <Route path="/explore" element={state ? <Explore /> : <Navigate to="/signin" />} />
          </Routes>
        </div>
      </BrowserRouter>
    </UserContext.Provider>
  );
}

export default App;

4.6 Image Compression Utility

Create src/utils/imageCompression.js:

export const compressImage = (file, maxWidth = 1080, maxHeight = 1080, quality = 0.85) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = (e) => {
      const img = new Image();

      img.onload = () => {
        const canvas = document.createElement('canvas');
        let { width, height } = img;

        // Calculate new dimensions maintaining aspect ratio
        if (width > height) {
          if (width > maxWidth) {
            height = (height * maxWidth) / width;
            width = maxWidth;
          }
        } else {
          if (height > maxHeight) {
            width = (width * maxHeight) / height;
            height = maxHeight;
          }
        }

        canvas.width = width;
        canvas.height = height;

        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);

        canvas.toBlob(
          (blob) => {
            if (blob) {
              resolve(new File([blob], file.name, { type: 'image/jpeg' }));
            } else {
              reject(new Error('Compression failed'));
            }
          },
          'image/jpeg',
          quality
        );
      };

      img.onerror = () => reject(new Error('Failed to load image'));
      img.src = e.target.result;
    };

    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
};

export const formatFileSize = (bytes) => {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
  return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
};

4.7 Sign In Component

Create src/components/screens/Signin.jsx:

import { useState, useContext } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { signInWithEmailAndPassword, signInWithPopup } from 'firebase/auth';
import { auth, googleProvider } from '../../config/firebase';
import { API_URL } from '../../config/api';
import { UserContext } from '../../App';
import M from 'materialize-css';

const Signin = () => {
  const { dispatch } = useContext(UserContext);
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);

  const fetchProfile = async (token) => {
    const res = await fetch(`${API_URL}/get-profile`, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return res.json();
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      const token = await userCredential.user.getIdToken();
      const userData = await fetchProfile(token);

      localStorage.setItem('user', JSON.stringify(userData));
      localStorage.setItem('token', token);
      dispatch({ type: 'USER', payload: userData });

      M.toast({ html: 'Welcome back!', classes: 'green' });
      navigate('/');
    } catch (error) {
      M.toast({ html: error.message, classes: 'red' });
    } finally {
      setLoading(false);
    }
  };

  const handleGoogleSignIn = async () => {
    try {
      const result = await signInWithPopup(auth, googleProvider);
      const token = await result.user.getIdToken();

      let userData;
      try {
        userData = await fetchProfile(token);
      } catch {
        // New user - create profile
        const res = await fetch(`${API_URL}/create-profile`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${token}`,
          },
          body: JSON.stringify({
            name: result.user.displayName,
            email: result.user.email,
            image: result.user.photoURL,
          }),
        });
        userData = (await res.json()).user;
      }

      localStorage.setItem('user', JSON.stringify(userData));
      localStorage.setItem('token', token);
      dispatch({ type: 'USER', payload: userData });
      navigate('/');
    } catch (error) {
      M.toast({ html: error.message, classes: 'red' });
    }
  };

  return (
    <div className="card auth-card">
      <h2>Sign In</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e)=> setEmail(e.target.value)}
          required
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e)=> setPassword(e.target.value)}
          required
        />
        <button
          type="submit"
          className="btn waves-effect waves-light"
          disabled={loading}
        >
          {loading ? 'Signing in...' : 'Sign In'}
        </button>
      </form>

      <div className="divider" style={{ margin: '20px 0' }} />

      <button
        className="btn waves-effect waves-light red"
        onClick={handleGoogleSignIn}
      >
        Sign in with Google
      </button>

      <p style={{ marginTop: '20px' }}>
        Don't have an account? <Link to="/signup">Sign up</Link>
      </p>
    </div>
  );
};

export default Signin;