Pink Planner

Pink Planner is a React application that I developed while enrolled in a Full-stack web development bootcamp (Concordia University). The user can use the planner (month / week / day) to add, edit or delete events. The home page features a preview of the day's tasks, menu icons, the day's weather and a news feed.

The application was created with create-react-app, using styled-components for the styling and the animations. Events and meetings are stored on a MongoDB database. The technologies used include: HTML, CSS, JavaScript, React, Node, Express, RESTful API, MongoDB.

pinkplanner_home

pink-planner_animation

Project features

The application allows the user to view meetings and events stored from a database.
The key features are:

  • A tab-like component to switch between the different views.
  • Three different date pickers to switch between months, weeks or days.
  • In the day view, ability to edit or delete an event.
  • On the homepage, some articles from GoogleNews API are fetched once per day and are displayed in a news feed.
  • On the home page, the current weather is shown and is fetched from Weather API on every mount of the page.

The "+" button opens a form in a modal:

  • Title, description, location
  • Date pickers for the start and end date / all-day option
  • Time pickers for the start and end time

pinkplanner_month

pinkplanner_week

pinkplanner_day

Project status

Features in development:

  • Focus mode
  • Responsive styling (all screen sizes)

Packages, modules, APIs

GitHub

https://github.com/VanessaCHW/pink-planner