leonid1313 / cgs-test-camp-task

CGS Test project

For This project use MERN stask

Pre requirements

1. Make sure that you can launch backend and frontend.
2. Open Terminal in your project (make sure that you are in main directory with hooks folder);
3. Run command cp hooks/pre-commit .git/hooks/;
4. (ONLY FOR MAC/LINUX)Run command to give execute permissions chmod +x .git/hooks/pre-commit;

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

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

• You should split your code on logical components ( <TodoContainer />, <TodoElement/> etc);
• For Edit/Add you should use forms written with Formik;
• Put logic related to server interactions inside service/http.ts file (check Our Documentation)
• For data fetching you can use React Query, it also help you to globally store your data
• Use <FlatList /> for render dynamic list (reed RN docs: https://reactnative.dev/docs/flatlist)
• Use React Native EXPO in order to install RN for both iOS & Android (https://docs.expo.dev/index.html)

3. Authorization (login/signup) backend;

• Use jwt authorization and Passport for that
• Logic related to token processing should be stored in middlewares/auth.middleware.ts

4. Authorization (login/signup) frontend;

• Should store token in localStorage
• Use Formik for handling validation and submit func

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)

6. Button pagination;

• All pagination should be handled by backend

Advanced features

This features will be available only after successful finished of required features.

Graph QL implementation

1. Attach express-graphql to backend

• Take existent controllers in your backend and create another /graphql route with all this controllers
• Use axios for querying a controllers
• Graphql api should work in parallel with existing REST api

NOTES

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

Design: drive.google

7. React Native details;

• Front-end should ONLY be launched with React Native EXPO, not (CLI)
• For navigation between screens use React Native Navigation (https://reactnavigation.org/docs/getting-started/)
• Try to play around with bottom stack navigation, while working with navigation (https://reactnavigation.org/docs/bottom-tab-navigator)
• Use useRoute + useNavigation

8. ESlint

• ESlint should be configured for all the files in the app

PR convention

1. Each intern will be attached to a branch (<username>/main);
2. When you are working on a feature you should create a separate branch from <username>/main with the following name: feature/<username>/<feature-name> or bug/<username>/<feature-name>. Once you are done with a subtask you should create a PR into <username>/main and ping Danyyl Kuchkov & Oleksii Samoilenko for review;
3. Title of ypur 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;

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

Useful links and technologies

Corporate Codestyle
Formik
Mongoose
Typescript Passport Expo React Query