Event Vibe

Elmustapha Abourar
4 min readJan 8, 2024

Web app that help you to share you event with people

Event Vibe Logo

The project, named “Event Vibe”, is a web application developed using Next.js, a popular framework for building React applications. It is written in TypeScript and JavaScript, and utilizes npm for package management. The application is designed to run on a Linux operating system macOS and others OS. The README provides detailed instructions on how to install, use, and contribute to the project. The purpose or functionality of the application is not explicitly stated in the README file. However, given the name “Event Vibe”, it could potentially be related to event management or a platform for sharing and discovering events.

I began developing this application, with ‘Authentication’, using Auth0.js. I obtained tokens from providers, specifically using Google as a provider. The project also includes email and password authentication. However, to enhance security, there is a need to implement two-factor authentication or email confirmation.

I proceeded to the second step after completing the initial setup, which involved defining my schemas and databases. Given that I’m using Next.js, a framework that supports both client and server-side rendering, the most suitable database for this project is a SQL-based PostgreSQL DBMS. This database is hosted on a Virtual Private Server (VPS) provided by Digital Ocean.

To establish a connection with my PostgreSQL database, I utilized Prisma ORM. This is a robust ORM for Node.js and TypeScript, built on Rust. It boasts features such as automated migrations, type safety, and superior auto-completion capabilities.

Schemas of the project

Transitioning to the front end, I constructed a traditional Navigation bar with a drop down user menu that appears if the user is authenticated. This menu provides multiple routes to the following sections:

  • MY VIBE: Events booked by users and accepted by the organizer.
  • MY RESERVATION: Events booked and awaiting user validation.
  • MY EVENT: Events that I have shared with users.
  • Settings: A profile page for editing and deleting.

For the Reservation page, users can book their place for an event. If the event spans multiple days, they can select the duration of their reservation by interacting with a calendar to identify their arrival date and final day at the event. Please note that a user can only book for a maximum of three people, with the price being per person. Here is an image illustrating the layout of the reservation section.

Image from the Web App

For the back end, I utilize CRUD operations to handle all tasks related to retrieving, updating, and deleting user data. Additionally, Next.js offers a convenient method to implement an API endpoint, complemented by front end components that interact with the back end through these API actions.

I’m using Redis to cache data, and it’s hosted on a Digital Ocean VPS. I prefer Redis for caching because of its impressive speed, which significantly improves overall application performance and response times for a better user experience.

front page

My MVP project will soon include a user matching feature, allowing users to connect with those attending the same events and sharing similar interests. I’m also adding an email notification system, where users will receive automatic updates on their reservation status once organizers accept or decline their bookings.

I haven’t implemented testing using Jest just yet, but it’s on the horizon and will be fully available in the next few days. Stay tuned for more updates!.

Last but not least, the repository is hosted on a Digital Ocean server for production. For server management, I’ve implemented Nginx and PM2. Additionally, I’ve secured the site by obtaining a simple certificate through Certbot. This setup ensures efficient deployment, server control, and a secure connection for users.

Categories

To secure my code, I use UFW permissions, and I also restrict root access through careful configuration. This helps prevent unauthorized entry points and enhances the overall security of the system.

It’s been a swift three weeks to wrap up my year-long Full Stack Developer specialization. Grateful for the experience and looking forward to more challenges ahead!

--

--

Elmustapha Abourar

Software Engineer Student @Holberton School & Pro Dancers Choreographer DeeJay / Beat Maker