FRONT-END CHALLENGE

You will be creating a front-end project using a third-party API. You can use HTML/CSS, EJS, REACT JS, Django or Flask.

Requirements

Your project must satisfy the following requirements:

• Be built using HTML/CSS, EJS, REACT JS, Django or Flask.

• Must use a third-party API.

• Runs without errors

• If you participated in the backend challenge you cannot use the same third-API or the API that you created in that challenge

• It must be mobile-friendly

• Must have an about page where it talks about the project and how to maneuver through your project

• Have a repository under your GitHub account.

• For styling, you can use Bootstrap, Material UI, Semantic UI, etc.

• Be deployed to Heroku, Netlify, Github, or Vercel (THIS IS REQUIRED)

• Have good, clean code with comments on what is happening throughout your code. Use the auto-formatter regularly!

• Demonstrate a good commit history. The more commits you make, the better it is for you when something goes wrong.

• Must have a well-document README (THIS IS REQUIRED)

• • A description of your project. Basically, what is it, and what does it do.
  • A README must have instructions on how to install and run your project locally.
  • A list of technology used in your project

FAQ

What data should I use?

There is a listing below to look at and view.

Why is it hard to find data?

You are having this moment because you don't have a solid plan, or the idea you have isn't going the way you wanted it to, which is okay. Just find some functioning data and make it work. Don't spend the majority of time searching for data. If you can't pull data within 24 hours, then find something more manageable. You got this!

If I find some data, now what?

When choosing datasets or data, make sure to look through it and check to see if you can access it and show it in your console.log, then make it show on your website.

Do I need to do full CRUD?

No, you don't need full CRUD in this project.

What if I suck at design?

Look at websites, find a design you like, and try to mock the design. Plan it out; you got this! Here are two links to lists of amazing sites.

• https://www.webdesign-inspiration.com
• https://www.awwwards.com

Make sure to diagram things out to help you through this. There is a diagram below to show what is possible.

FrontEnd Inspirations

• Weather API - Weather API (inspiration: https://webdesignledger.com/30-cool-weather-mobile-app-designs-inspiration )
• Drink app using Drink API (thedrinkblog.com)
• Meal App (inspirational food sites: https://www.sitebuilderreport.com/inspiration/food-websites )
• Wiki Type page
• Movie or Books App
• E-commerce/Store (Using API to view products)
• Dashboard
• Stock Market system

API Resources:

• JSON Placeholder - https://jsonplaceholder.typicode.com
• REQ | RES - https://reqres.in
• Mockup API - https://www.mockaroo.com

API List

• Public Apis: https://github.com/public-apis/public-apis
• API List: https://apilist.fun
• No Auth needed listing: https://mixedanalytics.com/blog/list-actually-free-open-no-auth-needed-apis
• Random Data API - https://random-data-api.com

Easy:

• Pokemon API - https://pokeapi.co/
• Meal DB - https://www.themealdb.com/
• Cocktail DB - https://www.thecocktaildb.com/
• Countries - https://restcountries.eu/
• Fake Store API - https://fakestoreapi.com/
• OMDB - https://www.omdbapi.com/ (requires token)
• Studio Ghibli - https://ghibliapi.herokuapp.com/
• iex cloud - https://iexcloud.io/console/ (requires token)
• Giphy: developers.giphy.com
• Open Library - https://openlibrary.org/developers/api
• Makeup Heroku - http://makeup-api.herokuapp.com/ (Warning it is on Heroku it can be asleep)
• RestAPIExample - https://dummy.restapiexample.com/ (Can get too many requests error)
• Star Wars API - https://swapi.dev/ - Watch out for the last slash in the url & watch for https vs http

Medium:

• Marvel API - https://developer.marvel.com
• Open Weather API - https://openweathermap.org/api - Takes from a couple of hours to a day for key.
• NASA: api.nasa.gov

Hard:

Spotify https://developer.spotify.com/documentation/web-api/ (Can lead to confusion, but it's doable)

Other Resources:

• Excalidraw - (https://excalidraw.com) Drawing app to help with diagrams.
• Diagrams- (https://app.diagrams.net) entity relationship diagram software
• Diagram.io - (https://dbdiagram.io/home)
• DB Designer - (https://www.dbdesigner.net)
• Diagrams.net - (https://app.diagrams.net)
• LucidChart - (https://www.lucidchart.com/pages/examples/database-design-tool)
• Drawsql - (https://drawsql.app)
• Github Projects (Check your repo and go to the project tab) (https://docs.github.com/en/issues/organizing-your-work-with-project-boards)
• Jira - (https://www.atlassian.com/software/jira) Project management. A wonderful kanban board and project management tools that can be attached to GitHub and bitbucket.

PLANNING & LAYOUT:

Let's say you want to build out a webpage to look like this. you can break down the code and draw it out.

Diagram of a sample plan using Excalidraw - (https://excalidraw.com) and it doesn't have to be exactly like this: