guilhermejbranco / invoicexpress

DocumentsXpress

Challenge available at Challenge Link.

Tech Stack

• HTML5
• SASS

  Mainly used for global variables, such as primaryColor and secondaryColor. Installation: npm install node-sass

• Bootstrap

  Used throughout the application, as the backbone structure for the styling. Installation: npm install react-bootstrap bootstrap

• React

  No need for introduction. Installation: npx create-react-app invoicexpress

• Enzyme

  Used for all the component testing. Facilitates the unit testing for all methods and elements in each component. Installation: npm i --save react@16 react-dom@16 and npm i --save-dev enzyme enzyme-adapter-react-16

Preview

Organization

The application is organized in four main components:

• App.js

  Main component, integrates all the sub-components of the application.

  • List.js

    Responsible for displaying the main list.

  • Filter.js

    Responsible for filtering the list of documents (assets/resources/documents.json) using the inputs and selections available on the header of the application. After filtering the list of documents, it propagates the filteredDocuments to all the components.

  • Pagination.js

    Responsible for the pagination structure. Besides displaying the pagination on the bottom of the application, when the list of documents is filtered, or when the user chooses a different page, the component propagates de currentPage to the remaining components. The navigation can also be done using the keys -> and <-.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Latest test results

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

invoicexpress's Issues

Mobile Fixes

Keyboard Navigation

Implement Navigation with keyboard. Next page -> and previous page <-.

Refresh State

Mantain state on the refresh, with cookies. Save the currentPage and searchInput.