Skip to content

Changes to requested technical changes #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
junaid-connect wants to merge 4 commits into
base: master
Choose a base branch
from
+57 −16
Open

Changes to requested technical changes #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d7dfaf3
docs: changed task instructions into brief
junaid-connect Aug 31, 2021
fa1e205
feat: added broken accessibility page to review
junaid-connect Aug 31, 2021
a59ceaf
docs: updates to technical test format
junaid-connect Aug 31, 2021
1e0c907
docs: applied requested changes and typos
junaid-connect Aug 31, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 12 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
Frontend Technical Test for [TeamITG](https://teamitg.com/)
# Frontend Technical Test for [TeamITG](https://teamitg.com/)

It is a quick coding challenge. It is important to note that it is not by any means a test, and there are no trick questions. We want to understand how you write code and solve problems. You are allowed to use search engines or StackOverflow during the session.

## System requirements
You’ll want to ensure you have the following already installed on your local machine before getting started with the test:
Expand All @@ -12,23 +14,17 @@ You’ll want to ensure you have the following already installed on your local m
npm install && npm start
````

## Task Instructions
1. API Implementation
* You will receive a list of general vehicle information by making an initial api request to endpoint `/api/vehicles.json`
* You are now required to traverse the API and make further calls on a detail endpoint (`apiUrl`) to get vehicle-specific details such as price and description
* Ignore vehicles with broken apiUrl or without any price information
* All API related logic should be implemented inside `getData()` available at `src/api/index.js`
## Brief
We have a simple API that returns a list of vehicles as a JSON array. We would like you to read the API and display it as per the given designs ([Mobile](https://raw.githubusercontent.com/connect-group/frontend-technical-test/master/designs/mobile.png), [Tablet](https://raw.githubusercontent.com/connect-group/frontend-technical-test/master/designs/tablet.png), [Desktop](https://raw.githubusercontent.com/connect-group/frontend-technical-test/master/designs/desktop.png)). In addition, the list of vehicles should be ordered by the lowest price. Feel free to either use our pre-configured boilerplate or any other pre-configured environment for React or VanillaJS that you are familiar with.


### API End Points
List of all vehicles:<br />
http://localhost:8080/api/vehicles.json<br />

2. Using `getData()` in a React component
* React component `VehicleList` is configured to use `getData()` through a custom hook `useData`
* If you prefer to use class-based component, then the rule to make a single function to obtain all vehicles through `getData()` needs to be respected
* No other components are allowed to make any network request
Each vehicle has an “apiUrl” which contains the detail of a vehicle e.g. the price or description. Example of a detail endpoint:<br />
http://localhost:8080/api/vehicle_fpace.json

3. UI Design
* You are required to produce the following designs on different viewports to match as closely as possible, ready for a designer to review
* [Mobile](https://raw.githubusercontent.com/connect-group/frontend-technical-test/master/designs/mobile.png)
* [Tablet](https://raw.githubusercontent.com/connect-group/frontend-technical-test/master/designs/tablet.png)
* [Desktop](https://raw.githubusercontent.com/connect-group/frontend-technical-test/master/designs/desktop.png)

## Browser Support
We expect the solution to work in the latest version of Chrome
Expand Down
45 changes: 45 additions & 0 deletions public/fix-accessibility-issues.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<div class="main">
<div class="main__heading">Page Heading</div>

<div class="section section--articles">
<div id="section_heading" class="section__heading">Latest Articles</div>

<!-- repeating articles -->
<div class="article">
<div class="article__heading">Article Heading</div>
<img src="/img.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="button">Show more</div>
<div class="article__more" hidden>
<p>
◦ Lorem ipsum dolor sit amet <br/>
◦ Lorem ipsum dolor sit amet <br/>
◦ Lorem ipsum dolor sit amet
</p>
</div>
<a href="/lorem-ipsum">Find out more</a>
</div>

</div>

<div class="section section--newsletter">
<div id="section_heading" class="section__heading">Sign up for our newsletter...</div>

<form class="newsletter" action="/form-submit/" method="post">
<input id="email" type="text" placeholder="Email address" />
<div class="button">Submit</div>
</form>

</div>
</div>
</body>
</html>