https://github.com/devcer/project-ptc
https://github.com/devcer/project-ptc
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devcer/project-ptc
- Owner: devcer
- Created: 2019-04-05T08:51:33.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-08T06:11:32.000Z (almost 3 years ago)
- Last Synced: 2024-05-02T05:25:18.677Z (about 2 years ago)
- Language: JavaScript
- Size: 4.19 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Instructions
You are required to implement a single page application that allows user to add text and image into canvas.
## Features
Below are the basic features for the application:
- user can see the existing images from folder `images` to the images list
- user can *upload image* to folder `images` and directly added to images list
- user can *add image / text* from the menu to the canvas
- user can *move and delete the image / text* inside the canvas
- the created objects on canvas can be saved and repopulated on refresh browser
You may refer to Piktochart Editor page of how this test should look like.
## Resources
You will be given a HTML and CSS file with simple structure, and a server that allows you to upload and retrieve image. Instruction on how to run the server is included below.
## Requirements
Here are the expected requirements:
- App should have the features listed [above](#features)
- App should work on modern browsers (Chrome / Firefox)
- App logic and data flow are written in a functional and reactive programming concept
Separate the logic between application data state and template view / user interactions (unidirectional data flow).
- Use libraries as less as possible,
If you need to use libraries, we recommend vueJS (or any virtual DOM library), RxJS (or any streams library), Ramda (or any FP library).
Other than that, feel free to use other libraries that you're confident of.
For moving item inside the canvas, try your best to do it natively.
_note: use native HTML element `
` for editor canvas, not ``_
- Code and flow should be properly documented
Help us understand your flow easier by code comments or a readme file.
- Build automated test for the app
## How to Submit
- Zip your working folder with the name `-piktojstest`
- Exclude `node_modules` folder from the zip
- If you're using github or any code management tools, you can pass us the link
- You have **one day** to complete the test. If you are not able to finish, do send us whatever you have done, we will evaluate accordingly. If you need more time to fulfill all the features and requirements, we can give you **an extra day**
Have fun programming 😊
## How To Install
To set up the environment dependencies ( node version 5++ )
```
$ npm install
```
To run the node server
```
$ npm run start
```
Server is listening to port `8000`
### API
#### get uploaded images
```
GET /images
```
#### upload image to server
```
POST /uploads
```
### Note
_- The name of the file input has to be `upload` as this is what the server will be reading from_
_- The server only accepts `png` and `jpeg` file format_
_- You are allowed to edit the server.js file_