Lots of Lists

This project is intended for you to show that you can build and deploy a complete Web app with separate front- and back-end projects, using Vue's CLI and NodeJS as detailed here.

Submitting Your Work

This project will be added to your portfolio_NETID repository so there is one single place we can go to find your work during the semester. To submit this project:

• create a separate folder for the assignment that itself contains
  • separate folders for the front- and back-end projects
  • a README file describing your work on the assignment (in plain text or Markdown format)
• then add a very obvious link on your Portfolio web site to the front-end's dist/index.html file generated by Vue CLI's build command

Your page must

• display the way you expect in the latest version of Google's Chrome browser on the course Gitlab server
• be written following standard Coding Conventions that is validated using ESLint (JavaScript) or online (Accessibility)
• not produce any warnings (within your control) or errors in the DevTools Console

Specification

Lists are everywhere on the web: a blog is a list of journal entries, a course is a list of assignments and topics, a store is a list of things to buy, Twitter is a list of tweets, comments are a list of text, and YouTube is a list of videos (with comments). Lists can be organized in a variety of ways based on the elements of their items. Lists can also be associated with other lists or hierarchical in nature (as detailed in the Trello assignment). All of these sites also have lists of users that have their own personal view of these lists. In short, lists are very flexible and very easy to represent.

Your task is to display, sort, and filter a list of things returned from an API that represents something of interest to you (perhaps even the data you plan to use for your final project). As an optional challenge, you can combine data from multiple API sources in your list (e.g., images or sounds representing each thing, additional details about each thing combined from other sources, translations or analysis of each thing, etc.).

Back-end

Create a basic JavaScript program that

• fetches data from a third-party API (e.g., JSON or some other format if that is not available)
• returns its own JSON data containing just the items and fields the front-end needs to display (i.e., it should handle sorting, filtering, pagination, etc. to minimize the amount of data sent out rather than coding that logic in the front-end)
• uses the proper standard HTTP status codes to describe the returned values (specifically error cases with separate JSON data)

Using NodeJS with

• JavaScript modules (to import/export specific values)
• the package Express to respond to requests for specific URLs (perhaps with parameters) to act as a simple web server
• the package Morgan to log URL requests and other aspects of interactions with your server to aid you in debugging.
• a separate JavaScript file exporting only variable declarations for any authentication tokens or passwords required by your third party API
  This information should not be hardcoded within your source code (both so it is easier to change if necessary and to exclude it from GIT as would be typical for a public project).

As a final step, the back-end project will be hosted on Heroku rather than your personal machine so it allows your web app on Gitlab Pages to be available at all times.

Front-end

The exact look of your website is up to you to design but, at the very least, it should:

• Describe the things being displayed
• Display a list of things based on the third party API supplying data to the back-end
• Display computed stats about the list of things (e.g., how many total there are, how many out of that total are currently displayed, categories or other fixed information about the list's items, etc.)
• Allow users to organize the list in different ways (e.g., all items, filtered, sorted, by categories, etc.)
• Allow individual items in the list to be viewed separately from the main list (e.g., expanded, in a modal or sidebar, etc.) and with more details (e.g., display extra fields, the complete text, etc.)
• Allow users to refresh the data (i.e., request an updated response from the back-end)

As usual we strongly suggest develop your iteratively: making a few small changes at a time and, perhaps, the Vue CLI Sandbox.