VisualGrid – Visual Project Planning App Using the Unsplash API

VisualGrid is a client-side web app for visual project planning and goal setting that helps users collect inspiration and organize ideas using images from the Unsplash API.

Users can attach notes or goal statements to each image and revisit their saved ideas later. The app includes modal image previews, a full-screen slider, and localStorage persistence for managing and organizing saved images.

Home page image modal with Save, Remove and navigation buttons

Table of Contents

1. Features
   1. Search Page
   2. Vision Board Page
2. Live Demo
3. Technologies Used
4. Installation and Usage
   1. Getting an Unsplash API key
5. Project Structure
6. Future Improvements
7. Contributing
8. License

Features

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

Live Demo

Try the project here: https://vision-grid.onrender.com/

Technologies Used

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

Installation and Usage

1. Clone this repo:

   git clone https://github.com/Kernix13/vision-grid-express.git
   cd vision-grid-express

2. Install dependencies

   npm install

3. Create a .env file in the project root.

   cp .env.example .env

4. Add the replacement env-vars to the .env file then delete .env.example:

   CLIENT_ID=your_unsplash_client_id
   PORT=port_number

5. Start the development server:

   npm run dev

6. 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 using the Unsplash API, save images to your board page, add notes for each saved image, etc.

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

   npm run check

Getting an Unsplash API key

1. Create a free Unsplash account.
2. Visit the Unsplash Developer Portal and click on Your apps.
3. Click the New Application button and follow the prompts.
4. Scroll to Keys and copy your Access key.

⇡ 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

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

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.

License

This project is licensed under the MIT License.

⇡ Back to Top