/moss-frontend-challenge

Moss.Earth frontend challenge - React

Primary LanguageTypeScriptMIT LicenseMIT

moss-logo

Moss.Earth frontend challenge

Travis CI build status
TravisCI Build Status

The page is currently available at moss.vitormach.dev, hosted on Netlify.

This is my implementation of the Moss.Earth frontend challenge. This project was bootstrapped with Create React App and the Must-Have Libraries (MHL) template.

Installing

The installation procedure is as usual:

$ yarn install

To run the local server:

$ yarn start

Now head to localhost:3000 in your web browser to see the results.

Tests

To run the component unit tests (Enzyme):

$ yarn test

To run the E2E tests (Puppeteer) in headless mode:

$ yarn test:e2e

Frameworks/Libraries

The major frameworks and libraries used were:

  • Typescript
  • React Bootstrap/Bootstrap
  • FontAwesome
  • ESLint + Prettier
  • Jest + Enzyme + Puppeteer

Below is the original description of the challenge:

Front End Challenge

This code challenge allows you to choose your own path and lets you flaunt your creative panache and technical skills along the way. Spend as little or as much time as you would like to complete your chosen path. Get as much completed as you can, with the focus on functionality over design.

In a fictional world, we are branching into the music business and need a new a website. This website needs to display the top 100 songs based on the iTunes API.

Base Requirements For All Levels

*Show top 100 albums based on the json feed here: https://itunes.apple.com/us/rss/topalbums/limit=100/json *A clean modern look *Clean, readable, maintainable codebase *Source code on Github *Cross browser support (or graceful degradation) *Responsive design and implementation *A good user experience

Levels of Awesome

Choose one of the following routes for your journey.

Novice

"Hey! Look! Listen!"

TASKS

  • All of the base requirements
  • Create and implement (using HTML, CSS and JS) a basic design
  • Use a CSS Framework (Bootstrap, Foundation, Pure, etc.…)

Intermediate

"I know Kung Fu."

TASKS

  • All of the base, and novice requirements
  • Use a JavaScript framework (Ember, React, Angular, etc...)
  • Use SASS or LESS for custom CSS
  • Make use of CSS animations

Expert

"Watch and learn Grasshopper."

TASKS

  • All of the base, novice, and intermediate requirements
  • Allow the top 100 to be searchable
  • Allow the user to see more information about a selected Album
  • Host the website on the service of your choice (We enjoy cloud hosting like Azure or AWS, but we would also settle for a .github.io address)
  • Write Tests

Bonus Round

"All is fair in love and bonus rounds"

TASKS

Surprise us!

  • Add a feature that you think would work well here (for instance, advanced search, integration with other API, a "Favorite" functionality)

Show us your work through your commit history!