A little inspiration for people who want to start a Calendar App with React!
Explore the docs »
View Live Demo
·
Report Bug
·
Request Feature
Table of Contents
This is a simple calendar app built with the help of Socket.IO, React and ExpressJS and use a MariaDB as the database. It is not a secure messanger. The project is more a kind of inspiration and help for people who want to build their own messanger. Currently it is still the first version and has minor bugs, with future versions these will be fixed and new features will be added.
- Custom SignIn/SignUp
- With OTP
- Log in with a specific user.
- Create a Calendar Event
- Add it to a Role
- Add it to a Category
- Add it to a Sub-Category
- Filter Events
- by Roles
- by Roles
- by Categorys
- by Sub-Categorys
- User have to be in the Event
- Change Event details
- Delete Events
- Recurring Event
- Web Client Version.
- Mobile Client Version.
- Edit Profile
- Username
- Status
- About
- Gender
- Profile Pictures
- Share Calendar
- Create new Calendars
- Invite users
- Share Calendars
- Create new Roles
- Add member to Role
- Email after adding
- Remove member from Role
- Email after remove
- Delte Roles
- Create new Categorys
- Delte new Categorys
- Create new Sub-Categorys
- Delte new Sub-Categorys
- Show Event Details
- Show Events
The next version should fix bugs and add the following features:
- Revise UI/UX
- Loading Screen
- Mobile View Fixes
- Diffrent Providers with Keycloak
-
- E-Mail Notification
- By Create account
- Reminder for Events
- By Invite a user
- Email after adding
- Email after remove
- By Invite to a shared Calendar
The both insterllation was tested with Ubuntu 20.04LTS, Docker version 20.10.17 and docker-compose version 1.25.0. First, this Git repo must be cloned, with the following command:
git clone https://github.com/noahzmr/react-calendar
- Set up UI Directorie
- Clone project in the Path
- Install node modules
- Set up Backend
- Clone project in the Path
- Install node modules
- MariaDB
- Upload Script
- Edit the env file / if necessary
- DB_HOST
- DB_PORT
- DB_USER
- DB_PASSWORD
- DB_NAME
- MINIO_ROOT_USER
- MINIO_ROOT_PASSWORD
- MAIL_USER
- MAIL_PASSWORD
- MAIL_HOST
- MAIL_PORT
- MAIL_TLS
- MAIL_SECURE
- MAIL_SERVICE
- MAIL_NAME
- Set Up min.io
cd react-calendar
cd ui
npm install
After the installation you can check with the command npm start if everything worked. If the following window appears at https://localhost:3000 every thing was success!
cd -
cd backend
npm install
cd -
Install MariaDB at this tutorial
Update Packages
sudo apt update
Install MariaDB
sudo apt install mariadb-server
Start MariaDB
sudo systemctl start mariadb.service
Run the security script
If the error appears:
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)
try:
sudo /etc/init.d/mysql stop
sudo /etc/init.d/mysql start
sudo mysql_secure_installation
Output:
NOTE: RUNNING ALL PARTS OF THIS SCRIPT IS RECOMMENDED FOR ALL MariaDB
SERVERS IN PRODUCTION USE! PLEASE READ EACH STEP CAREFULLY!
In order to log into MariaDB to secure it, we'll need the current
password for the root user. If you've just installed MariaDB, and
you haven't set the root password yet, the password will be blank,
so you should just press enter here.
Enter current password for root (enter for none):
OK, successfully used password, moving on...
Setting the root password ensures that nobody can log into the MariaDB
root user without the proper authorisation.
Set root password? [Y/n] y
New password:
Re-enter new password:
Password updated successfully!
Reloading privilege tables..
... Success!
By default, a MariaDB installation has an anonymous user, allowing anyone
to log into MariaDB without having to have a user account created for
them. This is intended only for testing, and to make the installation
go a bit smoother. You should remove them before moving into a
production environment.
Remove anonymous users? [Y/n] n
... Success!
Normally, root should only be allowed to connect from 'localhost'. This
ensures that someone cannot guess at the root password from the network.
Disallow root login remotely? [Y/n] n
... skipping.
By default, MariaDB comes with a database named 'test' that anyone can
access. This is also intended only for testing, and should be removed
before moving into a production environment.
Remove test database and access to it? [Y/n] n
... skipping.
Reloading the privilege tables will ensure that all changes made so far
will take effect immediately.
Reload privilege tables now? [Y/n] y
... Success!
Cleaning up...
All done! If you've completed all of the above steps, your MariaDB
installation should now be secure.
Thanks for using MariaDB!
Import the Database
sudo mysql -u root -p
CREATE DATABASE noerklit_calendar;
from the path ~/react-calendar:
sudo mysql -u root -p noerklit_calendar < ./sql/noerkelit_calendar.sql
To check if everything works enter:
sudo mysqlshow noerkelit_calendar
Output:
Database: noerkelit_calendar
+------------------------------+
| Tables_in_noerkelit_calendar |
+------------------------------+
| calendar |
| calendarevents |
| category |
| category_event |
| cooperation |
| event_todo |
| role |
| role_event |
| role_member |
| sub_category |
| user_credentials |
| user_event |
| user_otp |
| users |
| users_pictures |
+------------------------------+
Now u can start the Backend by typing
cd backend && npm start
Maybe this appears:
> backend@0.0.0 start
> node ./app.js
Initializing Database...
Connetion Failed! SqlError: (conn=72, no: 1698, SQLState: 28000) Access denied for user 'root'@'localhost'
then:
sudo mysql -u root -p
GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost' IDENTIFIED BY 'root';
After entering npm start again, you should see somthing at https://localhost:9001/index :
To install the app with Docker, just run the docker-compose.yaml file by going to the project directory and running the following commands:
cd react-calendar
mkdir backend
cd backend
vi .env
The .env file lock the same as the as here
After you setup the env file u you can run:
docker-compose up -d
At the first insterllation daurter the whole thing a little longer, because he downloaded the packets.
output:
Starting calendar_db_1 ... done
Starting calendar_minio_1 ... done
Starting calendar_adminer_1 ... done
Starting calendar_fullstack_1 ... done
When everything is ready, the UI should be available at https://localhost:3000.
nano .env
Default:
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=root
DB_DATABASE=noerkelit_calendar
DB_HOST=<Your Database IP> // IF Diffrent
DB_PORT=<Your Database Port> // IF Diffrent
DB_USER=<Your Database User> // IF Diffrent
DB_PASSWORD=<Your Database Password> // IF Diffrent
DB_DATABASE=noerkelit_calendar
MAIL_USER=<used email>
MAIL_PASSWORD=<Mail Password>
MAIL_HOST=<provider imap>
MAIL_PORT=<imap port>
MAIL_TLS=false
MAIL_SECURE=true
MAIL_SERVICE=<provider>
MAIL_NAME= <your email name>
MINIO_ROOT_USER: <user name>
MINIO_ROOT_PASSWORD: <Passowrd>
MINIO_CLIENT_ENDPOINT=<your.endpoint>
MINIO_CLIENT_PORT=<port>
MINIO_CLIENT_USESSL=false
MINIO_CLIENT_ACCESSKEY=<Bucket Key>
MINIO_CLIENT_SECRETKEY=<Bucket Secret>
If you like this project and it helped you I would appreciate a little support!
The demo version is available to all free. All passwords are hashed and salted, so they are not visible in the database, but we recommend not to use passwords that you use somewhere. The server is automatically restarted in the evening and all data is deleted.