Pixel - Image Sharing Platform

A modern, responsive image sharing platform built with React, TypeScript, and Node.js. Pixel allows users to browse, view, and interact with images across different categories.

🚀 Features

Frontend Features

• Responsive Image Grid: Masonry layout that adapts to different screen sizes
• Image Popup Viewer: Full-screen image viewing with maximize/minimize functionality
• Category Navigation: Browse images by categories
• Search Functionality: Search through images
• User Authentication: Login and registration system
• Modern UI: Built with Material-UI components and SCSS styling
• Image Details: View image statistics (views, downloads) and descriptions
• Related Images: Discover similar images in popup view

Backend Features

• RESTful API: Express.js server with TypeScript
• MongoDB Integration: Mongoose ODM for data management
• User Management: User registration, authentication, and profiles
• Image Management: Upload, categorize, and manage images
• Category System: Organize images into categories
• File Upload: Multer middleware for image uploads

🛠️ Tech Stack

Frontend

• React 18 with TypeScript
• Vite for fast development and building
• Material-UI (MUI) for UI components
• React Router DOM for navigation
• SCSS for styling
• React Icons for iconography
• Context API for state management

Backend

• Node.js with TypeScript
• Express.js web framework
• MongoDB with Mongoose ODM
• Multer for file uploads
• Dotenv for environment variables

📁 Project Structure

Pixel/
├── pixel/                 # Frontend React application
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   │   ├── image-popup/    # Image popup viewer
│   │   │   ├── inputs/         # Form input components
│   │   │   └── top-bar/        # Navigation and search
│   │   ├── pages/        # Application pages
│   │   │   ├── auth/          # Authentication pages
│   │   │   ├── category/      # Category browsing
│   │   │   └── home/          # Home page with image grid
│   │   ├── layout/       # Layout components
│   │   ├── state/        # Context and state management
│   │   ├── dto/          # Data transfer objects
│   │   └── logics/       # Business logic utilities
│   └── public/           # Static assets
└── server/               # Backend Node.js application
    └── src/
        ├── controllers/  # Request handlers
        ├── models/       # MongoDB schemas
        ├── routes/       # API routes
        └── service/      # Database and business logic

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• MongoDB
• npm or yarn

Frontend Setup

1. Navigate to the frontend directory:

cd pixel

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The frontend will be available at http://localhost:5173

Backend Setup

1. Navigate to the backend directory:

cd server

2. Install dependencies:

npm install

3. Create a .env file with your configuration:

PORT=3000
MONGODB_URI=your_mongodb_connection_string

4. Start the development server:

npm run dev

The backend API will be available at http://localhost:3000

📱 Available Scripts

Frontend (pixel/)

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build

Backend (server/)

• npm run dev - Start development server with nodemon
• npm run build - Build TypeScript to JavaScript
• npm start - Start production server

🗄️ Database Models

User

• firstName, lastName - User's name
• email - Unique email address
• password - Hashed password
• category - User's preferred categories
• images - User's uploaded images

Image

• title - Image title
• img - Image URL/path
• likes - Array of user IDs who liked the image
• category - Array of category IDs
• views - View count
• downloads - Download count

Category

• name - Category name
• description - Category description
• coverImage - Category cover image

🔧 API Endpoints

User Routes (/user)

• POST /register - User registration
• POST /login - User authentication

Image Routes (/image)

• GET / - Get all images
• POST / - Upload new image
• GET /:id - Get specific image
• PUT /:id - Update image
• DELETE /:id - Delete image

🎨 Key Components

ImagePopup

• Full-screen image viewing
• Maximize/minimize functionality
• Image statistics display
• Related images grid
• Category tags

HomeGrid

• Responsive masonry layout
• Dynamic column adjustment based on screen size
• Image cards with hover effects

TopBar

• Logo and branding
• Search functionality
• Navigation links
• User authentication status

🔒 Environment Variables

Create a .env file in the server directory:

PORT=3000
MONGODB_URI=mongodb://localhost:27017/pixel
JWT_SECRET=your_jwt_secret_key

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

👨‍💻 Author

Ushan Chamod