Take you there

<a href="https://takeyouthere.vercel.app"> <img src="/public/images/takeyouthere-pin.png" width="170" alt="'Take you there' original marker/pin." style="filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .7));"> </a> Madonna never specified "where", though <div align="center"> <img src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB" alt="React" title="React" /> <img src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" title="TypeScript" /> <img src="https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white" alt="Next JS" title="Next JS" /> </div> <a href="https:/github.com/JuditKaramazov">🐱 /JuditKaramazov</a> <a href="https://karamazfolio.xyz/">📍 Portfolio</a> <a href="https://karamablog.xyz">☕ Blog</a>

🔧 Getting started
🚪 Introduction
🧬 Structure
- 📁 Repository
- 🌐 Website
🔮 Features
💅 Style
🙌 Immense thanks to them awesome Sponsors
🏛 License & Copyright

🔧 Getting started

Surprisingly or not, this little creation is (again!) a Next.js project, flavored with our dearly beloved React and TypeScript wombo-combo. "Old" but gold, am I right? If by any chance you'd want to get started with Next.js and its characteristic neat results, allow me to remind you that achieving such a goal couldn't be easier: all you'll have to do is follow these steps. Carefully. Patiently. Covered in blood and sweat throughout the entire process.

First, clone this repository:

$ git clone https://github.com/JuditKaramazov/TakeYouThere.git

Then, install the dependencies:

$ npm install

Finally, start the project:

$ npm run dev

You are good to go! However, since this repository is meant to become a "shooting range" for my co-author to get into Git and GitHub's mysteries, you will also find some useful guidelines indicating:

How to run the project on your local machine for development and testing purposes. It will definitely help you get started!
How to create a pull request in order to add a new marker. There's an issue template available!

[!TIP] Whatever you decide to do, please remember to respect the Code of Conduct while interacting with the project and the platform itself. Thank you so much for your time and patience!

🚪 Introduction

Maps have always been an interesting concept to me. Besides the ones we mentally create in our heads (this is, the basic orientation guidelines just so that we won't end up lost in our own city), the idea of a physical item revealing the very soul of the spaces we inhabit (or simply plan to visit) holds a mysterious, evocative power that not many other objects can elicit.

When it comes to video games, for instance ("you... you are back, Judit! And you are talking about games - again!" I couldn't be sick forever, guys), I recently had the pleasure to play two works that, while different in style, shape, genre, and mechanics, incorporated the map as a key element of the overall experience. The first one, Signalis, makes a clever usage of it, as it facilitates a navigation that otherwise, would be impossible for our brains to digest; like a good student of Resident Evil and Silent Hill, the map graphically represents the maze of interconnected rooms, corridors, and spaces we'll have to (re)visit to advance. On the other hand, Inscryption traps the player in a cabin in the woods, forcing them to play a card game against a mysterious, shadowed arbiter. In this case, an ever-unfurling map guides both the actions and interactions with our kidnapper, who also happens to be a threatening yet brilliant storyteller. In both cases, the mechanic and evocative connotations of the map are unparalleled: they might seem to represent mere tools, but they are also capable of expanding the limits of human imagination beyond what we'd consider possible.

This applies to the potential of virtuality, of course. What about physical maps, though?

<img src="/public/screenshots/inspiration.jpg" width="800" alt="Map of the Council of Europe." style="filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .7));"> 🗺️ Judit, the unmatched traveler. Note the irony.

Undoubtedly, maps gained new connotations in recent times: without the "dragons" restriction, our societies deeply embraced the possibility of keeping such practical tools in our pockets, even if just in a virtual way. No more space subtracted from our backpacks. No more crumpled sheets. No more coffee spilled on them. Although I myself never experienced the real weight of old-fashioned maps, I still found creative ways to fantasize about them - especially while living in Austria, where I started playing around with some pseudo-maps aiming to represent my new position as a pilgrim lost in the middle of nowhere.

As seen above, I too had my weaknesses. Once I started traveling around Europe, I decided to graphically represent the places I visited in the most rudimentary way possible. "Not to forget", I suppose. That's another beautiful aspect of maps: they keep both the geographical spaces and the corridors of individual and collective memory intact.

This idea inspired Take you there: an interactive map empowering users to set different, customized markers in order to immortalize the places they visited together. Was it just a trip? Perfect. A special event? A café you enjoyed? Pin it and show a picture symbolizing the importance behind that moment, then. Where is quite a blurry concept, and if Madonna didn't specify where that place was, I surely won't make it clear either!

🧬 Structure

Before exploring the website's structure, it would be interesting to highlight that this is supposed to be a shared repository, which justifies the existence of wider guidelines, tips, and indications if we compare this one to some of my old projects. That said, let's first have a look at the project and its specifications.

📁 Repository

As stated in the initial section, I provided some extra guidelines allowing users to navigate the code and implement changes with ease. In case you'd want to know more, make sure to read these indications before getting started:

Setup and development commands (starting the development server, testing, linting...) -> ⚙️ available here.
Pull request template -> 📝 available here.
Fork, clone, add pins, and submit your changes: how to -> 📚 available here.

🌐 Website

As for the website, despite the simplicity of its main configuration and disposition of elements, it is still effective enough for us to achieve our goal: creating an interactive map capable of preserving and displaying our shared memories.

Essentially, Take you there consists on:

An interactive map with several available themes.
A Menu button triggering our Sidebar component.
A Sidebar containing two main sections:
Locations: This section displays all the pins, detailing the city, country, distance/date, and author. It's possible to sort them by date or distance.
Contributions: This section showcases the amount of pins added by each contributor. It's possible to sort these contributions by calculating the added markers and the total distance after summing all the additions per person.

🔮 Features

While simple and accessible, Take you there offers some interesting features, tweaks, and s e c r e t s. Let's have a look at them.

🍁 Leaflet

When it comes to the map layout, I decided to rely on Leaflet, as it provides bindings between React components and abstract Leaflet layers. Although this package can behave differently from how other React components work (React does not render Leaflet layers to the DOM, for instance; this rendering is done by Leaflet itself), it's still a smooth, accessible, and visually appealing incorporation.

If you want to know how to work with it, you can always check our Map.tsx file.

📍 Custom pins

Here, you'll find the nomenclature, visual aspect, and description for all our markers:

| Marker | Description | | ---------------- | ------------------------------------------------------------------------------------------

TakeYouThere

Install / Use

README