|
|
|
<div align="center">
|
|
|
|
<img src="https://git.jobsity.com/jobsity/react-interview-challenge/-/raw/main/public/jobsity-logo.png"/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
# React Interview Challenge
|
|
|
|
|
|
|
|
## Description
|
|
|
|
|
|
|
|
This project is designed to test your knowledge of front-end web technologies and assess your ability to create front-end UI products with attention to detail, cross-browser compatibility, standards, and reusability.
|
|
|
|
|
|
|
|
|
|
|
|
## Assignment
|
|
|
|
|
|
|
|
The goal of this exercise is to create a demo calendar application using React.
|
|
|
|
|
|
|
|
You are provided a base application with a calendar page at `/calendar`. You must allow the user to create "reminder" cards, as described in the Mandatory features section.
|
|
|
|
|
|
|
|
|
|
|
|
## Mandatory features
|
|
|
|
- Ability to add "*reminders*" (max. 30 characters) for a day and time specified by the user.
|
|
|
|
- Ability to include a city as a location for the reminder.
|
|
|
|
- Ability to edit reminders - including changing text, city, day, and time.
|
|
|
|
- Add a weather service call from [VisualCrossing](https://www.visualcrossing.com/weather/weather-data-services#) and get the average temperature forecast (e.g. 15° C) for the date of the calendar reminder based on the city.
|
|
|
|
- Change the weekend days cells' color
|
|
|
|
|
|
|
|
## Bonus (Optional)
|
|
|
|
|
|
|
|
- Properly handle overflow when multiple reminders appear on the same date.
|
|
|
|
- Unit test the functionality: *Ability to add "*reminders*" (max. 30 characters) for a day and time specified by the user.*
|
|
|
|
|
|
|
|
## Considerations
|
|
|
|
|
|
|
|
- Show us in the Readme all relevant information about your project.
|
|
|
|
- The project is completely focused on Front-end. Ignore the Back-end.
|
|
|
|
- Feel free to use small helper libraries for:
|
|
|
|
-- UI Elements.
|
|
|
|
-- Date/Time handling.
|
|
|
|
- We have implemented Redux thunk for state management, but you may use any state manager you are familiar with.
|
|
|
|
- Show us your capabilities in CSS and styling, if possible.
|
|
|
|
|
|
|
|
# How to deploy
|
|
|
|
|
|
|
|
- Run `npm install` | `yarn install` to install all dependencies.
|
|
|
|
- Run `npm start` | `yarn run` to run the app locally.
|
|
|
|
- You can find the project running on `localhost:3000`. |
|
|
|
\ No newline at end of file |
