alichur/trending-articles

Create a Medium inspired trending articles page as part of a job application

I used Create React App to quickly create a React environment. Much of the code in this project is generated by this tool. The code I added can mostly be found inside src/components For my CSS I have used CSS Modules

To Run:

Prerequisite: The following backend API should be running locally https://github.com/mediasuitenz/client-coding-exercise/blob/master/README.md

1. Clone this repo:

$ git clone git@github.com:alichur/trending-articles.git

2. Move into the directory and install the dependencies:

$ cd trending-articles
$ npm i

3. Launch the application:

$ npm start

4. The application can now be viewed at http://localhost:3001/

Note, this application runs on port 3001. If this port is clashing with another running application in your environment it can be changed inside package.json 'start' script.

Notes for reviewer

I stopped developing before finishing this assignment in an attempt to stick to the suggested time limit of 2 hours. As a result there are a few remaining tasks:

• After clicking article title it should route to new page and display article (rather than temporary alert box)
• Need to handle errors and non-200 responses for fetch with styled user friendly error
• API string should be stored in a const and not repeated. Perhaps move API code into external service
• Header, footer, nice scroll animation
• Media query to display articles side by side for desktop, and hover effects for mouseover.
• General formatting, removal of console statements, replacing ternary logic statements with clearer logic paths.