Alt Text

Welcome to part-2 of the series. You can find part-1 here , in which i completed first 10 videos of udemy top instructor Maximilian Schwarzmüller free youtube course.

Below is the course Build a Project with GraphQL, Node.js, MongoDB and React.js

In the second part which starts with video-11, he starts with installing React and other dependencies. We then create the Authentication page, which have both login and Switch to Signup link.

login pagelogin page

The signup page is quite similar to the login page.

signup pagesignup page

Then we create the event page, in which we can create a event. If you are owner of the event, you are show a different message.

Event pageEvent page

When you click on Create Event button, a modal is open which contains a form. We code this in the series.

Add EventAdd Event

We can do the booking by clicking on the View Details button. Once we click on Book, the event is booked for the logged in user.

BookBook

In the Booking page, we can see all the booked events of the user. We can also cancel from this page.

CancelCancel

We are also using a very good CSS spinner whenever our query is done to the GraphQL endpoint.

Now, we use a npm module dataloader in video-20 and it is used to improve the performance but is a bit complicated and adds complexities to the code. You can use the project very well without this also.

Also, in video-21 we use a reach charting library to show chart. We can avoid this also as it doesn’t make any sense in this project.

ChartChart

Now, the biggest plus of the whole series is that it does use any external tool like apollo server or apollo client, like in any other tutorial.

This series is like learning vanilla Javascript instead of a framework(React) and i really enjoyed it. I will create something new following this series soon.

The complete project can be found in my github repo here.

This post is also available on DEV.