The code challenge made to schedule some reminders into the calendar.
To run the app, make sure that you have all the required tools installed here
First, clone this repository
$ git clone git@github.com:IgorMing/calendar-challenge.git
After that, let's navigate into it and install all the dependencies
$ yarn
# or
$ npm i
That's all! Now you can run the application
$ yarn start
- axios as http client
- moment to deal with dates
- react-big-calendar to render the calendar on the screen
- react-color as a color picker while interacting with a reminder
- react-datepicker to add dates in a friendly way
- react-icons to have some icons easily in hands
- react-modal to display a modal almost automatically
- react-time-picker to select a time friendly
- redux as state manager
- redux-thunk as a middleware for async request
- styled-components to styling the components
- uuid to handle each reminder with a valid and random uuid
- ESLint and Prettier to inspect the JS code and format automatically (with necessary plugins to integrate both libraries)
- Ability to add a new "reminder" (max 30 chars) for a user entered day and time. Also, include a city.
- Display reminders on the calendar view in the correct time order.
- Allow the user to select color when creating a reminder and display it appropriately.
- Ability to edit reminders – including changing text, city, day, time and color.
- Add a weather service call from a free API such as Open Weather Map, and get the weather forecast (ex. Rain) for the date of the calendar reminder based on the city.
- Unit test the functionality: Ability to add a new "reminder" (max 30 chars) for a user entered day and time. Also, include a city.
- Expand the calendar to support more than the current month.
- Properly handle overflow when multiple reminders appear on the same date.
- Functionality to delete one or ALL the reminders for a specific day
- Add an extra list on the right side showing all the scheduled reminders, sorted by Date asc
- Save into local storage all the reminders interaction (get, add, edit, delete). So you can reload the page and still keep seeing the data
Important note[1]: I know the importance of automated tests to an application, but I left that implementation to the end, and I started having problems to make jest running well, so I decided to delete that for now. Just clarifying, I have experience with automated tests (unit, integration, e2e), but I enforced a lot in this challenge in the code quality, and organizing the structure, so I hope that's enough. I'm sorry!
Important note [2]: I wasn't able to implement the weather based on the filled city, because the API wasn't responding as expected. I received error 401, then, I tried to put the example request directly, which was also not succeeded (for CORS problems). I added an image below showing the error
If you wish, see the corresponding URL to check possible reasons for that failure.
I hope you liked it.
Thank you!