Your project is to build a single-page application that displays books using React. You should use create-react-app freeshelf to create the application and build up from there.
The finished product will look like the included wireframe. When the information for that book is clicked, the section expands to show additional information about the book. When it is clicked again, it should collapse back to the original view. This behavior is commonly referred to as a disclosure, as described in this ARIA practices document with examples.
The page should display a list of books with a thumbnail display of information for each book, including:
- title
- author
- short description
- image of the book's cover
The additional information shown in the expanded view should include:
- URL
- publisher
- publication date
- expanded description
Note that you will need to handle cases where not all the data is available. In these cases, make sure your UI design can accommodate missing or problematic data and/or supply placeholder images or text so that your page won't look broken without it.
You will need a list of books to display in your application. A list is contained at the end of this file; you can copy-and-paste it into your code.
-
Completion
- 1 (Unsatisfactory): does not show all information or does not show/hide information
- 2 (Satisfactory): meets all requirements under "Directions". Shows all books and shows/hides their extra information
- 3 (Exemplary): meets all requirements, is nicely styled, uses the
aria-expandedattribute
-
React Usage
- 1 (Unsatisfactory): uses DOM manipulation or HTML directly to show and hide information
- 2 (Satisfactory): uses JSX, conditional rendering, and state to show and hide information
- 3 (Exemplary): breaks application into multiple components in a useful way
[
{
"title": "You Don't Know JS Yet: Getting Started",
"author": "Kyle Simpson",
"url": "https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/get-started",
"shortDescription": "If you're just getting into programming and/or JavaScript, this book will briefly explore what you need to get up and going.",
"coverImageUrl": "https://github.com/getify/You-Dont-Know-JS/raw/2nd-ed/get-started/images/cover.png",
"publisher": "Frontend Masters",
"publicationDate": "Jan 2020",
"detailedDescription": "It’s easy to learn parts of JavaScript, but much harder to learn it completely—or even sufficiently—whether you’re new to the language or have used it for years. With the 'You Don’t Know JS' book series, you’ll get a more complete understanding of JavaScript, including trickier parts of the language that many experienced JavaScript programmers simply avoid. The series’ first book, Up & Going, provides the necessary background for those of you with limited programming experience. By learning the basic building blocks of programming, as well as JavaScript’s core mechanisms, you’ll be prepared to dive into the other, more in-depth books in the series—and be well on your way toward true JavaScript."
},
{
"title": "Learning JavaScript Design Patterns",
"author": "Addy Osmani",
"url": "https://addyosmani.com/resources/essentialjsdesignpatterns/book/",
"shortDescription": "With Learning JavaScript Design Patterns, you’ll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language.",
"coverImageUrl": "https://addyosmani.com/resources/essentialjsdesignpatterns/cover/cover.jpg",
"publisher": "O'Reilly",
"publicationDate": "2012",
"detailedDescription": "With Learning JavaScript Design Patterns, you’ll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to keep your code efficient, more manageable, and up-to-date with the latest best practices, this book is for you. Explore many popular design patterns, including Modules, Observers, Facades, and Mediators. Learn how modern architectural patterns—such as MVC, MVP, and MVVM—are useful from the perspective of a modern web application developer. This book also walks experienced JavaScript developers through modern module formats, how to namespace code effectively, and other essential topics."
},
{
"title": "An Introduction to Programming in Go",
"author": "Caleb Doxsy",
"url": "http://www.golang-book.com/books/intro",
"shortDescription": "This book will teach you how to write computer programs using a programming language designed by Google named Go.",
"coverImageUrl": "http://www.golang-book.com/public/img/intro/cover.4194045234.png",
"publisher": null,
"publicationDate": "2012",
"detailedDescription": "Computer programming is the art, craft and science of writing programs which define how computers operate. This book will teach you how to write computer programs using a programming language designed by Google named Go. Go is a general purpose programming language with advanced features and a clean syntax. Because of its wide availability on a variety of platforms, its robust well-documented common library, and its focus on good software engineering principles, Go is an ideal language to learn as your first programming language."
},
{
"title": "Learn to Program",
"author": "Chris Pine",
"url": "https://pine.fm/LearnToProgram",
"shortDescription": "When you program a computer, you have to 'speak' in a language your computer understands: a programming language. ",
"coverImageUrl": "https://pine.fm/images/LTP2_cover.jpg",
"publisher": "Pragmatic Bookshelf",
"publicationDate": "2009",
"detailedDescription": "When you program a computer, you have to 'speak' in a language your computer understands: a programming language. There are lots and lots of different languages out there, and many of them are excellent. In this tutorial I chose to use my favorite programming language, Ruby."
},
{
"title": "Clojure for the Brave and True",
"author": "Daniel Higgenbotham",
"url": "https://www.braveclojure.com/clojure-for-the-brave-and-true/",
"shortDescription": "In Clojure for the Brave and True, you'll learn to wield this awesome language to its fullest!",
"coverImageUrl": "http://nostarch.com/sites/default/files/styles/uc_product/public/clojure_cover-front_final.png",
"publisher": "No Starch Press",
"publicationDate": "2015",
"detailedDescription": "For weeks, months—nay!—from the very moment you were born, you’ve felt it calling to you. At long last you'll be united with the programming language you've been longing for: Clojure! Clojure’s popularity continues to grow, with companies like Netflix using it to build everything from complex, distributed systems to simple microservices to user interfaces. In Clojure for the Brave and True, you'll learn to wield this awesome language to its fullest!"
},
{
"title": "Joy of Elixir",
"author": "Ryan Bigg",
"url": "https://joyofelixir.com/toc.html",
"shortDescription": "Joy of Elixir is a gentle introduction to programming, aimed at people who already know some things about computers, but who have little-to-no programming experience.",
"coverImageUrl": "https://joyofelixir.com/images/small-cover.png",
"publisher": "Leanpub",
"publicationDate": "2017",
"detailedDescription": "Joy of Elixir is a gentle introduction to programming, aimed at people who already know some things about computers, but who have little-to-no programming experience. If you think you don't know enough about computers, well you got here already and that's enough! This book will teach you the core concepts of the Elixir programming language in a fun and enjoyable way. If you're completely new to programming and you want to learn how to make a computer do things using the power of programming and you want to experience some joy while doing it, then read on!"
},
{
"title": "Building Skills in Object-Oriented Design",
"author": "Steven F. Lott",
"url": "https://buildingskills.itmaybeahack.com/oodesign.html",
"shortDescription": "The coffee-shop reason for reading this book is to provide the beginning designer with a sequence of interesting and moderately complex exercises in OO design.",
"coverImageUrl": "https://buildingskills.itmaybeahack.com/_images/Cover3x4.jpg",
"publisher": null,
"publicationDate": null,
"detailedDescription": "The intent of this book is to help you, the beginning designer, by giving you a sequence of interesting and moderately complex exercises in OO design. The exercises are not focused on a language, but on a design process. The exercises are not hypothetical, but must lead directly to working programs. This book can also help managers develop a level of comfort with the process of OO software development. This book allows the reader to explore the processes and artifacts of OO design before project deadlines make good design seem impossible."
},
{
"title": "Structure and Interpretation of Computer Programs",
"author": "Harold Abelson, Gerald Jay Sussman, and Julie Sussman",
"url": "https://mitpress.mit.edu/sicp/",
"shortDescription": "Wizard Book n. Hal Abelson's, Jerry Sussman's and Julie Sussman's Structure and Interpretation of Computer Programs (MIT Press, 1984; ISBN 0-262-01077-1), an excellent computer science text used in introductory courses at MIT. So called because of the wizard on the jacket. One of the bibles of the LISP/Scheme world. Also, less commonly, known as the Purple Book.",
"coverImageUrl": "https://ieeexplore.ieee.org/ebooks/6276830/6276830.jpg",
"publisher": "The MIT Press",
"publicationDate": "1984",
"detailedDescription": "Structure and Interpretation of Computer Programs has had a dramatic impact on computer science curricula over the past decade. This long-awaited revision contains changes throughout the text. There are new implementations of most of the major programming systems in the book, including the interpreters and compilers, and the authors have incorporated many small changes that reflect their experience teaching the course at MIT since the first edition was published. A new theme has been introduced that emphasizes the central role played by different approaches to dealing with time in computational models: objects with state, concurrent programming, functional programming and lazy evaluation, and nondeterministic programming. There are new example sections on higher-order procedures in graphics and on applications of stream processing in numerical programming, and many new exercises. In addition, all the programs have been reworked to run in any Scheme implementation that adheres to the IEEE standard."
}
]