Project Description

The basic idea of the project is to implement something similar to jsfiddle. But with user
management possibility. Need to allow possibility to build/show/host ui projects online.

Basic features
Sign In, Sign Up (without photo).
● Forget Password page, Reset Password page
● User Management page (it will contain table with users, form for
creating/editing/removing users). User will have next fields: first name*, last name*,
email*, password*, picture
● Project managements. Project will consist of the name, type, css, html, js code, access
level (private or public).
Type = “Pure Javascript”, “JQuery”, “Vue.js”
● Need add possibility to share public projects (Compiled version). There should be a
page, where you pass project id. Angular Component should retrieve html, css, js code
from backend and draw results.
● Profile page (reset password, update avatar, update ui theme, change name).
● Page where you can setup dummy/mock endpoint which will respond with some static
response. You can specify headers, status code and response body(if allowed by
request method) to simulate backend. Then in js samples user can make requests to this
endpoint to test his http exchange code.

Tasks for Frontend Developers

1. Basic project setup. (Bogdan)
2. Implement Sign In, Sign Up pages (Sasha)
3. Implement Profile page with possibility to upload and crop image. User should be able to
change first name, last name, password. To reset password need to specify password,
confirm password and old password. At the end implement ui theme features. (Diana).
4. Implement user management page (Available for admin only). Page with table.
There should be search input (at the top) (search should be implemented on backend
side), pagination, sorting. Columns: id, first name and last name, email, small picture,
status (active, deactivated), number of projects. There should be a possibility to
activate/deactivate person. Should be a possibility to add/edit user. Note: Add User
Page, Edit User Page, Profile should use same component. (Dmytro).
5. Implement project management page (part related to displaying table, and showing title
and type). Add possibility to manage visibility and name inside table (without popups).
Page with projects table (name, type). (Oleg)
6. Page related to building fiddle. Add possibility to show
7. Create Dashboard, page where would be 2 charts. One showing number of users joined,
and another number of projects created. So x-axis would be a date and y - axis number
of users/projects. At the top there should be a date filter (so it allow to select period: last
 week, last month, select dates). For building charts use google charts library. It should
be possible to resize charts and drag and drop to change their order. (Vadim)

Tasks for Java Developers

1. Spring Boot setup.(Vadym)
2. Configure Swagger documentation (Oleksiy)
3. Create DB layer (entities and repositories). Create script for adding sample data during
application start.
4. Configure JWT security.(Leonid)
5. Continuous integration setup.
6. Implement user management (Misha)
7. Implement project management.
8. Forget, reset password, Image, settings management.
9. Implement mock backend management.

Other requirements:
1. All forms should have validation (both ui and backend).
2. Need to handle failed response from server as well. Need to show notification
messages.
3. All tasks should be committed to feature branch. After that need to create pull request.
No direct commits to master.
4. Need to use next ui template: https://bootstrapious.com/p/admin-template . Link to
download: https://bootstrapious.com/download/default/128?
hash=543d3d718cc3f846d4a0d408d15dcfd7
5. We will use cross review for pull requests. Every one reviews every one.
6. Java test coverage should be 70%

Additional task
1. Login via google
2. Add possibility to change Theme (dark, white, red, blue, green).

Technologies
Java (latest version)
Spring Boot
Hibernate
Spring Data
Spring Security (JWT based security, with refresh token that is available for 4 hours). For more
details read Authentication section.
In memory database
Angular (latest version)

Authentication
Communication between UI and Backend will be processed using JWT tokens. If user will
provide valid username/password to login endpoint, backend will return jwt token in response.
Jwt token will consists of actual token and refresh token that will be used in case of token
expiration.
That token should be stored in local storage and used for every request to backend. Need put
token under Authorization header, otherwise you will get 401 response.

1. If you get Error 401 show login page.

2. Send login(email) and password to backend.
3. Receive token from backend and store it in local storage
4. Always send token with authorized requests in header "Authorization: Bearer <token>"
5. After logout delete token from local storage

Git Repository

https://github.com/inventorsoft-academy/scripty