Roamlog

It's a react-based travel tracker web application that allows users to track the countries they have visited. Users can add new countries to their visited list, view statistics about their travels, and maintain a wish list of countries they would like to visit.

Project Brief

Independently run an industry-relevant project from start to the end that showcases your skills and competences as a Frontend Developer

Current Features

• Interactive world map using Mapbox (react-map-gl)
• Mark countries as visited or add to wishlist
• Country search and list view
• Basic stats page with visualizations
• Local storage for data persistence

Planned Improvements and Implementations

Feature Enhancements

• Add more detailed statistics to the stats page
• Implement city-level tracking within countries
• Add a feature to mark countries where users have lived
• Develop advanced search and filtering capabilities
• Introduce animations and effects for improved user interaction

Technical Improvements

• Migrate to Next.js for better performance and SEO
• Implement TypeScript for improved type safety and developer experience
• Utilize React Context to manage global state and reduce prop drilling
• Increase use of custom hooks for better code organization and reusability
• Develop a backend for user authentication and cross-device data syncing

Code Quality

• Improve overall code structure and readability
• Enhance error handling and implement comprehensive error boundaries
• Optimize performance, particularly for map interactions

Accessibility and SEO

• Implement accessibility features to ensure the app is usable by people with disabilities
• Improve SEO aspects, including metadata, semantic HTML, and performance optimizations

This project is a work in progress and serves as a learning platform for advanced React concepts and frontend development practices.

Tools and stack:

• HTML / CSS / React / Tailwind

Project link:

Website: Visit the website

Third-party libraries:

• react-map-gl - a suite of React components for Mapbox GL JS-compatible libraries.: react-map-gl
• Material Tailwind - the Tailwind CSS Components Library: Material Tailwind

Project Setup Instructions:

To set up this project locally, follow the steps below:

To open the website locally:

1. Clone the Repository:

   https://github.com/hyper-island-exploring-code-project/doraemon.git

2. Install dependencies:

   npm install

3. Running the website:

   npm run dev

4. Open web site locally