ClanPlan is an app for planning and distributing tasks within a family.
In the app you can create a family with several family members. It is possible to create a variety of tasks in different categories and assign them to individual or multiple family members.
Created Tasks can be filtert by different criteria. The app also has a calendar view in which it is possible to get an overview of tasks that are due in the near future. Users, comments, tasks and categories can be created, deleted and changed. In the background of our app there is a MongoDB database in which user data, tasks, categories and member relationships are stored.
The ClanPlan is provided with a login, so the data of the families and members can only be seen in a password-protected area.
The app can be accessed at www.clanplan.org.
Create member, family, categories, tasks and comments
Read member, family, categories, tasks and comments
Update member, family, categories, tasks and comments
Delete member, family, categories, tasks and comments
Backend with Mongoose and Atlas MongoDB
Save profile pictures in Cloudinary
Notification messages with React-Toastify
Login with NextAuth
Calendar view with React-Big-Calendar
Styling with Styled-Components
Dropdown menues with Multiselect-React-Dropdown
Email notifications for joining a family with Email JS
To work locally, please install the dependencies using npm i first.
Add local environment variables for MongoDB, NextAuth and Cloudinary connection string. To do so create .env.local file in the project's root.
`MONGODB_URI="..." --> Register at Atlas MongoDB
GITHUB_ID=... GITHUB_SECRET=... --> Register NextAuth in Git Hub - Settings
NEXTAUTH_URL=... NEXTAUTH_SECRET=... --> Register NextAuth GOOGLE_ID=... GOOGLE_SECRET=... --> Register NextAuth in Google Account
CLOUDINARY_CLOUD_NAME=... CLOUDINARY_API_KEY=... CLOUDINARY_SECRET=...
--> Register Cloudinary`
Run npm run dev to start a development server and open the displayed URL in a browser.
Use npm run test to run the tests.
You can use the following commands:
npm run dev to start a development servernpm run build to build the projectnpm run start to start a production servernpm run test to run the testsnpm run lint to run the linter