Event Manager
Event Manager is MERN stack web based application, that lets you schedule events/messages with images and remind/send them at your given date and time. It's under development - adding more features and better optimization.
Project Idea
The whole intention of making this project :
- Let users sign up.
- Create events(messages)with image to be sent at specfic date and time via E-mail.
- Let users create many events(messages), such as all upcomming birthdays for next 4 months.
- Show status of the event(message).
- It will actually show your email on the reciever's end but it's actually just a dummy email.
- All replies will be sent to you directly by the user.
Live Project
http://eventmanager-web.herokuapp.com
Note: It will not work in https
Getting Started
npm start
will run the app. You have to specify Environment variables beforehand to make it work.
Environment variables needed to run this are : REACT_APP_TIME_API_KEY
.
The timezone API used is https://timezonedb.com/api
Prerequisites
What you need to install the app and how to install them
Simply run npm start dev
in the root directory to get the front-end running.
Note: You will have to run the node server and RESTapi this app consumes in order to make it fully functional.
Installing
First, install all the dependencies needed to run the app.
package.json looks like this.
{
"name": "event-reminder",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@sendgrid/client": "^6.3.0",
"@sendgrid/mail": "^6.3.1",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"dotenv": "^6.1.0",
"es6-promise": "^4.2.5",
"isomorphic-fetch": "^2.2.1",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"react-fontawesome": "^1.6.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"react-table": "^6.8.6",
"reactstrap": "^6.5.0",
"serve": "^10.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
}
Now run npm i
or npm install
After installing all the dependencies:
npm start
Follow these links:
Node server repo
https://github.com/SaudTauqeer/eventReminder-NodeServer
RESTful Api repo
https://github.com/SaudTauqeer/eventReminder-RestApi
Deployment
I have simply deployed it on Heroku with github integration.
Authors
- Saud Tauqeer - (https://github.com/SaudTauqeer)
License
This project is licensed under the MIT License.
Under fixing
-
Memory Leak. The app still have some memory. I fixed them earlier --> commit id :
b9e78612c4070931e7997e94fb5ad1e8dd0a2c13
but it was using axios and itscancelSourceToken
. After running into several preflight issues with sending credentials to the API, I discovered that it is an issue with axios that the settingaxios.defaults.withCredentials = true;
and not using an instance ofwithCredentials
at all, solves the issue. Hence I shifted tofetch
for better support and had to drop memory leak --> commit id :b937363fe1d7ccf635bf405d719a19351905fb7b
. The memory leak issue can be resolved more elegantly using React hooks. -
Heroku idling. Heroku free tier dyano idles your app after 30 minutes of inactivity. So i created endpoints on the API and server. And I'm sending a request to them periodically to keep the server awake. Otherwise it will not process the sending of emails.
-
Form needs more validation and better routing can be addedBefore form validation was done on the REST API but now after testing and thinking about it, it's best to move the validation to the React side -> less consumption of server resources -> better management with state -> better validation time rather than waiting for a response from the API -> as well as live validation. -
For better Redirects I'm currently looking into Protected Routes -> React is my preferred choice for now but I'm also looking into NextJs.
-
Will be removing the option of letting the user input a sending email. The user can add a permanent sending email -> to prevent spoof emails -> and use the app as a spambot.
-
UI improvements -> Working on letting the user edit their saved event, let them change timezone - timezone will be stored and shown in a dropdown and they can change timezones at any time. Add Component-specific renderings such as for event sent status, date and time rendering. Full-fledged Form validation such as checking for a correct email, correct time vice virsa. Let user delete their account permanently -> user will not be able to register with that email again as to prevent any sinister usage of the app.
-
Removing fix timezone as it's the first sign of a bad database design. I have worked on a solution that will be added with the rest of features that will fetch time and date based on user's Ip address.
-
Create Event page will be removed, instead a modal will be a displayed when clicked create event on the events section. Trying to improve overall UX experience.
The core functionality of the App is working but I'm actively developing on new changes I have written in the changelog to of course make the app functional better and let users experience a more friendly and smooth experience.
Fixes for API and Node server are in their respective README.md
Acknowledgments
I have used this Bootstrap template with react-strap and edited it according to my need.