Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

Assessment 2

The learning objectives include:

· Use modern JavaScript (ES6 or higher)

· Write single page applications that function like multi-page apps

· Use React components

· Use React props

· Use Hooks, including useState, useEffect, useContext [optional]

· Handle events

· Use React Router for client side routing

· Query REST APIs

· Use Fetch/Async/Await to retrieve data from APIs.

· Use third party components e.g. tables, graphs

· Design user interface including the layout, colors, fonts etc

· Use CSS for component styling

· Make user interface responsive

· Apply best programming practices

· Test to ensure the application functions properly and meets the specified requirements

· Write test cases and results

Introduction:   

This assignment requires that you develop a web application to allow users to view and analyse data available via online APIs. You will need to develop a client-side web application, in which you will query the APIs and present the information in a form that is helpful to the user such as text, data, images, tables, charts, maps, lists etc.

In this specification, we will not be too prescriptive, but we necessarily have to focus around some technologies, as otherwise we cannot support you in learning the material and debugging problems. You should see the development of the client for this application as a series of steps, with each one of those steps corresponding to an increase in sophistication, and in the possibility of a higher grade.  [Note: you should feel free to exceed the specification if you wish to explore the technologies.]

A React web application consists of components that are responsible for rendering UI elements and handling user interactions. Here are typical components in a web application, with QUT home page as an example:

Header component: This component typically contains the branding and navigation elements for your application.

Main component: This is the main content area of your application. It might contain subcomponents for displaying data or other types of content.

[optional] Sidebar component: If your application requires a sidebar for navigation or other purposes, you might include a sidebar component.

Footer component: This component typically contains information about the application, such as copyright notices or links to external resources.

In addition to components, your application should also include state management with useState, and/or useContext [optional] hooks, and side effect management with useEffect hooks. You also need to use React Router or other routing library for handling client-side routing.

When building a React web application, it's important to follow best practices for performance and accessibility. You need to test your application thoroughly to ensure that it works on a variety of devices (e.g. PC, Mobile Phones) and platforms (Windows, Linux, Chrome, Edge, Safari) .

Technical requirements:

Programming language: JavaScript (ES6 or higher)

Libraries and frameworks: React, React Router, third-party components of your choice

Browsers for testing: Chrome, Edge, Safari [optional]

Devices for testing: PC, Mobile phones

Below are detailed technical requirements:

· Use  Create React App (create-react-app) to create the initial project structure. You can add more folders later on.  

· Use modern JavaScript (ES6 or higher): let, const, not var.  Do not use TypeScript due to the extra learning curve involved. You may use TypeScript if you insist and you know that already but the teaching team will not offer any support.

· Write single page application, not traditional multi page applications

· Use JSX  to define the structure and content of the user interface.

· Use React functional components, not class components

· Use React props to pass data between components

· Use Hooks for state and effect management,  including useState, useEffect, useContext [optional], no Redux due to code overhead, complexity and learning curve.

· Handle events in React, not in HTML directly

· Use React Router for handling client side routing

· Use Fetch/Async/Await to retrieve data from APIs. You must not use XMLHttpRequest, JQuery's Ajax function,  due to code overhead, complexity and learning curve. You may use axios if you wish but it is your own responsibility to learn and use it properly.

· Retrieve data from REST APIs, not local data files

· Use third party components  for tables, graphs etc (flex is fine.  You can but you do not need to create your own responsive table)

· Use CSS for component styling, minimize inline styling

· Make user interface responsive to make sure you pages look fine on PC and mobile phones

· [recommended] use Visual Studio Code to write and debug your React code

Functional  Requirements:  

The requirements for the client side of this assignment are pretty straightforward. The complications come because for most of you it is the first time that you have done something like this. At the most basic level, you must develop a client side web application that allows the user to work with multiple endpoints of your chosen APIs.  Using two or more APIs and integrate them into one meaningful web application will attract more marks.

Your main requirement is to build a website in React with data from online APIs.  The website if front-end only , no backend code or your own database needed.

The essential requirements here are that the responses to the queries should use the techniques that you have learnt in the first half of the semester. You should think very carefully about the forms that allow us to enter the data and the components that display the responses, and the ways in which we move between them. We expect that you should be able to successfully implement all the functionalities specified. You should choose suitable interface elements to display and interact with the information.  The overall design of the site is up to you, as long as the pages/views are clean and modern looking.

Overall your web application should have at least four (4) pages, including Landing page, Item listings Page, Item details Page, and Search.

The main tasks are listed below.

Task highlights

1. Landing page/view, including a hero image and some text

2. Navigation|Menu

3. Search, with a form that allows users to search for items based on certain criteria (selected from a drop-down list, entered into a text box, or by automatically determining the user’s location using HTML5 Geolocation API).

