SoniQ Services recruitment task for Frontend Developers

Hello! If you are here then you reached the coding challenge for Frontend Developers at SoniQ Services! This coding challenge should represent a task that is very close to what we are usually working on at SoniQ Services. You should take no more than 6-8h to complete this task.

The source code of the solution should be provided as a bunch of files (or via github repo). It is highly recommended to use some build tools (preferably webpack) and push all the sources to git repository so you will be able to demonstrate also your ability of working with build tools and git itself. Please note that code quality is very important to us.

Good luck and we hope you will enjoy the process of solving this task!

Create a demo calendar application

The aim of this exercise is to create a demo calendar application using React & Redux. You can use 'npm mock-json-server' to mock the server data and do the proper API calls (REST or GraphQL - your choice). You need to use react-query library to get the data. (https://react-query.tanstack.com/overview)

Our focus is on the functionality of the calendar, especially on the data fetching. And don't worry, if you cannot finish the UI part in the given time, we will just have a look at what you have done so far and you can explain your code to us :-)

You can be creative with your idea of the calendar. You could do a daily list view calendar or stick more to solution that Google calendar uses for example.

Technical requirements

1. Ability to add a new event/reminder with name (max 30 chars), date and time.

2. Display reminders on the calendar view in the correct time order.

3. Ability to edit reminders – including changing name, date and time.

4. Ability to delete reminders.

5. Calendar should be responsive.

6. Use styled-components

7. You should use React + Redux (or redux-toolkit) + react-query + hooks.

8. Provide a readme.md file with an instruction on how to install your application

Bonus (optional)

1. Writing unit tests for the available features (Jest, Enzyme).

2. Find a nice way to handle the displaying of the reminders, when multiple appear on the same date.

3. Prev / Next month (or day) functionality

4. Use date-fns for dates or other simple library (avoid using moment.js).

5. Drag&drop ability to sort reminders.