j-garrett / react-photos

Create full stack photo viewing app.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TODO: Update ignores on compile file so you don't have tons of duplicates!

Full Stack Photo Viewer

How to use this

This document breaks down building a simple MVP of an image view application by stages. There is an accompanying image for each stage. The intent is to build an MVP using and any frameworks you'd like!

This app has different levels of difficulty, each represented by a different mockup. 0 is the easiest, 4 is the most difficult.

Planning

  • For each stage, take time to plan and design what you would need for that one stage.
  • This may include:
    • Drawing a database schema.
    • Drawing the event loopor lifecycle for the front-end framework of your choice.
    • Drawing an architecture diagram for your app.

Stages

Stage 0 MVP - Image Viewer

  • [Complete] Display titles of images in a list.
  • [Complete] When a title of an image is clicked, display image, title, rating in large image display

Stage 1 MVP - Update Rating

  • Add a drop down menu for users to change their rating of an image. Make sure the rating change persists in the database!

Stage 2 MVP - Add Images via Input

  • Add an input field for title and url and allow users to add their own image.
  • Ensure that after an image is successfully added, the list of images is updated.

Stage 3 MVP - Add Favorites

  • Images with a rating of 4 or 5 should also be displayed in a separate favorites list.
  • If an image rating is changed such that it would be added to or removed from favorites, ensure the favorites list is updated accordingly.

Stage 4 MVP - Add Custom UI for Rating

  • Replace drop down with icons - when icons are clicked, update rating, ensuring all previous functionality is preserved

About

Create full stack photo viewing app.


Languages

Language:JavaScript 91.9%Language:HTML 8.1%