The making of EventGlee: A Full-stack application
The big task in front of my software engineering career was to find a real problem and develop a software solution for this need. This did seem like a daunting task at that point, but my conviction about finishing up this task before the deadline was backed by the strong learning skills I had mastered during the software engineering program.
In this article, I will explain just how I was able to successfully build and deploy the full-stack web application. This includes my thought processes, some tools used, and challenges etc under these headers:
About the Application
Project Research
User Interface
Application Server
Deployment
Conclusion
About the application - EventGlee
The application allows users to discover and search for events in their cities.
Logged in users can create an event in the platform. While other logged in users can search for upcoming events and get tickets for the events.
The event ticket is sent to the email of the user.
Github repository of this project
Project Research
The first crucial step was to identify a need and outline the necessary elements that would breathe life into the process of building a web application. Drawing from a personal experience in 2019, where a group of friends and I encountered challenges while attempting to organize an event in our hometown, I found inspiration to develop an application that would enable the public to create events and allow users to obtain tickets for their preferred events.
The web architecture of the application facilitated the seamless exchange of data between the client, the application server, and the database.
Web Architecture shows the flow of data in the application.
One of the primary challenges faced during the research phase revolved around selecting the appropriate development tools. I discovered a range of innovative tools, particularly those reliant on JavaScript, which differed from the Python-based tools I had previously utilized in smaller projects. The following are the key tools employed for this project:
React
ExpressJs
Mysql
Nodemailer
Firebase
By using these tools, I was able to leverage their unique features and capabilities to enhance the development and functionality of the web application.
Frontend - User Interface
Developing a user-friendly interface is as important to the success of this application. I used a single page application (React Js) to implement the user interface. The homepage clearly explains the key features of the application, with links to every part and functionality of the application.
There are three (3) forms for collecting users' input. The user's input values are checked and handled as well as a notification label which improves the experience.
For frontend user authentication, Firebase was employed, utilizing email and password as the authentication method. However, it is important to note that email verification is currently not implemented, but can be considered as a future enhancement.
In addition to React.js and Firebase, the frontend leverages other libraries, including Bootstrap, to ensure a responsive design. These libraries offer styling options, enabling a more efficient and polished development process.
The frontend of the application delivers a user-friendly interface that effectively communicates the application's features, securely collects user input, and enhances the overall user experience.
Backend - Application Server
The application server is built using expressjs which serves the API. Certain API routes are protected for logged in users only. The authenticate middleware which authorizes clients who access endpoints is implemented by the firebase admin.
Image uploads from the client are hosted in Cloudinary, this ensures the Cloudinary url of the image is saved in the database. This functionality is implemented by using multer middleware with Cloudinary API. (I'll write an article on how this is implemented).
Emailing service sends the tickets of events to users email if user purchases a ticket. Nodemailer handles the servers mailing. PDF toolkit creates the pdf of the ticket. The image of the event fetched from cloudinary is attached to the pdf as a buffer.
In terms of database interaction, the application utilizes the mysql2 node package. This package provides seamless integration with MySQL databases, enabling consistent database calls. The creation of a connection pool ensures efficient and reliable database access, while the package's built-in support for promises simplifies asynchronous operations.
By utilizing Express.js, Firebase Admin, Cloudinary, Nodemailer, PDF Toolkit, and mysql2, the backend of the application operates as a robust and efficient application server. These technologies collectively facilitate secure API handling, seamless image uploads, email ticket delivery, and reliable database interaction.
Deployment
To deploy the web application, the Nginx web server was utilized. The React communicates with the application server's API through proxy pass configuration, ensuring smooth integration and seamless data exchange between the frontend and backend.
For running the application server, I employed the popular process manager, PM2. This robust tool allowed for efficient management of the application server, ensuring it runs continuously and is automatically restarted in case of any failures or crashes.
Utilizing Nginx as the web server and PM2 as the process manager ensures efficient routing of requests, and automatic recovery from any issues, ultimately providing a seamless user experience.
Conclusion
In conclusion, the entire project spanned a duration of 3 weeks, during which I embarked on a journey of self-learning and sought guidance from friends to overcome various challenges. One of the key takeaways from this experience was the ability to adapt and learn new technology stacks, which played a crucial role in the successful completion of the project.
Throughout the development process, I honed my skills in problem-solving, critical thinking, and leveraging innovative tools and technologies. This project allowed me to further enhance my knowledge and understanding of full-stack web application development, from frontend interfaces built with React.js to the backend application server utilizing Express.js and interacting with a MySQL database.
The collaborative effort between frontend and backend components, coupled with the seamless integration of external services like Cloudinary, Nodemailer, and Firebase, resulted in a comprehensive and functional web application.
Undoubtedly, the journey was challenging, but my dedication to continuous learning and the support from friends propelled me forward. The experience gained from this project will undoubtedly serve as a solid foundation for future endeavors in the software engineering field.
As I reflect on this project, I am proud of the skills I acquired, the solutions I implemented, and the growth I achieved. The ability to adapt, learn, and persevere in the face of challenges is an invaluable asset that will undoubtedly contribute to my future success as a software engineer.