Catstagram

An Instagram-inspired application for cat lovers, built with React, TypeScript, and modern web technologies. Browse, upload, and interact with cat images in a familiar social media interface.

Live Demo: https://catstagram-rosy.vercel.app/

Features

Core Functionality

• Explore Page: Browse an infinite-scrolling gallery of random cat images
• User Profile: View your uploaded and favorited cat images
• Upload System: Share your own cat images with image cropping and filters
• Social Features: Like & vote on cat images (built comment system UI - but not yet available)

User Experience

• Responsive design for mobile and desktop
• Instagram-inspired UI with infinite scrolling
• Modal dialogs for detailed content viewing
• Optimized image loading and error handling

Authentication System

Catstagram uses an ad-hoc user authentication system:

• Each browser session automatically generates a unique user identity
• User data is stored in localStorage with a randomly generated sub_id
• Random usernames are created using adjective + cat breed + number format
• No login required - just visit the site and start using it immediately
• Each user session is maintained across page refreshes
• Profile customization (username, avatar) is saved to the current session

Technologies Used

• Frontend: React 19, TypeScript, Vite
• Styling: TailwindCSS, Material UI
• State Management: React Context API, React Query
• API Integration: Axios, TheCatAPI
• Deployment: Vercel

Getting Started

1. Clone the repository:

   git clone <repository-url>
   cd catstagram
   

2. Install dependencies:

   npm install
   

3. Create a .env file with your TheCatAPI key:

   VITE_CAT_API_KEY=your_api_key_here
   

4. Start the development server:

   npm run dev
   

5. Build for production:

   npm run build
   

Project Structure

• src/components/ - Reusable UI components
• src/contexts/ - React context providers (UserContext, ToastContext)
• src/hooks/ - Custom React hooks for data fetching and UI logic
• src/pages/ - Main application pages (Home, Explore, Upload)
• src/services/ - API services and user management
• src/utils/ - Utility functions for various app features
• src/theme.ts - Material UI theme configuration

API Integration

This project uses The Cat API for cat data. Features include:

• Fetching random cat images
• Uploading user cat images
• Favoriting and voting on images
• Managing user uploads

Accessibility and Performance

• Keyboard navigation support
• Image optimization for faster loading
• Error boundaries for graceful error handling
• Responsive design for all device sizes