Art Museum Project: Phase 1

Understand the Problem

In this project, you'll build a frontend-only React app that showcases art galleries using data from the Harvard Art Museum API. Users will be able to navigate through galleries and view individual art pieces using React Router. This is great practice for learning routing, data rendering, and basic React architecture.

Devise a Plan

This setup phase ensures you have all necessary tools and files before you build the app. Here's a simplified whiteboard plan:

  1. Create a new React app with Vite using the App Academy template
  2. Install React Router
  3. Run the development server to confirm everything renders
  4. Set up routing with a default 404 route in App.jsx
  5. Create a data folder and import harvardArt.js seed data
  6. Log the data to confirm its structure

Carry Out the Plan

Create the React Project

npx tiged appacademy/aa-react18-vite-template art-museum

Install React Router

cd art-museum
npm install react-router-dom

Start Development Server

Edit src/App.jsx to render:

function App() {
  return <h1>Hello from App</h1>;
}

Then run:

npm run dev

Visit http://localhost:5173. You should see "Hello from App".

Set Up Routing in App.jsx

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '*',
    element: <h2>Page Not Found</h2>
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

Create and Import Seed Data

Inside src, create a folder called data and inside it, create a file called harvardArt.js.

Run this command from the root of your project:

curl https://appacademy-open-assets.s3-us-west-1.amazonaws.com/Modular-Curriculum/content/react-redux/topics/intro-to-react/projects/art-museum/harvardArt.js > src/data/harvardArt.js

Then import the object in App.jsx:

import harvardArt from './data/harvardArt';
console.log(harvardArt);

Check your browser console at http://localhost:5173 to confirm the structure. You’ll use the records and objects fields throughout the project.

Look Back and Refactor

You now have a functioning React app with React Router and seed data. This solid foundation will support all future development for the Art Museum Project.

Art Museum, Phase 1: Home Page

Understand the Problem

Now that the base routing is set, you need to add a new route for the home page /. This route will display a title and description introducing the user to the Art Museum app.

Devise a Plan

  1. Update your route array to include a new route object for path /
  2. Use a fragment <></> or wrapper to return both heading and paragraph
  3. Test that / shows the home page, and unknown paths still show the 404

Carry Out the Plan

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <>
        <h2>Harvard Art Museum</h2>
        <p>Look, but Don't Touch. Please select a Gallery in the navigation bar.</p>
      </>
    )
  },
  {
    path: '*',
    element: <h2>Page Not Found</h2>
  }
]);

This update shows the Home Page when users visit http://localhost:5173 and the 404 for anything else.

Look Back and Refactor

This simple route structure allows us to build out each page within the app in a scalable way. In the next phases, we’ll replace inline JSX with full components and add navigation to galleries and individual artwork.

Extra Tip

When pasting text with special characters like apostrophes (e.g., Don’t), use &apos; to avoid JSX parser errors. Example:

<p>Look, but Don&apos;t Touch</p>