Code Monkey home page Code Monkey logo

artistry's Introduction

ArtisTry

This application is deployed on heroku: ArtisTry Heroku.

An application for budding art connoisseurs, to peruse and procure a personalized collection of paintings.

GitHub:

This project was bootstrapped with Create React App and uses data retrieved from the WikiArt API.

Contributors:

Learning Goals

  • Designing an application from scratch.
  • Researching and effectively using a previously unknown technology.
  • Building applications in React.
  • Implementing React Hooks.
  • Testing React with Jest and React Testing Library.
  • Developing solid practices for project management.
  • Using Router to manage URL states.
  • Using Express to build a micro-service.
  • Managing API fetch calls and writing endpoints in the microservice.

Project Overview

The primary emphasis of this project was on researching and effectively implementing a technology to which we had not previously been exposed. Our "stretch technology" was React Hooks, which we were able to leverage to manage state and component lifecycle methods.

Main Page

Upon loading the application, our enterprising enthusiasts will be greeted with an array of the most commonly sought-out artworks in our collection.

Painting Information

You must know more! If you need more information about a work of art simply click on the image and the information available about the art will be displayed. It's good stuff to know. Who knows who might need to impress?

Artist Gallery

You've suddenly discovered an artist of which you were not previously aware and barely evaded a social catastrophe. If you'd like to see more works of art by your new favorite artist that you can't shut up about, simply click on the artist's name on the painting details page.

Favorite Painting

If you love a painting, make sure to save it to your personal collection. Look at you! You're developing a sense of taste.

My Gallery

If you would like to see your personal art collection, simply select the "My Gallery" button. Is there a particular work that you can't get out of your head? This is where you can come back to look at it over and over and over again until you go mad!

Explore

So knowledgable about famous work of art that you're no fun at parties? Time to broaden your horizons. Use the "Explore" button to see a seemingly random selection of paintings.

Technologies Used

  • React
  • React Hooks
  • Router
  • React Testing Library / Jest
  • Express
  • JavaScript
  • HTML/CSS

Systems/Practices

  • git/Version Control
  • ARIA

artistry's People

Contributors

carflor avatar cwefso avatar josephhaefling avatar

artistry's Issues

Integration Tests

  • add integration test for app based on displaying the painting page on click

Linter

  • install linter
  • apply linter rules
  • lint the project

ReadMe

  • prep readme with

  • abstract

  • list of technologies used

  • img/gif of app in use

  • link of deployed app if possible

  • collaborators

Testing List

  • - make a list of all tested components and what has not been tested

  • - write missing tests for new hooks

  • - App
    Unit tests

  • - display nav

  • - display loading message

Integration Tests

  • - display paintings once fetch resolved

  • - change path location when painting is clicked

  • - when a user clicks a painting, and then clicks the favorite button, that painting should be saved to favorites

  • - when a user clicks the "Explore" button, they should be routed to the random-art path

  • - when a user clicks the "My Gallery" button, they should be on the user-gallery path

  • - Gallery
    Unit tests

  • - display loading message

  • - display paintings on load

  • - Hooks

    • - useArtistInfo
    • - use PaintingInfo
    • - usePaintings
    • - usePaintingSummary
  • - PainterInfo
    Unit tests

  • - display artist name

  • - display nav

  • - render gallery component

  • - Painting
    Unit tests

  • - display painting

  • - display nothing if image is broken (??)

  • - PaintingInfo
    Unit tests

  • - display title, artist name, and year to dom

** Integration Tests **

  • - add to favorites

  • - remove from favorites

  • - Random Art
    Unit tests

  • - display nav

  • - display loading message

  • - displays gallery of paintings.

Integration Tests

  • - display paintings once fetch resolved

  • - reload page when explore is clicked

  • - User Gallery

Random Art Button

  • create new hook to make search fetch request
  • create link on Nav for random art
  • populate paintings with response from fetch

Tabability

Because the broken links are hidden the tab sometimes tabs to a hidden element.

Style Gallery component

  • fix up the nav
  • fix up the gallery display
  • make sure images are all showing up correctly
  • add tab ability to paintings and buttons
  • pick a hover effect for buttons
  • pick a hover effect for paintings
  • detail the page with font
  • detail the page with possible background?
  • any color for detailing? changes to frame color?

Apply Router to Painter Page

  • create link for back btn page to re-render main gallery

  • create link for painter info page possibly out of the name link - - other ideas?

  • create links for other painter pages based on related artists?

  • create link for movement page? perhaps aggregate movement artists? brainstorm organization to the page relations.

Divide page parts into Components

  • split the page into its different components

  • create component folders for each with their own styling and testing files

  • Painting Info Page

  • Painter Info Page

  • My Gallery Favorites Page

  • Top Paintings Page? or just a filter?
    Could be a toggle filter btn on main?

  • Movement Info Page?

Escher Search Bug

  • mc escher does not string to url appropriately, replace '.' formats

O'Keefe Bug

  • current gallery for O'Keefe is unavailable due to an issue with public domain

  • come up with a workaround

  • perhaps display a "unavailable artworks" message

Button Additions

  • remove all back btns
  • replace with title page btn that return user to homepage

Setup MicroServer

  • create express server for microservice

  • create POST functionality for adding favorites

  • create fetch functionality for favorites

Favorites Bug

If a painting doesn't have all of the required information it can't be saved to favs!

Fix two waitFor broken tests App

  • fix "should change path locations when a painting is clicked"

  • fix "โ— App โ€บ should display all paintings once fetch is resolved"

Style the selected painting page

  • get basic styling for selected painting page

  • detail the page to look themed with main gallery page

  • create a 3D overlay effect to lay like realistic frame popping out of wall

  • hover effect - tilt - add opacity

  • add tabs ability for the page btn and links

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.