FusionFrame

Setting Up Your Environment

If you haven’t set up a React project yet, use Create React App:

bashCopy codenpx create-react-app fusion-frame
cd fusion-frame

Step 2: Create Basic Components

We’ll create three main components: PhotoGallery, UploadPhoto, and PhotoItem.

1. Create PhotoItem.js

In the src folder, create a new file called PhotoItem.js:

jsxCopy code// src/PhotoItem.js
import React from 'react';

const PhotoItem = ({ photo, onDelete }) => {
  return (
    <div style={styles.photoItem}>
      <img src={photo.url} alt={photo.name} style={styles.image} />
      <button onClick={onDelete}>Delete</button>
    </div>
  );
};

const styles = {
  photoItem: {
    margin: 10,
    display: 'inline-block',
    textAlign: 'center',
  },
  image: {
    width: 150,
    height: 150,
    objectFit: 'cover',
  },
};

export default PhotoItem;

2. Create UploadPhoto.js

Now create another file called UploadPhoto.js:

jsxCopy code// src/UploadPhoto.js
import React, { useState } from 'react';

const UploadPhoto = ({ onUpload }) => {
  const [file, setFile] = useState(null);

  const handleChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        onUpload({ name: file.name, url: reader.result });
        setFile(null);
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleChange} accept="image/*" />
      <button type="submit">Upload Photo</button>
    </form>
  );
};

export default UploadPhoto;

3. Create PhotoGallery.js

Next, create the main gallery component PhotoGallery.js:

jsxCopy code// src/PhotoGallery.js
import React from 'react';
import PhotoItem from './PhotoItem';

const PhotoGallery = ({ photos, onDelete }) => {
  return (
    <div style={styles.gallery}>
      {photos.map((photo, index) => (
        <PhotoItem
          key={index}
          photo={photo}
          onDelete={() => onDelete(index)}
        />
      ))}
    </div>
  );
};

const styles = {
  gallery: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
};

export default PhotoGallery;

Step 4: Main Application Component

Now, let’s integrate everything in App.js.

jsxCopy code// src/App.js
import React, { useState } from 'react';
import UploadPhoto from './UploadPhoto';
import PhotoGallery from './PhotoGallery';

const App = () => {
  const [photos, setPhotos] = useState([]);

  const uploadPhoto = (photo) => {
    setPhotos([...photos, photo]);
  };

  const deletePhoto = (index) => {
    const newPhotos = photos.filter((_, i) => i !== index);
    setPhotos(newPhotos);
  };

  return (
    <div style={styles.container}>
      <h1>FusionFrame: Photo Gallery</h1>
      <UploadPhoto onUpload={uploadPhoto} />
      <PhotoGallery photos={photos} onDelete={deletePhoto} />
    </div>
  );
};

const styles = {
  container: {
    padding: '20px',
    textAlign: 'center',
  },
};

export default App;

Step 5: Run Your Application

Now you can start your application. In your terminal, run:

bashCopy codenpm start

Step 6: Explore and Enhance

You now have a basic React application called “FusionFrame” that allows you to upload and manage a gallery of photos. You can enhance it by adding features like:

• Image previews before uploading
• Categorizing photos
• Storing photos in local storage for persistence

Summary

In this tutorial, you created a simple photo gallery app using React. You learned how to manage state, create reusable components, and handle file uploads.