Insta Spots - Image Gallery App

Overview

Insta Spots is a simple React application that displays a collection of images in an interactive gallery. Users can preview images, like posts, and edit their profile.

Features

• Profile Management: Users can update their profile name, title, and avatar.
• Image Gallery: Displays a set of image cards that users can preview in a modal.
• Like Feature: Users can like/unlike images.
• New Post Creation: Users can add new images with titles to the gallery.
• Modals: Used for editing profile, creating new posts, and image preview.

Prerequisites

• Node.js (Latest LTS recommended)
• npm (Comes with Node.js)
• A code editor (e.g., VS Code)

Steps to Setup

1. Clone the repository

git clone https://github.com/nohgu21/Insta_Spots_Assignment.git

2. Navigate to project directory

cd Insta_Spots_Assignment

3. Install dependencies

npm install

4. Start development server

npm start

Usage Guide

Editing profile

1. Click "Edit Profile" in the profile section.
2. Update name, title, or avatar.
3. Click "Save Changes."

Exploring image gallery

1. Click "Edit Profile" in the profile section.
2. Update name, title, or avatar.
3. Click "Save Changes."

Creating new post

1. Click "+ New Post."
2. Upload an image and enter a title.
3. Click "Post" to add it to the gallery.

Troubleshooting

• ✔ Ensure all image paths in src/assets/images/ are correct.
• ✔ Confirm App.css is correctly imported in App.js.
• ✔ Run npm install to ensure dependencies are installed.

Technologies used

• React.js
• JavaScript (ES6)
• CSS
• FontAwesome for icons

Author

Ezeonuogu Victoria
AltSchool Tinyuka 2024