React Coding Challenge

The task

Your job is to create a NextJS app which stores file details in the browsers local storage and keeps a history. Only the file meta deta is stored in the browser storage, the files itself won't be stored or uploaded.

Tech stack:

• TypeScript NextJS Starter: Typescript NextJS Starter
• State Managment: Redux or MobX
• Styled Components: (if you like to style things): Styled Components

Screens:

• Main Screen
  • Displays an upload dialog
  • Once a file was dropped on the file upload dialog area it will dispaly the file name and a "Save File" and "Reset File" button
  • Only PDF, DOCX, DOC are allowed
  • Clicking "Save File" will persist the file meta data in the browsers local storage
  • Clicking "Reset File" will reset the upload dialog
  • List all previously saved files (if any) in a table
  • Clicking on the "X" icon in the file list will remove the item and remove it from the browser storage
  • The table contains filename, file size (in bytes, kilobytes, megabytes, gigabytes, terabytes) and the file format (extension without the dot)

Must-have:

1. TypeScript
2. React + State Management (Redux/MobX)
3. Validation on forms
4. Usage of modern js functionality (ES6+)
5. Use the TypeScript NextJS Starter to get things going

Nice to have:

2. Clean code (run linters, prettier)
3. A few tests
4. App deployed to Vercel
5. Conventional Commit Messages
6. Gitflow Branch Naming

Very nice to have:

8. Github Actions to run linting and tests

What will we be paying attention to:

1. How you split code for components
2. How your store looks like and how you communicate with redux/mobx.
3. Reusability of the components.
4. Code repetitions and reusability (keep your code DRY and simple KISS).
5. How and where you put your business logic.
6. Code optimization and the solution's performance.
7. Working in accordance with good practices in general.
8. How you communicate with the browser storage API.
9. Handling unexpected errors or potential exceptions.