/art-gallery--app

Primary LanguageJavaScript

New Next Project

This project was created from the neue fische next template.

You can 🔗 use this template on CodeSandbox or locally by running this command in your Terminal:

npx -y ghcd@latest neuefische/web-exercises/tree/main/templates/next my-app -i

Development

Local Development

To work locally, please install the dependencies using npm i first.

Run npm run dev to start a development server and open the displayed URL in a browser.

Use npm run test to run the tests.

CodeSandbox Cloud

Select the "Preview: 3000" tab to view this project.

Select the "Tests: logs" tab to view the tests.

The npm run dev and npm run test scripts run automatically.

Scripts

You can use the following commands:

  • npm run dev to start a development server
  • npm run build to build the project
  • npm run start to start a production server
  • npm run test to run the tests
  • npm run lint to run the linter

User Stories

User Story 1: List of all Art Pieces

Value Proposition

As an art enthusiast

I want to see a list of all art pieces

so that I can get an overview of all art pieces.

Acceptance Criteria

  • All art pieces are displayed as a list
  • Each art piece's image is displayed
  • Each art piece's title is displayed
  • Each art piece's artist is displayed

Tasks

  • Fetch all art pieces with SWR in pages/index.js
  • Create the component ArtPieces to render a list
  • ArtPieces props: pieces
  • Create the component ArtPiecePreview
  • ArtPiecePreview props: image, title, artist

User Story 2: Spotlight Piece

Value Proposition

As an art enthusiast

I want to see a spotlight piece

so that I can get inspirational highlights.

Acceptance Criteria

  • One art piece is picked at random to show as a spotlight piece
  • The art piece image is displayed
  • The art piece artist is displayed

Tasks

  • Write function to pick one art piece at random
  • Create the component Spotlight
  • Spotlight props: image, artist

User Story 3: Separate Pages and Navigation Bar

Value Proposition

As an art enthusiast

I want to be able to switch between the spotlight and list view

so that I can navigate the app easier.

Acceptance Criteria

  • A navigation link labeled "Spotlight" is displayed
  • A navigation link labeled "Pieces" is displayed
  • Clicking "Spotlight" shows the SpotlightPage
  • Clicking "Pieces" shows the ArtPiecesPage

Tasks

  • Move the data fetching logic to pages/_app
  • Find a solution for global state handling to have the art pieces available on all pages
  • Adapt the page pages/index: rename the function to SpotlightPage and have it render only the Spotlight component
  • Create the page pages/art-pieces/index that renders the ArtPieces component
  • Create the component Navigation that renders all navigation links
  • Create the component Layout that renders the Navigation component
  • Apply the Layout component in pages/_app

User Story 4: Art Piece Details Page

Value Proposition

As an art enthusiast

I want to be able to see the full art piece with detail information

so that I can learn everything about the piece.

Acceptance Criteria

  • Clicking an art piece from the list shows the detail page
  • The art piece image is displayed
  • The art piece title is displayed
  • The art piece artist is displayed
  • The art piece year is displayed
  • The art piece genre is displayed
  • A back-button is displayed
  • Clicking the back-button shows the list view

Tasks

  • Create the component ArtPieceDetails
  • ArtPieceDetails props: image, title, artist, year, genre
  • Create the page pages/art-pieces/[slug] that renders ArtPieceDetails
  • Read the query parameter slug from next/router
  • Use the slug to find the art piece to display

User Story 5: Favorites

Value Proposition

As an art enthusiast

I want to mark art piece pieces as favorites

so that I can find them easier.

Acceptance Criteria

  • The favorite-button is displayed in the spotlight view
  • The favorite-button is displayed in each entry in the list view
  • The favorite-button is displayed in the details view
  • Clicking the favorite-button on a non-favorite piece saves it as a favorite
  • Clicking the favorite-button on a favorite piece removes it from favorites

Tasks

  • Create an additional state artPiecesInfo to save further information for art pieces
  • Make the artPiecesInfo state globally available for all pages
  • Store the favorite flag in the artPiecesInfo
  • Reference art pieces by slug in the additional state
  • Create the component FavoriteButton
  • FavoriteButton props: isFavorite, onToggleFavorite
  • Render the FavoriteButton component in the Spotlight, ArtPiecePreview and ArtPieceDetails component

User Story 6: Favorite Listing Page

Value Proposition

As an art enthusiast

I want to see a comprehensive list of all my favorite art pieces

so that I can have an overview of all of my favorites.

Acceptance Criteria

  • A navigation link labeled "Favorites" is displayed
  • Clicking the "Favorites" shows the FavoritesPage
  • All favorite art pieces are displayed as a list
  • Each art piece's image is displayed
  • Each art piece's title is displayed
  • Each art piece's artist is displayed
  • Each art piece's is displayed with active favorite-button

Tasks

  • Create the page pages/favorites that renders the ArtPieces component
  • Use data from the artPiecesInfo state to filter for all favorite art pieces
  • Pass the list of all favorite art pieces via prop pieces to the ArtPieces component

User Story 7: Comments for Art Pieces

Value Proposition

As an art enthusiast

I want to write comments for art pieces

so that I can note my ideas regarding the work.

Acceptance Criteria

  • The detail view has a list of comments for this art piece with the headline "Comments"
  • Each comment's text is displayed
  • Each comment's date and time is displayed
  • The detail view has an input field to write a comment
  • The detail view has a submit button labeled "Send"
  • After submitting the form, the comment is appended to the list of comments

Tasks

  • Store comments per art piece in the artPiecesInfo state
  • Create a CommentForm component
  • CommentForm props: onSubmitComment
  • Create a Comments components
  • Comments props: comments

User Story 8: Persist Favorites and Comments in the Browser

Value Proposition

As an art enthusiast

I want to persist my favorites and comments

so that the data will not be lost when I close the app.

Acceptance Criteria

  • All favorite flags and comments added to art pieces are persisted across browser reloads

Tasks

  • Install the package use-local-storage-state
  • Use the useLocalStorageState hook to store the artPiecesInfo state

User Story 9: Show Color Palette

Value Proposition

As an art enthusiast

I want to see the color palette of an art piece

so that I can find color inspiration.

Acceptance Criteria

  • The art piece detail page shows a list of all colors used in the image
  • The colors may be displayed as circles, squares, ...

Tasks

  • Pass the colors given by the API to the ArtPieceDetails component
  • Use the color hex-code in a styled component to render an element with this color as background