Create a demo calendar application using React
Instructions
The goal of this exercise is to create a demo calendar application using React. We strongly recommend create-react-app to make the bootstrapping of your application really easy.
Please don’t use a calendar library, we would like to see your own calendar logic.
The Task
You should start by rendering a single month view of a calendar for the current month – along with the lines of the calendar image in this project.
Features & Requirements:
- You need to use one of the following state management libraries: Relay, Apollo, MobX or Redux
- Ability to add a new “reminder” (max 30 chars) for a user entered day and time.
- Display reminders on the calendar view in the correct time order.
- Allow the user to select a color when creating a reminder and display it appropriately.
- Properly handle overflow when multiple reminders appear on the same date.
- Ability to edit reminders – including changing text, day and time & color.
- Ability to delete reminders.
- Expand the calendar to support more than the current month.
Deployment link
https://master–tubular-dragon-f7b146.netlify.app/
Setup
Node 14 or more is needed. Inside the folder do and
npm install
npm start
Go to
Constraints
The component is working on 1920 x 1080 and 1280 x 720 resolutions.
Improvements
- Tests with react testing library would be great (will add them today)
- Styled components can be added to improve the styling logic
- I18N must be added to make the text language easy to translate in the whole app. And also a good thing to split content and logic.
- Cypress can be used to test it end two end.
- Maybe would be good to make an integration with google calendar to store information in cloud. Or create a backend for the same purpose.