https://github.com/javascript-pro/react-tech-test
A technical test is often the best way to judge the quality of a potential candidate. Here's one example
https://github.com/javascript-pro/react-tech-test
firebase javascript pwa react redux
Last synced: 16 days ago
JSON representation
A technical test is often the best way to judge the quality of a potential candidate. Here's one example
- Host: GitHub
- URL: https://github.com/javascript-pro/react-tech-test
- Owner: javascript-pro
- Created: 2018-07-27T05:57:32.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-30T10:42:26.000Z (over 7 years ago)
- Last Synced: 2026-01-03T19:34:29.630Z (4 months ago)
- Topics: firebase, javascript, pwa, react, redux
- Language: JavaScript
- Homepage: https://react-tech-test.firebaseapp.com
- Size: 3.4 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### [Firebase Demo](https://react-tech-test.firebaseapp.com/)
*A simple phone book application using react and redux*
# React Technical Excerise
## Phone Book
## Solution
The delivered app solves the brief and also offers the following power ups
- Hosted on firebase, leveraging all kinds of Google goodness
- Persistant redux store (like cookies but better)
- [Material UI](https://material-ui.com/) for quick, modern, responsive UI frameworking
## Brief
Below is the original technical test readme.
### Phone Book
Create a simple phone book application using react and redux.
Follow the layout provided below.
```
---------------------------------------------------------
- First Name Last Name Phone No. -
- [ ] [ ] [ ] -
- -
- -
- [Save] [Cancel] -
- -
- [First Name] | [Last Name] | [Phone Number] | -
- John | Smith | 1234 | [Edit] -
- | | | [Edit] -
- | | | [Edit] -
- | | | [Edit] -
- | | | [Edit] -
---------------------------------------------------------
```
- React and Redux must be used.
- You are free to use whatever additionaly libraries you would like.
- The application must pass the following 4 test cases.
#### Case 1: Add a new user
1. Enter a first name, last name and phone number into the input fields.
2. Clicking save should add the entry into a store. This store should be persistant i.e local storage. Once saved it should show in the table below.
**_Note: Try to treat reading and writing the data the way you would if you were consuming a RESTful API._**
#### Case 2: Show list of contacts
1. List the contacts first name, last name and phone number in the table. The contact should load from the persistant store.
#### Case 3: Edit user
1. Click the edit button next to the contact in the table and populate the input fields with the values.
2. Modify the information and click save to update the existing record in the store.
#### Case 4: Cancel Edit Action
1. Click the edit button to load the selected user data as above.
2. Modify the information and click Cancel. The data should not be updated in local storage or table.
#### BONUS
1. Write a unit test.
2. Add sorting on the table
3. Allow filtering/searching the table.
## Submission
### For a submission to be considered complete it must:
- Clone this _*react-tech-test*_ repo.
- Demonstrate appropriate use of source control/ versioning;
- Adhere to modern coding standards/ practices;
- Be merged to master with a merge commit;
- Be testable;
- Solve the problem.
- This repository should be private cloned and shared with us when complete.
## Listingslab's Solution
Dev Time from cloning bitbucket repo to final develop>master merge __≈ 6.5 hrs__
Please note our solution does deviate slightly from the original brief. This is due to the constraints of completing the task in a very short time & wishing to showcase some of our current React development skills in the time allotted.
This simple phonebook app offers the following power ups
- Full Progressive Web App with all the correct manifests/icons & a 87% [lighthouse audit score](https://raw.githubusercontent.com/listingslab/react-tech-test/master/public/lighthouse.json)
- Hosted on Google Firebase, leveraging tech like as [firestore database](https://firebase.google.com/docs/firestore/)
- Aatars
- Persistant redux store (like cookies but better)
- [Material UI](https://material-ui.com/) for quick, modern, responsive UI frameworking
__Roadmap__
Further development of this app might include
- Look at importing/exporting contacts as JSON
- Upload avatars
- Develop the contact object to use many more fields
- Push notifications to let users know when they've been added to another's list