World Wise
ReactCSS ModuleNode.jsExpressTanStack
World Wise is a travel tracking app it helps users keep track of their travel adventures. It allows users to log various destinations, keep memories, possibly view stats about their travels, or even visualize their journey on a map. This type of app could be great for travelers who want to document and revisit their past experiences!
Key Features
πΊοΈ Interactive Map Integration:
- Users can visually track their journeys using an interactive world map.
- Add markers for locations visited or plan future destinations.
π Travel Statistics:
- Displays insightful statistics such as the number of countries visited and city list, travel advantages and notes releted to spesific city,and information link about this place.
π Customizable Trip Logs:
- Displays insightful statistics such as the number of countries visited and city list, travel advantages and notes releted to spesific city,and information link about this place.
π» Responsive Design:
- Works seamlessly on desktop and mobile devices, offering a smooth user experience.
Front-End Technical Implementation π»
π¨βπ» Core Technologies
- React (react, react-dom): Utilized as the core framework for building a dynamic, component-based user interface.
- React Router DOM (react-router-dom): Handles client-side routing for seamless navigation between pages without full page reloads.
β State Management:
- Redux Toolkit (@reduxjs/toolkit, react-redux): Manages the application state efficiently with slices, providing an easy-to-use API for actions and reducers.
- React Query (@tanstack/react-query): Facilitates server state management with features like caching, automatic refetching, and synchronization between the client and server.
π HTTP Client:
- Axios: Simplifies API requests, handling both RESTful and custom backend endpoints for CRUD operations.
π¨ UI Components and Styling:
- React Icons: Provides a library of customizable icons for enriching the user interface.
- React Toastify: Displays elegant and customizable toast notifications for user feedback (e.g., success or error messages).
- React Datepicker: Implements a user-friendly date selection interface for date-related inputs.
πΊοΈ Mapping Features:
- Leaflet and React Leaflet: Powers interactive and customizable maps for geospatial visualizations, such as marking locations or tracking routes.
π οΈ Development Tools:
- JSON Server: Simulates a REST API backend for development and testing with mock data.
- Install & npm: Manages dependencies and project configurations efficiently.
Back-End Technical Implementation π
π Core Technologies:
- Express.js (express): A minimalist and flexible Node.js framework used for creating RESTful APIs and handling server-side logic.
- Mongoose (mongoose): A MongoDB object modeling library that simplifies interaction with the MongoDB database through schema-based models.
π‘οΈ Authentication and Security:
- Bcrypt.js (bcryptjs): Provides hashing capabilities for securely storing user passwords and handling authentication processes.
- JSON Web Tokens (JWT) (jsonwebtoken): Implements secure user authentication through token-based authorization.
π οΈ Development Tools:
- Nodemon (nodemon): Automatically restarts the server during development upon detecting changes in the codebase, streamlining the development process.
π HTTP Client:
- Axios (axios): Facilitates server-to-server communication by making HTTP requests to external APIs or microservices.
Achievements π
πΊοΈ Implementation of Map Data Visualization
- Successfully implemented interactive map visualization using GeoJSON and the map library Leaflet.js.
- Enhanced user satisfaction significantly by providing a feature that intuitively displays countries and cities visited by users.
π Improved Data Processing and Analysis Skills
- Efficiently stored and retrieved user data (visited countries, cities, travel records, etc.) using MongoDB.
- Strengthened data analysis skills by calculating and visually presenting travel statistics (number of visited countries, distance traveled, travel days, personal notes, etc.).
π» Responsive Design
- Independently developed a responsive UI using CSS Modules and React, providing an optimal user experience across various devices.
What I learned π
π»ππ¦ Comprehensive Understanding of Full-Stack Development
- Gained a deeper understanding of the roles and interactions between the front-end and back-end.
- Learned the importance of client-server architecture and methods to maintain data consistency and reliability through RESTful API design and state management.
πΊοΈ Map-Based Data Visualization
- Acquired skills in visualizing user information on maps using GeoJSON data.
- Learned how to utilize map libraries and optimize data rendering on maps.
πΎπβ‘ Optimization of Data Storage and Retrieval
- Mastered efficient management and retrieval of large-scale data using advanced queries and indexing in MongoDB.
- Improved skills in systematically managing user data through data modeling.
π Enhancing User Experience
- Gained experience in designing intuitive and responsive UI/UX through multiple upgrades, creating interfaces suitable for various user environments.