4. Table [ and/or List,   if Table is not suitable], to show search results. From the results table, users should be able to link to a more detailed screen for individual items.  

5. Individual item page/view, with details about the item itself

6. Chart for data visualization

7. Styling, for consistent look and feel, including layout, color, fonts. Each page should have at least header, footer, main content, optional sidebar.

8. Form for accepting user input, e.g. Signup/login/logout page, [front end design and test only, no need to submit content to the backend. You can use preventDefault to stop a form submission or a link click. You may log the event.]

You can also get some ideas from the discussion below.  

A typical React web application consists of several pages, components, and modules. The number of pages in a web application can vary widely depending on the specific needs of the application. However, some pages are common in most web applications, including:

1. Home Page: This is the landing page of the application and usually contains an overview of the application's features, services, or products, as well as navigation links. A hero image is often shown on the top of the page.

2. Product/ Service Listings Page: This page displays products/services that the application offers.

3. Product/Service Details Page: This page displays detailed information about a specific product/service.

4. Search Results Page: A page that displays search results based on user's search criteria.

5. Error Page: This page is shown to the user when there is an error or issue with the application.

6. Login/Register Page: These pages provide the user with options to create an account or sign in to an existing one. It could also include password recovery options.

7. Contact Us Page: This page provides the user with options to contact the company or support team. It typically includes a contact form, phone number, email address, and other relevant information.

8. About Us Page: This page provides information about the company, team, or organization behind the application. It could also include the company's mission statement, values, and history.

9. Dashboard page:  This page  is a personalized view of the user's account, showing relevant data and information based on the user's actions within the application and analytics.

10. User profile page: This page typically includes information about the user, as well as options for the user to manage their account and interact with other users.  User information typically includes the user's name, profile picture, location, bio, and other relevant details.

Requirements explanation with Stock application as an example

Landing Page:   

Below is the initial landing page for a stock application. It should have a small piece of information describing the stock exchange and well as links to a stocks and search page.  You should also include a header and an image. You should make wise choices for how to present all the information together.  

Home | Stocks | Quote | Price History                                                           Stock Prices     Welcome to the Stock Market Portal. You may click on stocks to view all the available companies or Quote to get the latest price information by stock symbol, or choose Price History  or search to sample from the most recent  one hundred days of information for a particular stock.

Router/Navigation:  

Your application must allow the user to navigate cleanly between the query and user functions. The precise organisation will depend on your design, but these must be clearly separated in a menu.

For each route in this client side application you should think about how you are going to handle it – have a look at the React Router examples in the lectures and in the Styling Components worksheet. You may use a basic HTML menu but the use of React routing will attract more credit.  

Search:

We will also look very favourably on applications which allow the user to select or filter on the client side and have the table and the charting update in response to these changes.

Table Components:    

The table structures are crucial to the successful display of the data from the server. Using a sophisticated table component like ag-Grid-react means that we can do a lot of things in the client application without going back to the server. So, if we perform a query – especially if it includes all of the available products/services – what can we offer the user without going back to the server?  

Chart:    

For more sophisticated endpoints which offer a lot of data, line or bar charting or map or some other mechanism for showing the data will be very well received. You may use standard chart libraries to produce these, and there may well be a mix of table and chart displays.

Form:

Although you do not have your own working backend yet, we expect you to implement the signup/ login/logout forms in this application.  These forms will be for front end design and test only in this assignment, no need to submit the form content to the backend.  You can use preventDefault to stop the default form submission behavior and handle the submission yourself in JavaScript.  You may log the form information to be submitted.

You must include client-side form validation using JavaScript and [optional] HTML5 validation attribute (e.g. required, validation). Your code should include validation for at least numeric input, alphabetic input, email formats, and [optional] dates. You can include validation for any other types of input that you deem appropriate. Your validation should provide helpful error reporting for the user if validation fails.

 Choice of Widgets:    

Each endpoint call needs parameters and you will need to choose how to specify them. For example, you may choose to use dropdown list, text area etc.

You may also use ordered list, unordered list etc to present your information.

All of your pages should include a main content area, a header, a navigation menu, and a footer.  You may also include a sidebar.  Your navigation menu must contain the links to the other pages on the website.  Your navigation menu might be part of the header or part of the sidebar.

Design

You should consider your target audience when designing both the functionality and visual style of the website. When designing your website you should also ensure that:

· Your site has a unified design with a consistent look and feel achieved via appropriate use of colours, fonts, images, etc. and a common page layout (including at least a main content area, a header, a footer and a menu).

· You use either a flexible or centred page design that works for users with very large screens  e.g. 1024 pixels wide or very small e.g. mobile phones.

