/Final-Project-Phase1

Final-Project-Phase1

Now comes the great task we have all been waiting for!!!! Class today you start the great project of our time, your first of many of course.


Let’s begin with this:

You must build a web app that utilizes external API data.

Mandatory Requirements:

  1. Be built with HTML, CSS , and Javascript.
  2. Use Axios to retrieve data from an external source, and render such data into the DOM.
  3. Use flexbox, or Grid, No Bootstrap (You can use other CSS frameworks).
  4. Implement responsive design on 3 screen sizes, desktop, tablet and mobile using media queries.
  5. Host on either Netlify or Surge.
  6. If your API requires the use of an API Key, an ENV file is required.
  7. In regards to the API, the project must show at least 3 different API uses/endpoints, for example: Giphy: Search, Trending, and Random Gif's.

Additional Requirements (Procedural)

  1. A developed Read.me with markup ( visit https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax for instructions on how to use markup in your Read.me). More details will be put below on what is required in your Read.me
  2. Daily Git commits documenting progress.
  • Now you need to research the API you wish to use.
  • Be careful if an API uses Oauth, or membership as it could take a large amount of your time.
  • Do look for an API that is free and public.
  • Do ensure that you understand the documentation for the API.
  • Always read the documentation for the API, as that cannot be stressed enough.
  • Now as I will furthermore explain below, you will have to pitch me your project idea before you can work on it. The proposal requirements are below

The API you choose, has to work.

  • You have to demonstrate to me, using Postman that data can be retrieved from the API. Your project will not get approved if the API you choose does not function.

  • Now you have to create a wireframe of the project you will be working on, You can do lo-fi or hi-res, to demonstrate that you have thought out the structure of the task you will be working on.

  • Figma, or Adobe XD or Marvel app must be used to create your mockups.

Note: You must have mockups of your project in, desktop, tablet and mobile view.

Creating a wireframe will give you a road map to which gives you a structural vision for your project.

In the real world, developers will spend time planning how their web app will come out before they start. Consider this the start of a required habit.

You will need this for your proposal

Now your Read.me must contain:

  1. Title: working title for your app (Have some fun with this).
  2. Description: a paragraph summarizing the features, functions and goals for the app.
  3. Wireframes: Adobe XD makes a link you can paste on your Read.me, or for marvel app you can upload it to imgur and use the link from imgur on this.
  4. API: Which API you will be using.
  5. Requirements: write out how you are meeting the mandatory requirements with your project.
  6. Additional: What are additional features or extras you will consider adding on to this project, for example local storage, particles js, threejs, a second API, to name a few.

Resources: