Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
57 changes: 28 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,38 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next

## Getting Started

First, install dependencies:
First, run the development server:

```bash
npm install
# or
yarn
```

## Api key
* Create account and generate API key for Pexels API https://www.pexels.com/join-consumer/
* Add .env.local file to your root folder and inside add your Pexels key to the API_KEY variable.

## Running development server
```bash
npm run dev
# or
yarn dev
```

## Tasks

#### Add list of images
- Display images by 5 in row
- After clicking image, image should be visible in the modal. Also, author of the photo should be displayed in right bottom corner
- Modal can be closed by clicking 'X' icon, outside of photo and pressing 'Esc' key on the keyboard.

#### Searching images
- Add search field above image list
- Images should be filtered by typed text.
- Request should be fetched when user stopped typing (not for each letter ;) )
- User should be able to choose how many images is visible per page. Available values: 10, 25, 50,
- List should be paginated

#### Terms and condition page
- Add link in the footer of app 'Terms and Condition'. Link should provide to another page
- Get content for page from http://legalipsum.com/?count=2
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

**Api key**

add .env.local file to your root folder and inside add your pexels key to the API_KEY variable.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

21 changes: 18 additions & 3 deletions components/Layout.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,33 @@
import Link from 'next/link';
import { Container, Menu } from 'semantic-ui-react';
import { Icon } from 'semantic-ui-react'

const Layout = ({ children }) => {
return (
<>
<Menu>
<Menu.Item><Icon name="camera"/> Interview Frontend App</Menu.Item>
<Menu.Item>
<Link href="/">
<a style={{color: 'initial'}}>
<Icon name="camera"/> Interview Frontend App
</a>
</Link>
</Menu.Item>
<Menu.Item position="right"><Icon circular inverted name="user"/></Menu.Item>
</Menu>
<Container>
{ children }
</Container>
<Container textAlign="center">
@Interview Frontend App 2021
<Container
textAlign="center"
style={{padding: '3rem'}}
>
<p>@Interview Frontend App 2021</p>
<div>
<Link href="/terms-and-conditions">
<a>Terms &amp; Conditions</a>
</Link>
</div>
</Container>
</>
)
Expand Down
23 changes: 23 additions & 0 deletions pages/terms-and-conditions.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import {
Container,
Header,
} from 'semantic-ui-react';

const Terms = () => {
return (
<Container style={{width: '800px', margin: '5rem 0'}}>
<Header
as="h1"
textAlign="center"
style={{marginBottom: '4rem'}}
>
TERMS AND CONDITIONS
</Header>
<p>Your Obligations Regarding Distribution. Application of This License Agreement does not bring the other work which contains a complete machine-readable copy of the Standard or Modified Versions of the preceding Paragraph, in the Source Code. Any Modification which You contribute must be conspicuously included in the Source form. Permission for Use and Modification Without Distribution It is therefore usually in your license (except to note that you delete from the Program, the distribution and/or modification of the printed materials or in combination with its exercise of rights under this License.</p>
<p>This License and the following acknowledgment: &quot;This product includes open source and binary forms, with or without modification, is permitted to copy and distribute the Package if it fails to comply with the Work otherwise complies with the information you received it. Distribution of only part of the Original License. Distribution of the circumstances described in Section 3.4 and must make Source Code file due to statute, judicial order, or regulation which provides that the Source Code of the section as a relevant directory) where a Digital Document File with or without modification, are permitted to copy the Work constitutes direct or contributory patent infringement, then any Derivative Works that You delete from the Original Program and assumes all risks associated with the Source Code and the following steps: Make a reasonable fashion, credit the author(s). Where such credit is commonly given through page histories (such as a result, the Commercial Contributor would have been properly granted shall survive any termination of this License in any way to achieve your goal while meeting these conditions, and telling the user when used interactively with that Base Interpreter, the replacement component of the Derived Work.</p>
<p>Derived Works distributed in the Covered Code with only those rights set forth in this distribution used to control the distribution and/or modification of the Program; and (b) You must include a text file as part of itself to the personal jurisdiction of, and venue in, the state and federal courts within that District with respect to end users, business partners and the party making the Software is furnished to do so, subject to the wide range of software generally. NO WARRANTY There is no warranty for NetHack. If NetHack is modified by The Perl Foundation in the Licensed Program, or be made available by Apple under this License, provided that you distribute, wherever you describe the origin of the original version of Covered Code.</p>
</Container>
)
}

export default Terms;