MakeEvents App with NodeJS backend and an Angular frontend
- 4 minsMakeEvents
About the app
Well, long story short, this is an app for creating and joining events for different groups. So far it is in development so it is not yet possible to create events for different groups just for a main or primary group and it is not yet possible to join events either.
The purpose of this app is that in my opinion there is no solution out there that can easily integrate Google Calendar for groups by joining events, receiving an invitation and important therefore the event into your calendar with previously set up notifications and reminders. This app would fill that void since you’ll be able to select a group whose events you’d prefer to see and join any of them after reading through the description and seeing the date and already joined members of that event.
Frameworks - tech behind
I already wrote a blog post about creating a backend application in NodeJS that can integrate Google’s calendar API ( link ). In that article, I explained how to set up the project and how to connect a Google Account to the project and after all how to list upcoming events from a default calendar. I used NodeJS with TypeScript in the backend for better readability. I am testing with the Jest framework (sadly, not yet). I use CircleCI for continuous integration on GitHub since it is seamless after set up. I am planning though on migrating to GitLab since it provides better and even more convenient integration of testing and maintaining tools.
Moving on to the frontend part, I use Angular. I set up a PWA (progressive web app) as it was stated on angular.io. Therefore my web app prompts the user to add the app to the home screen where it has all functionality as on the web:
Backend
The backend is already capable of listing all upcoming events in different calendars based on selection, that is the purpose of the small popup window on the /calendar endpoint. Inserting a new event in a calendar is also implemented on the backend but not yet on the frontend. It is also possible to list all the calendars that are in the Google Account. The endpoints are the following:
| METHOD | Endpoint |
|---|---|
POST | /save?calendarId=_calendarId_ |
GET | /calendars |
GET | /all?calendarId=_calendarId_ |
POST | /update?calendarId=_calendarId_&eventId=_eventId_ |
This can be tested on MakeEvents Backend. This is not secured yet with a web token but it will be in the long run so only the frontend page could access it, although I don’t think that anyone would want to hack others events. :)
Frontend
The frontend is pure Angular as I am not using ngrx, no store no Redux like behaviour since the app is pretty small and I didn’t want to make it harder to code but I am starting to see the disadvantages of this approach as I am moving on with implementing more complex features.
The app consists of three main parts so far, such as: Event creation, Calendars - Event lists and an About page with personal and contact info.
I am using Material Design from angular.material.io this way I can cut off on handling site-build which I am not a fan of so to say. Although I had to implement some design changes because I wanted a unique look, not just a basic template styling.
So far this is the state of the app. I am planning to improve it by a lot, but this is the first app that I built completely alone with no help of others and doing every detail on my own.
Links to the GitHub repositories:
@Regards, Alex
Alex Olar
Christian, foodie, physicist, tech enthusiast