Skip to content

FT_RMT_032024 Jinisha Patel #112

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
jinishakheni wants to merge 2 commits into
base: master
Choose a base branch
from
Open

FT_RMT_032024 Jinisha Patel #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ff0a4fe
Task complete
jinishakheni May 17, 2024
9e66055
Added readme file
jinishakheni May 17, 2024
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
55 changes: 29 additions & 26 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,47 @@
# The Phone Cave (WD)

At The Phone Cave we are looking for someone to help us turn our cave store into a home, and to do so we present you this challenge.
Phone Cave is a React application that allows users to view a list of phones and see detailed information about each phone when selected. The application uses Axios to fetch data from a REST API and displays a spinner while loading.

## The challenge (Duration: 3 hours)
## Features

Your task consists of creating an app showing our catalog. Follow the steps detailed below to complete the task. **You have 3 hours to do so.**
- Display a list of phone models fetched from a REST API.
- Show detailed information about a selected phone on the same page.
- Display a loading spinner while data is being fetched.
- Responsive and user-friendly interface.

### Iteration #1
## Technologies Used

Create a REST API (NodeJS) server that meets the following requirements:
- React
- Axios
- CSS
- Express.js

### Prerequisites

| Route | HTTP Verb | Description |
| --------------------- | --------- | -------------- |
| `/phones` | GET | Show all phones (use the `phones.json`) as fake data |
| `/phones/:id` | GET | Show a phone details|
- [Node.js](https://nodejs.org/en/)

### Installing

### Iteration #2
1. Install dependencies for both server and client/phone-cave:

Create a React application that communicates with the API you created before. Your React app should be using the **hooks** approach.
- Use Axios (or a similar library) in order to obtain data from the REST API
- Show a list with all the phones
- When a phone model is selected from the list, a detailed view of the phone is shown with a few specific details displayed. This display should be on the same page than the list of phones.
- Show a spinner component or a position marker while the API request is processing (display a simulation if there is no loading time)
```sh
npm install
```

### Iteration #3
2. Start server applications:

Make it look **eye-appealing**. There is no need to develop a sophisticated design, but it should not look terrible when viewed from a phone. Add images of each device.
```sh
npm start
```

Once done with this, do a pull request to submit your work.
3. Start client/phone-cave applications:

```sh
npm run dev
```

## Deadline
## Instruction

You have three hours to work on this challenge.
In the event that after three hours you do not have the MVP objectives ready, send the pull request indistinctly. This is a speed challenge.
Server is running on port 3000.

## Must-have Deliverables

- Functioning code (server and client side)
- Short README file describing what is the app about and add instructions on how to use it.

<br>
22 changes: 22 additions & 0 deletions client/phone-cave/.eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
"react/prop-types": 0
},
}
24 changes: 24 additions & 0 deletions client/phone-cave/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
13 changes: 13 additions & 0 deletions client/phone-cave/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phone Cave</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Loading