An application that allows you to search for other students from your school. This project was assigned as a skill test by Hatchway.
Visit PhaseBook
The project is broken into five parts, each with a feature and a wireframe.
The goal of this assessment is to replicate the frontend application below as close as possible. You are allowed to use any frontend framework (React.js, Vue.js, etc.) or use plain Javascript, HTML, and CSS.
I have chosen to use React as my framework and utilize other technologies like Redux and Tailwind CSS.
The project board is where I organized all of my issues and objectives for my application. The User Stories drop-down is a high-level overview of what was required for the assignment.
User Stories
- As a user, when I navigate to website in the application, I should see a list of GitHub issues for that repo, a portal with a list of robots, two search bars for name and tags, and a way to expand the robot's information
- I should be able to scroll inside of the portal to see all robots
- I should be able to see a picture, a name, email, company, skills, and average of each robot
- I should be able to filter by name
- I should be able to filter by tags
- I should be able to filter by both names and tags
- I should be able to add tags to any robot
- I should be able to click on the plus sign to see more info
- It should turn into a minus sign when active
- I should be able to see all eight tests & test scores for each robot when expanded
- I should be able to click on the minus sign for less info
- It should turn into a minus sign when active
First, clone the repo and update the dependency with your package manager preference (yarn, pnpm, etc.)
git clone
npm installYou can either visit Phasebook or run the command
npm startYou can open the Cypress and run the spec by typing the command.
npm test
- See a list of all of your classmates
- Everyone in the application will have their picture featured!
- See details on everyone, which includes: email, skills, test scores, and test score average
- Add tags onto anyone to better categorize them
- Filter the list either by tags and name
- Be able to search students from other schools
- Be able to favorite students
- Add a database so that your tags and favorites are permanent
- Add color options for the user to select when creating tags
- Add another search filter for tag colors
