Introduction:
Welcome to my programming challenge blog! As part of my commitment to continuous learning and development, I've embarked on a journey to build and deploy new projects each week. For Week 3, I’m excited to share my latest creation: a fully-fledged frontend dashboard tailored for travel agencies. This dashboard offers users an intuitive way to navigate and view travel options in various formats, including Kanban, list, and table views.
Project Overview:
The travel agency dashboard is designed to enhance the user experience by providing multiple ways to visualize travel data. Users can sort and filter options based on various criteria, making it easier for them to find the perfect travel package. Here’s a closer look at the key features of the dashboard:
Key Feature
Multiple View Option:
Kanban View: Ideal for visualizing different stages of travel packages, allowing users get better details of the travels package. Here user can get the full details of the travels when user click the kanban view.
kanban Detail veiw:
List View: A straightforward format that displays travel packages in a linear fashion, making it easy to skim through options.
Table View: Offers a detailed comparison of travel packages with columns for essential information.
Sorting Functionality:
Price: Sort from low to high or high to low, helping users find options that fit their budget.
Rating: Sort by customer ratings to prioritize quality experiences.
Duration: Sort by trip duration, allowing users to select packages that fit their time constraints.
Advanced Filtering Option:
To further enhance user experience, the dashboard includes filtering capabiliting based on
Location: Users can filter packages by destination.
Duration: Narrow down options based on how long they want their trip to be.
Services Offered: Filter based on specific services included in the package (e.g., guided tours, meals, accommodations).
Technology Used:
Frontend: React for the UI and React Lucide for different icons
Tailwind: For styling part i have used tailwind, its make life easier .
Since Its only the UI (user interface) so , i havent used any other libraries or framework. Data is being stored in json format.
Challenges Faced:
Responsiveness: For the responsibeness part, other part was quite easy it was like setting height and weight of my container based on the viewport of the user. The challenging part was of changing the width and height of the sidebar which appears when user click the icon it was like how should i manage it and then how should i make my layout to look it as, well i tried and build it its working but not as smooth as it should work.
Reusability of different component: As we know that React is used for reusing component that can be further used.With the help of the conditional rendering i have used different component which should be used at proper place.
Creation of differente models : For the creation of models, as we have to maintain the state variable which tells us weather the model is opened or not and then after opening the model we also need to have a event or button which will call the state variable to close the model.
State management: Well for the state management, everthing was quite easy and feasable but the challenge starts when i was trying to implement the advance functionality of filtering i.e: when user tries to filter different types of the data based on location, duration, servies and price. Then the idea gets clicked in my mind that i would have a global state variable in context and another dummyData state variable which will holds all the data is beign stored based on the manipulation that i have done so far and whenever i found that user is not doing any manipulation then i will re-store the dummy manipulation data variable with the actual data. Through this way i was preserving the data and able to perform differente filtering operation.
Conclusion
This week’s project has been an enriching experience that allowed me to deepen my understanding of React and state management while creating a practical tool for travel agencies. The dashboard not only showcases my coding skills but also emphasizes the importance of user experience in application design.I’m excited about the potential improvements I can make in future iterations, such as adding user authentication or integrating real-time data from travel APIs. Stay tuned for next week’s challenge!
I am thankful for the resources and differente youtube tutorial and to chatGPT,copilot as well.With these, i learn and whenever got stuck use them to solve the problem.