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

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 which takes you to Unsplash Developers.
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

Tech Stack

This is the current state of my project as of December 17th, 2025:

Tech	Use
	Meta + SEO tags: title, description, Open Graph, and Twitter card tags Site identity: full favicon set (.png, .ico, and sizes for cross-browser support) Semantic HTML, skip-to-main link, and use of hidden, inert, aria-* and data-* attributes Supporting files: sitemap.xml, robots.txt
	Mobile-first design with media queries using various breakpoints Layout techniques: Flexbox, Grid, and CSS positioning (relative, absolute, fixed) Animations using CSS transitions and @keyframes CSS Nesting, custom properties for colors, @font-face for Google fonts
	ES Modules, async code using the Fetch API, and localStorage for client-side persistence Modern JavaScript features: array destructuring, spread operator, and template literals High-Order Array methods used: find, findIndex, filter, forEach, map Event handling: click, submit, focusout, input, transitionend, and DOMContentLoaded listeners; event delegation for dynamic elements
	Local development server environment Environment variables (process.env) for API keys and configuration API routing and static file serving via Express.js
	Managing dependencies with package.json Configuring and running npm scripts for development workflow Packages used: Express, CORS, dotenv, compression, Biome
	Express server for basic routing and for handling Unsplash API requests securely Static file serving via express.static middleware CORS and gzip/deflate compression using third-party middleware
	Version control using add > commit > push workflow Local feature branch development with local merges Clean commit history with descriptive commit messages
	Issues with labels for task tracking and bug reporting Branch-based development using pull requests and merge commits Contributing: MIT License, CONTRIBUTING.md, and CODE_OF_CONDUCT.md .github folder for Issues and Pull Request templates
	Use the integrated terminal for Git commands, package management, and running Node.js/NPM scripts Resolved local branch merge conflicts using VS Code's built-in Merge Editor

⇡ 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

---

Capstone Requirements

Feature Implementation

• Integrate an API into your project: Fetch images from the Unsplash API: /api/photos
• At least one media query: 8 different media query breakpoints across 5 CSS files
• Have at least two pages/routes: index.html, board.html, about.html

Features List (Table 1 & 2)

Requirement	Implementation
Analyze data that is stored in various data structures	Retrieve API JSON, save as localStorage objects and strings, used in many functions
Create a function with 2 or more params with a return value	createThumbnailBtn in thumbnails.js checkUserInput in checkUserInput.js setLocalStorage in localStorage.js
Display information about the data in your app	Images displayed in 3 different sizes in image cards and in modals Image alt_descriptions added as img alt attribute Add image id as id and data-id attributes to various elements
Persist data to local storage, display/use that data	Fetched and saved image data from Unsplash API as an array of objects in localStorage 5 user interactions/values as strings, arrays, and objects saved to localStorage Images displayed on the page and in modals Settings form data saved to localStorage
TABLE 2: Create a Node.js web server using Express.js	Express server with 2 query parameters and middleware

⇡ Back to Top

Contributing

Contributions are welcome! If you'd like to help improve this project, please read our CONTRIBUTING.md for 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
• Use srcset for DOM images on different devices for improved performance
• 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

Use of AI

I asked ChatGPT for help on project ideas. I gave it a list of my hobbies/interests and its Unsplash idea was the most interesting to me.

ChatGPT writes better copy than I do so I asked it to write some of the text in my README and for my HTML pages.

README Copy & Other Files

1. It generated the "Project Structure" directory tree block above.
2. I had boilerplate for CONTRIBUTING.md from previous projects. It wrote the content I have in there now for this project and the paragraph of text for that section.
3. I asked ChatGPT about including a .env.sample or .env.example file. It told me that .env.example was more commonly used so I created that file.
4. ChatGPT gave me an outline for the "How it Works" section
5. I asked ChatGPT about including robots.txt and sitemap.xml files. It suggested to add them and wrote the contents for sitemap.xml.
6. ChatGPT edited some of my bullet points in my Tech Stack section, and wrote the points for the tech I am unfamilar with (Node, npm, and Express)

HTML Copy

1. ChatGPT wrote the H1 title and H2 sub-title for index.html.
2. It wrote the H2 heading in the footer.
3. On the About page, it wrote the text for the Intro, Quick Start, and Tips & Best Practices sections. It also edited/revised my bullet points in the other sections on about.html.

CODE

1. ChatGPT helped me with the code to "contain" the images in the image cards, specifically using aspect-ratio and object-fit:

.result-image {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

2. Although I was able to save the contenteditable text to localStorage, I could not figure out how to preserve line breaks. ChatGPT suggested innerHTML:

// in boardEvents.js > saveUserText:
imgObj.notes = editable.innerHTML.trim();

// in savedImages.js > addSavedImagesToDom:
p.innerHTML = img.notes || 'You can add or edit notes here...';

⇡ Back to Top

Acknowledgments & Resources

The following resources were helpful during the design and development process

Code/Technical:

1. Code:You module lesson material, suggested videos, and Q&A in Slack.
2. MDN CSS Docs for syntax and examples for JavaScript, CSS, and some HTML attributes.
3. Traversy Media Discord server: help with npm packages, specifically Biome.
4. Express Crash Course by Traversy Media: Specifically using req.query in server.js.
5. React Full Course for free 2024 - BroCode: his example of array destructuring for moving To-Do items was what I needed for reordering saved images on the board page.
6. Google DevTools Lighthouse reports for finding and fixing Performance and Accessibility issues.
7. JavaScript30 course by Wes Bos: Day 1, JavaScript Drum Kit video on using the transitionend event type for my transitions for the image card removals.
8. Guide to Finding Closest Target: This was useful for the issues I was having handling event delegation.

Design & UI:

1. Traversy Media Favicon Generator for generating my favicons.
2. Gary Simon UI Design Course for design fundamentals, and component & layout design.
3. Kevin Powell videos on CSS Grid, modals, and many other useful CSS properties.
4. Google Fonts: Downloaded the woff2 files for DM Sans, Inter, and Allura.
5. What Font Chrome extension for verifying that my Google fonts were loading, and checking the displayed font size and weight for elements.
6. Bootstrap icons for SVG icons used on each HTML page.

Accessibility:

1. WebAim Contrast Checker for making color palette choices.
2. VisBug Chrome extension for quickly checking contrast ratio for page elements.
3. WAVE Evaluation Tool Chrome extension for a web accessibility report on my pages.

License

This project is licensed under the MIT License.

⇡ Back to Top