As per the challenge description, its goal was to turn an wireframe into code, adding improvements if necessary, besides developing the UI/UX for it ourselves. Some of the functionalities added to this application were:
- Live Search. See the users you're searching for in real time.
- User Details. Check additional information of every user inside their very own route.
- User Filter. The sidebar filter displays only the users that fit the region filter selected.
- Pagination. Displaying the users in groups of 15 increases the performance of the application.
- Responsive interface. It's completely mobile friendly, so it works smoothly on every desktop, smartphone and tablet.
- Dark Mode. Switching the theme to give your eyes a break.
First of all, a sketch was created, alongside the list of needs and improvements the application could have.
When it came to coding, I realised the fetch from the API informed in the challenge description was not working, so I chose to download the file and leave it inside the project. This is being done by using the Axios lib.
Afterwards, the search functionality was created, matching the search value with the user full name.
Since every user's details had to be on an internal page, I used React Router to create this, switching between the main page, the details page and a Not Found page according to the URL path.
For the sidebar filter, besides filtering, a Clear option was added in case the user wanted to see every other user.
As for the pagination, I coded it from scratch since it wouldn't be very complicated to do so.
Finally, PropTypes were added to the projects, with the goal to type check all the props used in the application.
A dark mode switch was also added for aesthethic purposes. Its switch was created using the React Switch lib.
As for the tests, I don't have any hands on experience with it, so I left it without testing. But I'm definitely interested in improving this skill (I'm currently studying this Udemy course).
| Color | Hex | Color | Hex |
|---|---|---|---|
| #0A090C | #5E2B6F | ||
| #3A3A3A | #501F61 | ||
| #666666 | #38618C | ||
| #878C8F | #1E4670 | ||
| #CCCCCC | #0F263E | ||
| #FCF7FF | #091C2F | ||
| #F9C80E | |||
| #FF5964 | |||
| #E63743 |
To build and run this application locally, you'll need latest versions of Git and Node.
# Clone this repository
$ https://github.com/msfern/juntossomosmais-challenge
# Go into the repository
$ cd juntossomosmais-challenge
# Install the dependencies
$ npm install
$ or
$ yarn
# Start the application
$ npm start
$ or
$ yarn start
This project is licensed under the MIT License - see the LICENSE.md file for details