Hero - Guest State
Travel Stories
Fullstack platform for publishing travel stories with authentication, user profiles, and content management paths.
RoleFrontend Developer + backend contribution
TypeFullstack Content Platform
LocationCourse project
FocusBuilding a scalable content platform with authentication, publishing paths, and a profile-driven user experience.
StackNext.js, TypeScript, Node.js, REST API
Duration2 weeks
Project summary
- Project type
- Fullstack web platform
- Goal
- Build a travel stories platform with user accounts, profiles, and story publishing features.
- Main features
- Authentication
- User profiles
- Story publishing
- Backend API
- Database integration
- My role
- Fullstack development contribution across frontend, backend API, data structure, and feature implementation.
- Stack
- React
- Node.js
- MongoDB
- REST API
- Result
- A fullstack travel platform with account-based user paths, content publishing, and structured backend integration.
Problem
The project required a fullstack platform where users can register, publish stories, manage profiles, and interact with content.
Solution
As part of a 12-person team, I contributed to both frontend and backend development. I built key UI components, including headers, modals, story cards, and the profile editing path, and worked with shared data structures on the backend.
Result
The platform supports authentication, publishing, and user interaction, demonstrating real-world fullstack architecture and teamwork.
What I did
- Implemented multiple header variations for different page contexts
- Built the confirmation modal component (ConfirmModal)
- Developed story card components
- Built the profile editing page
- Implemented active navigation logic based on route
- Integrated SVG sprite system
- Optimized image assets and structured public resources
- Contributed to backend typing and shared data structures
- Added project documentation (README)
Hero - Guest State
Public landing experience introducing the platform and inviting new users to join the community.
Hero - Authenticated State
Authenticated landing state showing how navigation and available actions expand after login.
Hero - Authenticated State
Authentication
Login path providing access to personalized features, profile actions, and story publishing.
Authentication
Responsive Design
Responsive adaptation of the landing experience across desktop and mobile screens.
Desktop view
Mobile view
Stories Feed & Discovery
Main content feed combined with category-based discovery for browsing and exploring travel stories.
Stories Feed & Discovery
Travelers
Community directory presenting authors and making profile exploration easier.
Travelers
User Profile
Personal user area for managing saved stories and reviewing individual activity.
User Profile
Story Creation
Publishing path for creating and sharing new travel stories.
Story Creation
Story Detail
Full article view with author metadata, category context, and reading-focused layout.
Story Detail
Need a website that makes customer contact easier?
I can prepare a clear website with a simple path to an inquiry, booking request or conversation.