output.mp4
Build log has some warnings, I didn't have the time to handle all.
I've added extra packages to the project for quality of life and better/faster development:
Next.js, tied to a vercel account, deployed on web for testingprettier(code formatting)lint-staged(runs code formatting every commit)styled-componentsper the task's request Possibly unnecessary components, but to have things more complete:sass(to use scss files)- ChakraUI (React UI Component library), for the general template
- TypeScript: Added basic interfaces and types to components, no need for something more in the scope of this project
- Even though I'm using Next.js, I could've gotten the data directly, but I choose to simulate a random interval to fetch the data so the search component has to handle the lack of data as well.
- I used styled components only in the search component itself, it was easier faster to me.
The task should take you around 3 hours, in case it takes you longer feel free to submit your work up to that point.
No need to implement the reference images exactly as shown. The point of this task is about the components and the search user flow, not the visual style!
Feel free to use whatever tools you are most comfortable with.
For context: We are using Next.js, our React components are broken down in an Atomic Design like structure (Atoms building up Molecules building Organisms building up Views), for styling we use Styled Components.
- Select the scope (either users or communities)
- Enter the search term
- When clicking into the search input field, show a history of recent searches (stored in localStorage). Use an appropriate message if no recent searches exist.
- each entry in that list links to the "Search Results Page" for that query, i.e. clicking on it takes you to that route by encoding the params (scope, term) in the URL
- while typing the search term the recent searches get filtered to match that query
- to emphasize the recent searches box, add an overlay behind it
- Press 'Enter' or click on the magnifying icon. => this leads you to the "Search Results Page"
Note: the images are not showing how the UI should work. Given the query "bit" only users with "bit" in the name or in the Twitter handle should be shown. The same goes for communities.
You only need to implement the list of matches on that page, ignore the rest (filter, sidebar) even the styling of the item in the list doesn't matter. Only the name and/or Twitter handle are important!
See ./data/communities.json for an example of communties data. For the users make up your own test data.
In it's final form that data would come from a server, but for the scope of this task you can simple use it directly, e.g. create utitlity functions that operate on the test data.
- Mobile version (i.e. works well on smaller screen sizes)
- Understanding of the scope of the task
- Good UX
- Well structured and clean code
- UI of the search bar component (not including the recent searches)
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn devOpen 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 can be accessed on 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 instead of React pages.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.