As per the challenge description, the goal of this project was to create a News portal, following the requirements and adding improvements if necessary, besides developing the UI/UX for it ourselves. Some of the functionalities added to this application were:
- Live Search.
- Pagination.
- Responsive interface. It's completely mobile friendly, so it works smoothly on every desktop, smartphone and tablet. Followed Mobile First principles.
First of all, a sketch was created, alongside the list of needs and improvements the application could have.
After creating the project, I added a few Style Guide tools to keep the code consistent, such as ESLint, Prettier and EditorConfig.
For the Front End, I added the necessary components and pages and filled them with static information. The entire HTML and CSS (Sass in this case) code in created during this stage, while also paying attention to the UX.
For the logic, I used the Fetch API to pull the information needed for the project. After this step, I coded the Live Search functionality, matching the search value with the news' title.
As for the pagination, I coded it from scratch since it wouldn't be very complicated to do so.
Finally, for the tests, I don't have any hands on experience with it, so I left it without testing. But this is definitely a skill I'm interested in aquiring.
| Color | Hex |
|---|---|
| #4C8577 | |
| #D183C9 | |
| #FFFFFF | |
| #e8eaee | |
| #b5b5b5 | |
| #696969 | |
| #313237 |
To build and run this application locally, you'll need latest versions of Git and Node.
# Clone this repository
$ https://github.com/msfern/evox-news
# Go into the repository
$ cd evox-news
# 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