https://github.com/lucassimao/dotsub-challenge
Restful spring boot based backend and react based frontend with file upload
https://github.com/lucassimao/dotsub-challenge
java javascript microservice react spring spring-boot
Last synced: 3 months ago
JSON representation
Restful spring boot based backend and react based frontend with file upload
- Host: GitHub
- URL: https://github.com/lucassimao/dotsub-challenge
- Owner: lucassimao
- Created: 2019-07-22T13:00:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T05:50:29.000Z (over 3 years ago)
- Last Synced: 2025-01-23T10:27:04.272Z (about 1 year ago)
- Topics: java, javascript, microservice, react, spring, spring-boot
- Language: Java
- Homepage:
- Size: 6.37 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dotsub coding test
Create a simple web project, that provides a form to upload a file and gather some metadata for that file: Title, Description and Creation date
- The UI can be implemented in any SPA framework of your choice.
- The REST back-end will be preferably implemented based on Java/Spring Boot (+ any Spring/Java library/framework of your choice) to store data.
- No user authentication and security features are needed.
- Project can use simple in-memory DB to store data
- Files can be stored in web server file system.
- No need to implement routing or sophisticated state management in UI (e.g. FLUX)
- Project can use any quality assurance mechanisms or build tools of choice
- You may also submit with the project any design considerations, restrictions, or possible future enhancements (if applicable)
## Technical stack
+ Backend
* Java (Compiled with openjdk version 11.0.3)
* Spring-Boot
* H2
+ Frontend
* JavaScript/ES6+
* React 16.9.0-alpha.0
* React hooks
* Axios
* Fontawesome
* Tests with Jest
## Features
* Register a new file : title, description and binary data
* Edit a previously registered file
* Delete a previously registered file
* Search by title or description
* Download file's binary data
* Pagination
## Frontend design details
* This project uses React 16.9.0-alpha.0 (this alpha version includes some fixes on the new 'act' API)
* Only React functional components
* Pure and simple CSS, no library used
* Modal dialog boxes using React portals
* Full global application state management only using useContext and useReducer React hooks
* Inside each component, state management is achieved through useState hook
* There are tests using Jest to ensure the correct behaviour of App and Paginator components
* All the interaction with the backend is done through the service **src/services/FileService.js** wich uses the library Axios to trigger http requests
## Backend design details
* The application preloads the database with images and details of the 7 wonders of the world
* The POST, UPDATE and PATCH endpoints handle binary data associated with the files. Thus, to cope with the requirement of storing binary data, this endpoints were coded in an async way in order to avoid slowing down the http server's worker threads with slow I/O tasks
* This choice for async endpoints was taken into consideration to avoid future scalability issues
* Binary data are stored by default in the local OS temp directory. The storage mechanism was abstracted away through a service interface (**com.dotsub.challenge.services.DataStorageService**) whose only implementation is **com.dotsub.challenge.services.FileSystemStorageService** used on the default spring boot profile
* The following classes are involved on handling the restful endpoints:
* **com.dotsub.challenge.repositories.FileRepository**
* Basic spring data rest repository for file, exposing CRUD methods as restful endpoints and with sort and paging capabilities
* **com.dotsub.challenge.controller.FileController**
* A controller to override the POST, PATCH and PUT endpoint of the previous restful controller. Takes into account the logic to store the binary data
* **com.dotsub.challenge.controller.DownloadController**
* The controller who allows download files' binary data
* It was necessary to use the spring security project, in order to properly setup the CORS policy, once that both the frontend and the backend servers run on different ports at localhost (See **com.dotsub.challenge.config.WebSecurityConfig**)
* Each resource was augmented with the link that allows the download of his binary data (See **com.dotsub.challenge.config.FileResourceProcessor**)
* There are integration tests to ensure the correct behaviour of all restful endpoints for File
## Possible improvements
* Implement a responsive layout
* Implement end-to-end tests with cypress for the frontend
* Show a more detailed upload progress when a new file data is been sent to the server
* Implement a service worker to cache the data allowing a read only browsing mode experience when the network is down
* Create a new **com.dotsub.challenge.services.DataStorageService** implementation, in order to store files in some cloud storage provider
* Use the spring cache abstraction to save database reads when listing files
## How to run
+ Backend: First, ensure you have **JDK 11** at least. Inside the **backend** folder, just run
`mvn clean spring-boot:run`
+ Frontend: First, ensure you have **node >= 8.10**. Inside the **frontend** folder, just run
`npm install && npm start`
## How to run the backend tests
`mvn clean test`
## How to run the frontend tests
`npm tests`
## Screenshot
