The project consists of an planner which the main goal is to help the user to organize their week and their tasks, also at what time they happen. To facilitate the visualization of the users's appointments, each task and its respective time will present the same color of its respective day of the week. If a certain time presents more than one task, it will be crossed out of the planner.
Link to Figma: https://www.figma.com/file/bFCO644LzxRZTqyGSLcgzI/Weekly-Planner?node-id=0%3A1&t=YLhqjrmdlyozww2K-1- Using ReactJS.
- Layout according to Figma, respecting all of Figma's layout colors and sizes.
- Do not utilize libraries.
git clone https://github.com/isefsh/planner-weekly.git
After running the git clone command, install the dependencies:
npm install
npm install react-router-dom@6
npm install axios
npm install --save styled-components
To run the application use:
npm run dev
- On Register Page: Validation of inputs on Register and Login pages - Protected Routes.
- On Login Page: User can log in using their e-mail - Protected Routes.
- On Dashboard Page: Real Time Clock - Weather API - Logout button - Tasks filtered by day of the week - Delete button excludes the tasks that are showing on planner - It is possible to delete a specific card - Conflicting tasks are crossed out by a line and present a different color.
- The line used to cross conflicting tasks doesn't fully follows the Figma layout.
- On Register Page I would like to implement a way to show which input has an error.
- Create a Modal that handles all the errors alerted.
- Writing cleaner code.
