CGS Test project

Project main stack

Backend:

Express, Typescript, Postresql, Prisma ORM, Passport.

Frontend:

React, Typescript, Zustand, React Final Form, Blueprint, Emotion CSS.

Project commands

cd packages/backend - jump to your backend folder
yarn - install dependencies
yarn serve - run your backend
cd packages/frontend - jump to your frontend folder
yarn - install dependencies
yarn dev - run your frontend

Pre requirements

Avoid Upper case! Do not use N_Surname syntax or Implement-Crud-Todo syntax

If you keep experiencing something like: tslint: command not found please do the following:

yarn global add tslint typescript

link: https://stackoverflow.com/questions/36910592/enabling-eslint-on-typescript-files/64175035#64175035

Time-frames

Time-frames of the test task is highly important! You have only 2 weeks for the task below, please use this time wisely. Good luck!

Required features

1. Todo list - CRUD operations on backend;

• Each PUT POST rout should has validation of req.body and throw 400 error in case of failed validation
• Separate your logic from routes. You should perform all interactions with DB inside your services/<filename>.service.ts file and import it to controllers/<filename>.controller.ts. After that you can call your controllers in routes
• Create GENERIC validator, isExist (for put, delet and get by id), tryCatch middlewares

2. Todo list - Connect your CRUD operations with frontend;

• You should split your code on logical components ( <TodoContainer />, <TodoElement/> etc);
• For Edit/Add you should use forms written with React Final Form;
• Put logic related to server interactions inside service/http.ts file (check Our Documentation)
• Use Zustand for managing your application state Zustand;
• Todo list page should have different behaviors on different devices. Desktop - should be displayed as a table, Tablet - should be as slider, Mobile - list.
• Your font sizes, colors, margins, paddings should be in THEME const
• Create ROUTER_KEYS const for routing
• Use Emotion CSS in order to style your components
• Design should be tablet and mobile adaptive

3. Authorization (login/signup) backend;

• Use jwt authorization and Passport for that
• User should have username, password and email
• Logic related to token processing should be stored in middlewares/auth.middleware.ts
• Private todos should be accessible only for Todo creators
• Public todos should be accessible for all users
• You should implement account verification functionallity via email
• Change password endpoint
• Forgot password endpoint. Reseting password demands a special link, which you should send via email

4. Authorization (login/signup) frontend;

• Should store token in localStorage
• You have to devide your routes into 2 groups: public and private. Private routes should be accessible only for user, who is logged in. Public routes should be accessible for all users
• Use React Final Form for handling validation and submit func
• Extend your http service for interacting with auth requests (check our codestyle)
• Integrate logout and edit user information UI (like username and password)

5. Filters for todo list by title and statuses (private and completed);

• You should pass filter params through req.params(localhost:3000/todo?search=test&status=completed)
• Connect backend filtration with UI components

6. Button pagination;

• All pagination should be handled by backend
• Change frontend request with pagination params
• Pagination should be done differently on different devices. Desktop - button pagination, Tablet - horizontal scroll pagination, Mobile - vertical scroll pagination

NOTES

Backend should have stored in backend dir, mobile should be stored in fronted dir. Use technologies from Useful links and technologies. You should create separate pr for each task.

Design: drive.google

PR convention

1. Each intern will be attached to a branch (<name that you have set in pre-requirements>/main);
2. When you are working on a feature you should create a separate branch from <name that you have set in pre-requirements>/main with the following name: feature/<name that you have set in pre-requirements>/<feature-name> or bug/<name that you have set in pre-requirements>/<feature-name>. Once you are done with a subtask you should create a PR into <name that you have set in pre-requirements>/main and ping Danyyl Kuchkov & Oleksii Samoilenko for review;
3. Title of your PR's should be feat: <name of your feature> or bug-fix: <name of your bugfix>. Description field should contain short info about feature/bug;
4. PR's are under review ONLY between 9AM - 9:30AM (Kyiv EET time)

If you will face with some issues with git. Ask Danyyl Kuchkov via slack;

Useful links and technologies

Corporate Codestyle Blueprint React Final Form
Typescript
Passport
Emotion CSS Prisma