Pixarium

An Image Gallery App built with React.

Table of Contents

• Demo
• Features
• Technologies Used
• Getting Started
• Available Scripts
• How It Works
• Future Improvements
• Challenges and Learnings

Demo

You can view a live demo of the project here.

Features

• Upload images by providing image URLs.
• Display images in a responsive grid layout.
• Real-time addition of images to the gallery.
• Simple, intuitive UI for image management.

Technologies Used

• React (for building the UI)
• JavaScript/JSX (for logic and structure)
• CSS Grid (for responsive layout)
• Vite (for fast development environment)

Getting Started

Follow these steps to run the project locally:

Prerequisites

Ensure that Node.js and npm are installed on your machine. If not, you can download them from here.

Installation

1. Clone the repository:

   git clone https://github.com/Jiteshiyu/Pixarium.git
   cd Pixarium

2. Install the dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:3000 to see the app in action.

Available Scripts

• npm run dev: Start the development server.
• npm run build: Build the app for production.
• npm run preview: Preview the production build locally.

How It Works

The app is built with React and uses the useState hook for managing the state of the image list.

Here’s a breakdown of its functionality:

1. Image Display: Images are displayed in a grid layout using CSS Grid, with responsiveness for different screen sizes.
2. Real-Time Updates: Once an image is added, it instantly appears in the gallery without requiring a page refresh.
3. Image Upload: Users can enter the URL of an image and upload it by clicking the "Upload Image" button.

Future Improvements

• Drag-and-Drop Upload: Allow users to upload images by dragging them into the app.
• Image Upload via File: Allow users to upload images from their local file system instead of just via URL.
• Image Deletion: Add functionality to remove images from the gallery.

Challenges and Learnings

• CSS Grid: Learning to implement a responsive grid system that adjusts to various screen sizes.
• State Management: Using React’s useState to dynamically update the list of images and properly re-render the components.
• Componentization: Structuring the app into reusable components like Uploader, ImageGrid, and ImageItem to maintain clean and maintainable code.

Support

Give a 🌟 to this repo if you liked it .

Connect with me