My Progression in Making Travel website using laravel

Technologies: PHP, MySQL, Laravel, TailwindCSS

GitHub | Demo

summary of the project (TL;DR Version)#

Tour travel website that allows users to register an account and make payments online. The website includes a CMS (Content Management System) for the admin to manage the website content and orders. The website also includes a payment processing feature.

Background#

I recently made a personal project to create a travel agency website for a family member who works as a tour guide for school groups. The goal of this project was to create a prototype for a potential future website for their business and to use it as an opportunity to improve my skills in web development. Through the process of designing and implementing the website, I learned a lot about building dynamic, user-friendly websites. In this write-up, I will share my progression in making the website including the tools and technologies I used, the challenges I faced, and the lessons I learned.

Choosing technologies#

For my first big personal project, I wanted to pick technologies that I was already familiar with, but also push myself to learn something new. After some consideration, I decided to go with the PHP framework Laravel, which I have some experience with it, and the CSS framework TailwindCSS, which I've been wanting to try out.

I decided to use Laravel as the framework for this project because it has a lot of useful features, is easy to use and also and is widely used in the industry. And I'm excited to learn TailwindCSS because it's a hot new framework that a lot of people are using. I'm confident that these technologies will be perfect for the project and help me create a really cool addition to my portfolio.

Database Design#

these are the basic functionalities I had in my mind for the project:

Admin#

• Manage destinations (CRUD)
• View orders and users page
• Update order status with the ID parameter

User#

• Register for an account
• View the destination with the ID parameter
• Filter destinations with tag or location parameter
• Update profile with username parameter
• Order and pay for the destination with an ID parameter and date parameter
• View and upload proof of payment
• View order history
• View Dashboard
• Rate destination if they have ordered the package
• View and upload proof of payment page

as for the database, I made this simple diagram as a baseline for the project.

Webdesign#

For the web design of this project, I utilized a variety of components from the collection of free Tailwind CSS components available from Awesome things related to Tailwind CSS. While design is not my strongest area, these components helped me create a result that I am proud of. I am grateful for the resources and inspiration provided by this collection.

Development process#

In order to stay within the scope of the project, I tried my best sticking to the plans I had laid out for features, pages, and routes. I believe it helped me to stay on track and deliver a successful final product.

During the development process, I made a change to my initial database design. Initially, I planned to handle images manually, but I discovered a package called media-library that made it easier to manage files with Eloquent models. This package also provided a range of useful functions, such as the ability to convert images to different resolutions using the registerMediaConversions method. This package helped me to improve my workflow by providing useful functions that allowed me to manage files and images within the project more.

problems I came across#

Initially, I made the decision not to use any JavaScript libraries in order to keep the project lightweight. However, in hindsight, this was a mistake as it limited my ability to learn and explore more about JavaScript and also resulted in a clunkier user experience. As I continued with the project, I struggled to find a suitable WYSIWYG library that was both modern and user-friendly without the need for a JavaScript framework.

Looking back, I realize that using a lightweight JavaScript framework like AlpineJS could have greatly improved the website's performance and user experience. In the future, I will be more mindful of the role that JavaScript plays in my projects and consider its potential benefits more carefully.

here are a little demo of how the project looks#

homepage#

Destination Page#

example page of the destination package where a user can:

• order the destination package
• check the package details
• check other user reviews
• rate the package if the user has a history order of the package

Demo when a user proder a package#

Demo when a user has to upload proof of payment for the admin to confirm the order#

Admin update status of the order if the receipt is valid.#

Admin CRUD with WYSIWYG editor for destination#

What to be improved from this project (roadmap)#

• Improve the website's user interface and user experience with JavaScript
• Upgrade the WYSIWYG editor for better content creation
• Offer customizable package options with different pricing options
• Add image and file management capabilities
• Implement a report system for tracking and analysis
• Optimize the website for search engine optimization
• Add social media authentication options (Facebook, Google, Twitter)
• Integration with payment gateways
• Integration with marketing and analytics tools
• Implementation of security measures

What I learn & want to improve myself from this project#

Be more organized#

I noticed that I often forgot my work plan and jumped between tasks. To improve this, I will create a more organized plan by making lists of the tasks I want to complete and breaking them down into smaller, achievable pieces. This will help me stay on track and focus on one task at a time.

Use Git branches#

Use Git branches: In this project, I pushed everything into the main branch, which became messy at times. To improve my workflow, I will utilize Git branches more effectively and create a plan for how I will use them in my workflow. I will keep in mind the importance of learning more about Git and improving my skills in this area."

Improve Code Readability#

Improve code readability: Code readability is something I want to improve over time. To do this, I will follow best practices and standards for writing clean, readable code, and consider taking a course or working with a mentor to learn more.

Closing Statements#

Although the project was relatively simple, I encountered many problems that I had to solve, which helped me learn and grow as a web developer. Although it is not yet finished, I am proud of what I have accomplished and am excited to include it in my portfolio. Thank you for reading.