Good Programming Principles

You must develop code that adhere to standard good programming principles. These principles include:

Developing valid code;

Separation of content and styling via CSS;

Including suitable metadata and titles in the HTML pages;

Modularizing code into logical methods, components, files and directories;

Ensuring validation of user input at client side;

Ensuring that data is gracefully transferred between client and server by minimizing interaction with the APIs;

Developing readable code with respect to formatting; and

Including sufficient and useful comments in your code.

The Data:

You may use any dataset available online to build a web application using REACT, as long as you achieve the learning objectives described in Section 3 of this specification.

Key requirements of the data

· All data must be from online APIs.  No data can be from your own local files.

· You need to record which APIs you use in your report.

· You should use REST APIs that can return data in JSON format

· You are encouraged to use real-world APIs to build your application so that you can easily demonstrate your application to your future employer. 

The REST APIs:

An application programming interface (API), is a set of programming code that queries data, parses responses, and sends instructions between one software platform and another.

You need to use at least one REST API to build your application. You are encouraged to use two or more APIs to build a meaningful and innovative web application.

FREE Public APIs

There are a lot of APIs available online.  We recommend you to retrieve data from the FREE APIs available on RapidAPI (https://rapidapi.com/)  or the APIList (https://apilist.fun/)

RapidAPI is the world’s largest API Hub with over 40K APIs.  You may use FREE public APIs offered for developers by RapidAPI  here:  https://rapidapi.com/collection/list-of-free-apis

One example FREE API is the Alpha Vantage API, which is one effective way to receive stock, ETF, forex, technical indicators, and cryptocurrency data.

Another example is the WeatherAPI, which provides extensive APIs that range from the weather forecast, historical weather, future weather, weather alerts, air quality data, IP lookup, and astronomy through to sports, time zone, and geolocation.

There are also many FREE APIs available here: https://apilist.fun

One example is the Open Movie Database (OMDb) API:  https://apilist.fun/api/omdb

The OMDb API is a RESTful web service to obtain movie information.

The Cocktail DB is a free API to get data on cocktails, you can search for recipes, images of specific cocktails, ingredients, filter by alcoholic, non alcoholic and more.  This FREE dataset is also available on RapidAPI.

The Open Charge Map API (https://openchargemap.org/site/develop/api?ref=apilist.fun#/ ) provides access to the world’s largest registry of charging locations for electric vehicles as Open Data.

Note: IF you are not sure, you may discuss your choice of APIs and you planned application with the teaching staff before you jump into coding.

Submission: 

Your submission needs to be in 3 parts.

The Code:   

You should create a directory called client. To a large extent the structure of your applications within these directories is up to you, but we will expect an appropriate separation and organisation of resources. This is to some extent prescribed for you by the usual structure of a client app that you inherit from create-react-app. If in doubt, show a tutor and get some feedback. We will not be impressed if everything sits in the top directory of the client app.  

Note: delete node_modules before submission. Now, you might have noticed that Node apps involve installation of packages, and that this leads to the installation of node_modules, and that eventually these take up a certain amount of space. Please delete them. And then look around through the directory structures again, and delete any others that you missed the first time. We don’t want to see them, we don’t want to store them, and you don’t want to wait while they upload. 

Report:  

We will expect a short report and user guide, generally running to 10 pages or so, including screenshots. Your report must include the following sections:   

1. Introduction – telling us what was implemented and what wasn’t, showing a few screenshots to illustrate the functionality. This will probably occupy a page or a bit more.   

2. Technical description of the application. This section is to allow you to talk about the APIs used for graphing, to show us any tricky data flows, and to discuss technical issues that caused you problems. This is especially important if something doesn’t actually work.   

3. Testing and limitations – test plan, results, compromises.   

4. References   

5. Appendix: brief user guide

6. Appendix: self-checking against CRA

The report should be entitled such as   report.doc

Video Demonstration:   

You will need to record a video demonstration of your app, showing all of the functions of your application. In particular you need to:

1. Go to the landing page, then navigate to other pages

2. Show that your page/view has a proper title in the title bar

3. Show navigation menu

4. Show a table of items, including sorting and paging,  or a  list of items

5. Show a graph (bar chart, line chart, maps etc), including interacting with graph

6. Show the ability to perform a search

7. Show all the items (e.g. stocks) with their associated detail

8. Show the ability to limit items by certain category (e.g. industry sector of stocks).

9. Show the ability to get information for a particular item

10. Show the ability to limit item from a particular date or date range (for time series data) or location (for spatial data)

11. Show your application is responsive

12. Show possible errors and error handling

The video is normally 2-5 minutes long.  

The video should be entitled such as  video.mpg