Giters

alhen002 / art-gallery--app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

About

Languages

Language:JavaScript 100.0%