https://github.com/tnruslan/todos
https://github.com/tnruslan/todos
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/tnruslan/todos
- Owner: TnRuslan
- Created: 2024-08-19T17:10:16.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-02-25T12:12:51.000Z (3 months ago)
- Last Synced: 2025-02-25T13:24:36.687Z (3 months ago)
- Language: TypeScript
- Size: 162 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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/.service.ts` file and import it to `controllers/.controller.ts`. After that you can call your controllers in routes_
- _Create GENERIC validator, isExist (for put, delete and get by id), tryCatch middlewares_
2. **Todo list - Connect your CRUD operations with frontend**;
- _You should split your code on logical components ( ``, `` etc);_
- _For Edit/Add you should use forms written with [React Final Form](https://final-form.org/docs/react-final-form/getting-started), [Formik](https://formik.org/docs/overview), [React Hook Form](https://www.react-hook-form.com/get-started);_
- _Put logic related to server interactions inside `service/http.ts` file (check [Our Documentation](https://github.com/CodeGeneration-2020/code-generation-code-style/blob/main/docs/javascript.md#server-interactions-))_
- _Use [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) for managing your application state;_
- _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_
- _Create `FONTS` and `COLORS` const for storing your fonts and colors_
- _Use [Emotion CSS](https://emotion.sh/docs/introduction) in order to style your components_
- _Design should be tablet and mobile adaptive_
3. **Authorization (login/signup) backend;**
- _Use jwt [authorization](https://nodejsdev.ru/doc/jwt/) and [Passport](http://www.passportjs.org/) 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. CRUD operations of public todos is accessible only for owner. Public todos is accessible only for reading 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_
- _Create `STORAGE_KEYS` const for storing your local storage keys_
- _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](https://drive.google.com/file/d/1PcusGdHTmD4qzhKRJnd9pk2jLAUyLIiX/view?usp=sharing)
## PR convention
1. Each intern will be attached to a branch (`/main`);
2. When you are working on a feature you should create a separate branch from `/main` with the following name:
`feature//` or `bug//`. Once you are done with a subtask you should create a PR into `/main` and ping `` for review;
3. Title of your PR's should be `feat: ` or `bug-fix: `. 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](https://github.com/CodeGeneration-2020/code-generation-code-style)
[Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction)
[Blueprint](https://blueprintjs.com/docs/#blueprint/getting-started)
[React Final Form](https://final-form.org/docs/react-final-form/getting-started)
[Formik](https://formik.org/docs/overview)
[React Hook Form](https://www.react-hook-form.com/get-started)
[Typescript](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
[Passport](http://www.passportjs.org/)
[Emotion CSS](https://emotion.sh/docs/introduction)
[Prisma](https://www.prisma.io/docs/orm/overview/introduction)
```
```