The FullStack Tourism Webpage is a modern platform designed to showcase the breathtaking beauty and tourism opportunities in Sri Lanka. Developed with cutting-edge tools like React, Tailwind CSS, and MongoDB, this project offers a seamless experience for global tourists, featuring interactive destination guides, secure backend integration, and responsive design.
Problems to solve/Requirements to Create
👉Lack of a centralized platform for Sri Lanka tourism information
Currently, there is no unified, interactive, and user-friendly platform that provides tourists with real-time information about Sri Lanka’s attractions, events, and local products. Most existing sites are outdated or lack dynamic user engagement features.
Current solution
Tourists rely on scattered blogs, outdated government portals, and social media to gather information.
How do we know it is a problem
Users often express difficulty in finding reliable, up-to-date details about tourist destinations.
Existing platforms lack immersive visuals and interactive content that capture the beauty and significance of key locations.
👉 Lack of immersive presentation of Sri Lanka's important places
Most tourism platforms fail to present Sri Lanka’s stunning landscapes and cultural heritage in an immersive, visually compelling way.
Current Workaround
Tourists resort to YouTube, travel vlogs, or word of mouth for a better virtual experience.
Evidence of the Problem
Limited high-quality, interactive content on official tourism sites.
Travelers frequently seek external sources for engaging visuals.
Goals - Achieved 🎯
💡To create a modern e-commerce-enabled tourism platform that enhances the visitor experience and supports local businesses.
Project goals
Build a FullStack Tourism Webpage showcasing Sri Lanka’s attractions and events.
Implement a ShadCN-based UI ecosystem for consistency and modularity.
Seamless User Experience
Secure & Scalable Infrastructure
User Stories
Visitor
Goals: Discover travel destinations, events, and cultural attractions.
Needs: Interactive guides, real-time updates, and mobile-friendly navigation.
Other characteristics: International users with varied language preferences.
Admin
Goals: Manage and track visitor interactions.
Needs: Secure dashboard, analytics, and content management tools.
Other characteristics: Requires role-based access control.
🌟 UI Design
📸Screenshots
🌐 Homepage
A stunning landing page introducing users to Sri Lanka’s vibrant culture and attractions
🗺️ Daily Posts
Discover top-rated destinations with detailed descriptions, photos, and travel tips
🧗 Adventure Page
Discover thrilling activities and must-visit adventure spots
✍️ Blogs Page
Read stories, recommendations, and travel experiences
🎉 Events Page
Read stories, recommendations, and travel experiences
🛍️ Product Page
Shop for one-of-a-kind souvenirs, handmade crafts, and local treats.
👥 About Us Page
Get to know the team and the mission behind the platform
Design system 🎨
The project utilizes ShadCN for UI components, ensuring consistency and scalability.
Development Phase
Technology Stack Selection
Frontend - React.js with Tailwind CSS
Why React.js?
Component-Based Architecture: Enables reusable UI components, making the frontend modular and maintainable.
Efficient UI Updates: Uses a virtual DOM for faster rendering and smooth user interactions.
Rich Ecosystem: Vast library support and active community ensure continued improvements.
Key Features of the Software
A centralised system to authenticate User in real time
Implemented JWT-based authentication to securely validate users across sessions.
Built protected backend API routes using Express middleware that checks for valid JWT tokens on every request.
Challenges Faced and Solutions
Problems:
Implementing a secure, centralised authentication system that supports real-time validation and role-based access.
Solutions:
Used JWT (JSON Web Tokens) for secure session handling.
Built protected routes in both backend and frontend using Express middleware and React route guards.
Get visibility from recruiters & peers