VisionGrid

Home page search results image cards

Project Overview

VisualGrid is a client-side web app for visual project planning and goal-setting. Users can search the Unsplash API, save images to a personalized board, and attach notes or goal statements to each item. The app includes modal image views, a full-screen slider, localStorage persistence, and tools for organizing, annotating, and revisiting saved images.

⇡ Back to Top

Technologies Used

Tools	Version
Node.js	v22.20.0
npm	10.9.3
Express.js	^5.2.0

Getting Started

1. Clone this repo and install dependencies:

# Clone this repo
git clone https://github.com/Kernix13/vision-grid-express.git

# Change into project directory
cd vision-grid-express

# Install dependencies
npm install

# Open the project in VS Code
code .

2. Create a .env file in the project root.
3. Copy the lines in .env.example and paste them into your newly created .env file.

CLIENT_ID=your_unsplash_client_id
PORT=port_number

4. Replace the string your_unsplash_client_id with your Unsplash API Client ID, and port_number to ``8080` or with the port you want to use.
5. Delete the file .env.example.
6. Start the development server:

npm run dev

7. CTRL + click the link http://localhost:8080 in the terminal to open up localhost on port 8080:

Server is running http://localhost:8080

You can now search for images, save images to your board page, add notes for each saved image, etc.

8. (OPTIONAL): Run Biome for linting and formatting checks on your files:

npm run check

Getting an Unsplash API key

1. Go to the Unsplash website & click the hamburger icon in the top right.
2. Under the Product heading, click Developers / API.
3. Click the button labeled "Register as a developer".
4. Fill out the form and click Join to register your account: first name, last name, email address, username, and password.
5. Click the button labeled "You apps".
6. Click the box with the text "New Application".
7. Under the heading "API Use and Guidelines", check all of the checkboxes, Read the Terms of Use documentation then click Accept terms.
8. You are presented with a popup asking to enter an Application name and Description. Enter a name and description then click "Create application".
9. Go to your application's detail page by clicking on your app name. You can get there by clicking Your apps on the developers main page.
10. Scroll down to the Keys section that displays application id, access key, and secret key. The access key is the API key that you will need for this project

• NOTE: During this process you will be sent an email to the email address you entered above. Click the link in the email to "Confirm your account". You also may need to go back to the developers page and "Your apps" again to get to your Keys.

⇡ Back to Top

How It Works

Home / Search Page

Home page image modal with Save, Remove and navigation buttons

• Image Search
  • Enter a search phrase to fetch 12 images from the Unsplash API.
  • Past search terms are saved and can be revisited, each automatically loading the next page of results.
• Image Cards
  • View each image in compact form in the cards that are created from your search.
  • Save or remove images directly from the cards.
  • Click any image to view a larger, aspect-correct version in a modal.
• Modal Viewer
  • Navigate through all images currently loaded on the page.
  • You can also save or remove images from within the modal.
• Load More
  • The "Load More" button fetches the next page of images for the current search.

Vision Board Page

Board page thumbnails strip on right & image with editable text field

• Saved Images Display
  • View all saved images in a large, clean layout.
  • Each image includes an editable text area for notes persisted via localStorage.
• Thumbnail Strip
  • See all saved items in a compact strip for quick navigation.
  • Clicking on any thumbnail takes you to that image on the page.
  • Reorder saved images by moving them up or down.
  • Delete images and their notes from your project.
  • Choose to show or hide the image in the lightbox slider (WIP)
  • Click the page image or editable text box to close the thumbnail strip.
• Affirmation / Goal Statement
  • Click any saved image on the page to open a modal with a larger view.
  • Add an affirmation or goal statement for that image (115-character limit).
  • Navigate to other saved images within the modal to quickly update each affirmation.
  • These affirmations are shown in the full-screen slider instead of your page notes.
• Lightbox Slider
  • A full-screen modal that cycles through saved images.
  • The slider also displays the image's affirmation/goal statement created in the modal.
  • Adjustable timing between slides (6, 8, 10, 15 or 20 seconds).

⇡ Back to Top

Project Structure

/
├── README.md
├── assets/                 # Images used in README only
├── LICENSE
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── biome.json              # Biome formatter, linter, and code-quality config
├── package.json            # Dependencies and scripts
├── server.js               # Express server handling API requests
├── .env.example            # Template for required environment variables in .env
├── .gitattributes          # Enforces consistent line endings and other Git settings
├── .gitignore              # Specific files and folders Git should ignore
├── .github/                # GitHub Issue and PR templates
├── public/
│   ├── index.html
│   ├── board.html
│   ├── about.html
│   ├── robots.txt
│   ├── sitemap.xml
│   ├── css/
│   ├── js/
│   │   ├── index.js        # Main file for index.html
│   │   ├── board.js        # Main file for board.html
│   │   ├── about.js        # Main file for about.html
│   │   ├── api/            # Fetch function(s) for backend /api/photos
│   │   ├── ui/             # UI behavior functions
│   │   └── utils/          # Shared/utility functions
│   ├── images/
│   └── fonts/              # DM Sans and Inter .woff2 files

⇡ Back to Top

Contributing

Contributions are welcome! If you'd like to help improve this project, please read our contribution guidelines on how to get started, our workflow, and code style expectations.

Future Improvements

• Add a confirmation modal for the "clear all" button
• Add an option for the user to remove all saved images
• Allow user to uncheck showing any saved image in the lightbox slider
• Save everything to a MySQL database instead of localStorage
• Allow user to fetch only landscape, portrait, or square-ish image formats
• Allow the user to have more than one board
• Get the image slider to go full-screen
• Dark/Light mode option
• Add a quote generator API that pairs an inspirational quote with each image
• Add a music API for motivational music during lightbox slideshow

License

This project is licensed under the MIT License.

⇡ Back to Top