Art Museum Project

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

Follow these detailed steps to set up your environment:

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

Replace the contents with:

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.

Extra Information

• React Router Docs: https://reactrouter.com/en/main
• Harvard Art Museum API: https://www.harvardartmuseums.org/collections/api

This kind of setup is often used in real-world scenarios where APIs provide data and frontend frameworks handle all the rendering. Think of it like building the museum's digital tour interface, where visitors can explore galleries without ever leaving the page—React swaps out the exhibits behind the scenes.