Jobsity Calendar Challenge
A cross-browser, mobile-friendly calendar where you can add reminders.
Stack
- The project was bootstrapped with Create React App.
- State management was done with Redux and React Redux.
- General component styling and structuring was done with the help of React-Boostrap.
- Calendar logic was done by implementing and altering the rendering of React-Calendar.
- Minor color swapping logic for text visibility was implemented using TinyColor.
- Unit Testing is being done with Jest and Enzyme.
Form Components:
- React Color for the color picker.
- React Date Picker for the datepicker.
- TimePicker for the time picker.
- react-dropdown-select for the city autosuggest, along with React Virtualized for the virtualization of the over 160 thousand cities.
All mandatory features, as well as the bonus tasks, were completed.
In the project directory, you can run:
yarn start
Runs the app.
Open http://localhost:3000 to view it in the browser.
yarn test
Launches the test runner in the interactive watch mode.
Layout
The following shows the Calendar View of the app. Reminders can be added, reminders for a given date can be cleared, and dates can be clicked on to go to their respective day view.
If there are more reminders than can be shown in any given date, a custom tile will be shown instead, signaling that more reminders not currently visible exist.
The following shows the ReminderForm component, in its reminder creation mode. A color can be picked for the reminder tag, as well as a title, date, and time.
The city can be searched through text and selected from the given options, but it has to be a city selected from the list.
Only the city and title fields are validated to be required, since the time and date fields have default values.
The following shows the Day View of the app. Reminders are shown in full detail within a scrollable list, showing the weather of the date and city selected for the reminder.
Past reminders don't have weather info, and current day reminders only have one weather item.
Reminders can be added, edited, and deleted one by one or by clearing the schedule for the entire day.
The following shows the ReminderForm component, in its edit reminder mode. All information can be modified. The same validations from the creation mode apply.
