Planner

Get more done with Planner. Manage, capture and edit your daily events, notes and tasks.

Introduction

Planner is a full stack web application built using MERN stack to keep a track of your activity. You can track it for every month, day, or even an hour.

• Runtime used for whole application - Node.js
• Frontend framework - React JS
• CSS preprocessor - SASS
• Backend framework - Express
• Database - MongoDB

Navigation

• Home Page - Planner's Home page contains links for different pages of the web app.

• Calendar - Planner contains a calendar which helps us visualize the days of any month of any year, withour any year limit. Unlike other calendars, our Planner works on an algorithm.

• Events - In the events section of this Planner, you can create, edit and delete an event. For e.g: Create an event for your best friend's birthday and keep yourself reminded on the big day.

• Notes - Use Planner's notes section to record every thought that you want to track. Whether it is an article you came across on the internet or a blog that you want to save for later or a short poem that you just wrote.

• Tasks - Use Planner's tasks section to keep track of your day-to-day activities. Create a task that would remind you to buy groceries, or a task that would prepare for an early test and schedule a meeting with your colleagues.

• Help - There is a help section available in the sidebar. Visit this section to understand more about Planner.

• Feedback - Any appreciation of work or a bug report or any other kind of feedback is welcome. To drop a feedback for our developers, click on the feedback/report-a-bug button in the sidebar of the app. Please be polite in any kind of feedback.

Themes

Planner's color palette has been synchronized and carefully chosen to provide the best user experience.

The app will switch to dark mode automatically after 8:00 PM and will switch back to light mode at 8:00 AM.

Nevertheless, the user could override this option by switching between different modes as per their convenience.

To switch between different modes, click on theme icon in the header.

• Light Mode

• Dark Mode

Local Development

• To clone copy the following command in your terminal and start development.

git clone https://github.com/akshatmittal61/planner.git

OR

• Fork the repo to your github account and then,

git clone https://github.com/<your-username>/planner.git

• cd into the directory

cd planner

• Install all the dependencies

npm i

• Run the project in development mode

npm run react

• Run the backend server

npm run server

This will run the server on port $PORT locally with nodemon to continuously watch every change.

• If you don't have nodemon on your system, run

npm i nodemon -g

Open localhost:3000 or localhost:5001 to view it in the browser.

Environment Variables:

Building the .env

• MONGO_CONNECTION_URL: Create a database in MongoDB cluster and paste the connection string in here

• PORT: Assign a PORT to run the backend server (usually 4000 or 5000)

• JWT_SECRET: Assign a string for the JWT web token or request the developers to provide you with the official one.

• REACT_APP_BACKEND_URL: Create the backend URL for which React App will send the server requests to. (depends on PORT) -> http://localhost:${PORT}

For EmailJS integration

• REACT_APP_SERVICE: Service ID provided by EmailJS
• REACT_APP_TEMPLATE: Template ID provided by EmailJS
• REACT_APP_USER: Public Access Token provided by EmailJS

Contributing

Read the contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to create an issue and/or raise a PR.

License

This project is licensed under the terms of the MIT License

Author

• Akshat Mittal
• Sneha Sharma

References and Libraries Used

• Material 3 Designs
• Google Keep
• AOS
• Axios
• Moment
• EmailJS