Tired of the same drop spots? Debating with your squad about where to land? Let a|lander take the pressure off.
a|lander is your intuitive, map-driven companion for Fortnite. Designed to answer the age-old question: “Where are we landing?” With a single tap, it randomly selects a point of interest (POI) from the current map and zooms in to highlight the spot. Whether you’re looking to shake up your routine or explore hidden corners you’ve never visited, a|lander makes every exciting.
Choose between:
- All available POIs and named locations for full exploration.
- Main POIs only for a more focused experience.
No more indecision. No more arguments. Just a touch of fate guiding your next landing zone.
Data for this app is provided by Fortnite-API.
Mockup produced with Rotato
Purpose
- Provide the user with a landing site for a Battle Royale in Fortnite that is randomly chosen from the current list of POIs provided by the API.
Primary User Needs
- Users need a suggested landing site with minimal interaction.
- They also need to repeat this easily.
Features
Full details on Features can be viewed below, essentially I wanted to include:
- Easy interaction with minimal input to get a landing site.
- Easily repeatable action to get new suggestions.
- The ability to toggle between the full POI list and the main POIs provided by the API.
Content Requirements
- Up to date map image for the current iteration of Fortnite.
- Up to date POI information for the current iteration of Fortnite.
- Easy to view main map area with clear indicator of selected site.
- Easy toggle to change between POI preferences.
- Error messages if there are issues fetching data.
The site is a Single Page Application and by design is simple and easy to use.
There is a header at the top of the page containing the app name and a toggle switch. Clicking on the a| of the title will take the user to my portfolio site. Clicking on the lander portion will reset the app by removing any selected POIs and zooming out.
The toggle on the right hand side of the header will control which POI set is used to generate a landing site. Toggling this will change the POI set accordingly whilst resetting the map ready to start again.
The main focus of the app is the map area that shows the current Fortnite Battle Royale map. To start the user clicks anywhere on the map. When a POI is picked, a marker will be placed and the map will zoom in tighter onto the marker. Clicking again will pick another marker and the process will repeat.
If there are any errors in fetching the data, the map will be replaced by an information message informing the user.
The bottom of the page contains a footer with another link to my portfolio along with links to my LinkedIn profile and GitHub profile.
In the wire framing process I decided that the interface needed to be as simple and easy as possible. Minimal input for maximum output. A clean interface with emphasis on the map area as that is the focus of the app.
A full list of Wireframes can be viewed in detail below.
Visual Design Elements
- Colours: see below.
- Typography: see below.
The colour scheme for the site is a monochromatic interface combined with the full colour of the Fortnite map. A yellow marker is overlaid to highlight POIs.
| Colour Reference | Usage |
|---|---|
| #FFD700 | POI Marker |
| #093576 | Background for the map image |
| #4a5568 | Footer text and icons |
-
Fjalla One was used for the a| in the header and the label for the POIs on the map.
-
Fira Sans was used for the lander in the header and all other text.
-
The favicon for the site is from SVGREPO:
Icon Name 
Parachute -
Font Awesome icons were used across the site for various uses:
Icon Name Use 
bullseye POI Highlight 
circle info Help dialog button
| User | Capability | Benefit |
|---|---|---|
| As a user | I can be given a place to land in Fortnite Battle Royale | so that I don't have to worry about choosing where to land. |
| As a user | I can interact with the app using simple taps or clicks | so that I can quickly get a result without complex navigation. |
| As a user | I can easily request a new POI | so that I have a new landing site for the next Battle Royale. |
| As a user | I can choose whether to use just the main POIs or the full set of POIs | so that I can either focus on landing in the main areas or decide to explore a little further for more challenging starts. |
| As a user | I can toggle between POI sets easily | so that I don't have to spend too much time on preferences. |
| As a user | I can see the chosen POI focused and zoomed in on the map | so that know exactly where to land. |
| As a user | I can see the name of the POI | so that I know where I am landing. |
| As a user | I can access and use the app on mobile devices | so that I can use it wherever I play Fortnite. |
| As a user | I can install the app as a PWA on my homescreen | so that it feels like a native app with fast access. |
| As a user | I can see a welcome message on first launch | so that I understand how to use the app. |
| As a user | I can use the app without needing to sign in | so that I can jump straight into gameplay without any friction. |
| As a user | I can use the app in landscape or portrait mode | so that it adapts to how I hold my device. |
| As a user | I can rely that the map and POIs are up to date | so that I don't need to worry about having to input anything myself to update it. |
| As a developer | I should carry out automated testing on all applicable files | so that I catch problems early and ensure consistent behaviour across updates. |
| As a developer | I should perform manual testing across key user flows and devices | so that I can validate real-world usability, catch edge cases not covered by automation, and ensure a smooth experience for all users. |
To follow best practice, wire frames were developed for mobile, tablet, and desktop sizes. I've used Balsamiq to design my site wireframes.
| Whole Map View | Highlighted POI View |
|---|---|
 |
 |
| Whole Map View | Highlighted POI View |
|---|---|
 |
 |
| Whole Map View | Highlighted POI View |
|---|---|
 |
 |
-
The page header contains the main title of app along with a toggle for changing the POI set that is used to generate a landing site. The title has two additional functions:
- The 'a|' portion of the title is a link to my portfolio website.
- The 'lander' portion of the title will reset the map when clicked. The current POI will be removed and the map will zoom out to the starting position.
-
The page footer contains a link to my portfolio website on the left and a button to open the help dialog on the right shown by a font awesome icon.
-
When the app is first run and the help dialog is shown with the simple instructions on how to use the app. This can be accessed any time via the info button in the footer.
-
The map is the main focus of the app and shows the current Fortnite Battle Royale map. When the user clicks on the map a random POI is chosen and a marker is placed. The map then zooms in to focus on the POI and the name label is then shown. To get a new POI the user just clicks again, this process can be repeated.
Map Usage Base Map Highlighted POI 
There are no current plans for future features, the app is designed to be as minimal and efficient as possible.
| Tool / Tech | Use |
|---|---|
 |
Generate README and TESTING templates. |
 |
Version control. (git add, git commit, git push) |
 |
Secure online code storage. |
 |
Local IDE for development. |
 |
Deploying React app to GitHub |
 |
Domain hosting and DNS forwarding to GitHub Pages |
 |
Frontend library for creating the site. |
 |
Frontend Build Tool |
 |
Main site content and layout. |
 |
Main site content and layout. |
 |
Design and layout. |
 |
User interaction on the site. |
 |
Front-end CSS framework for modern responsiveness. |
 |
Automated unit and integration testing. |
 |
Automated end-to-end testing. |
 |
Providing up-to-date data for Fortnite Battle Royale |
 |
Creating wireframes. |
 |
Icons. |
 |
Help debug, troubleshoot, and explain things. |
 |
Image optimisation. |
 |
Screenshot and screen recording capture. |
 |
Computing coordinates |
GitHub Projects served as an Agile tool for this project. Through it, User Stories, issues/bugs, and Milestone tasks were planned, then subsequently tracked on a regular basis using the Kanban project board.
I also created an overview page where I could easily see at a glance the current progress in development. This allowed me to track start and finish dates along with adding prioritisation for bugs.
GitHub Issues served as an another Agile tool. There, I managed my User Stories and Milestone tasks, and tracked any issues/bugs.
| Open Issues |
|---|
 |
| Closed Issues |
|---|
 |
I've decomposed my Epics into User Stories for prioritizing and implementing them. Using this approach, I was able to apply "MoSCow" prioritization and labels to my User Stories within the Issues tab.
- Must Have: guaranteed to be delivered - required to Pass the project (max ~60% of stories)
- Should Have: adds significant value, but not vital (~20% of stories)
- Could Have: has small impact if left out (the rest ~20% of stories)
- Won't Have: not a priority for this iteration - future features
The GitHub projects helped keep track of this with the creation of a graph.
I've used XML-Sitemaps to generate a sitemap.xml file. This was generated using my deployed site URL: https://lander.apeskinian.com
After it finished crawling the entire site, it created a sitemap.xml, which I've downloaded and included in the repository.
I've created the robots.txt file in the public folder.
Note
For all testing, please refer to the TESTING.md file.
The live deployed application can be found deployed on a|lander.
This project uses GitHub Pages, a free static site hosting service provided by GitHub, ideal for deploying static sites like those built with Vite.
Deployment steps are as follows, after account setup:
- Create a new repository on GitHub (public or private depending on your plan).
- Clone the repository locally and initialize your Vite React app.
- Install the
gh-pagespackage to enable deployment:npm install --save-dev gh-pages
Important
This is a sample only; you would replace the values with your own if cloning/forking my repository.
Update your project files with the following:
| File | Change |
|---|---|
vite.config.js |
Add base: "/<your-repo-name>/" to the config object |
package.json |
Add "homepage": "https://<your-username>.github.io/<your-repo-name>" |
package.json > scripts |
Add "predeploy": "npm run build" and "deploy": "gh-pages -d dist" |
Replace <your-username> and <your-repo-name> with your actual GitHub username and repository name.
To deploy your app:
- Run
npm run deployfrom the root of your project. - This will build your app and push the contents of the
dist/folder to thegh-pagesbranch.
Note
If you see your README instead of your app, go to your GitHub repository Settings > Pages, and select the gh-pages branch as the source.
Your app should now be live at: https://<USERNAME>.github.io/<REPO-NAME>/
You can customize your domain using a CNAME file in the public/ folder.
If you have your own packages that have been installed, then the dependencies file needs updating using:
npm install <your-package>npm run buildnpm run deploy
To update your dependencies file:
npm list --depth=0npm installnpm updatenpm audit fix(optional)npm install --save-dev gh-pages(if not already installed)
The project should now be connected and deployed to GitHub Pages!
Tip
For routing issues with React Router, consider using hash-based routing or adding a fallback 404.html that redirects all paths to index.html.
This project uses the Fortnite-API to display public game data such as cosmetics, shop items, and events. The HTML version of the API allows you to embed content directly without needing an API key or authentication.
To use the HTML endpoints, visit Fortnite-API for more information on setup, available endpoints, and integration options.
This project can be cloned or forked in order to make a local copy on your own system.
For either method, you will need to install any applicable packages found within the package.json file.
npm install
You may also need to create a .env file at the root-level to store any environment variables used in your app (e.g. API keys, feature flags, or third-party service URLs).
Important
This is a sample only; you would replace the values with your own if cloning/forking my repository.
Sample .env file:
VITE_API_URL=https://your-api-endpoint.com
VITE_PUBLIC_KEY=your-public-key
VITE_FEATURE_FLAG=trueImportant
All environment variables must be prefixed with VITE_ to be exposed to your React app at build time.
Once the project is cloned or forked, in order to run it locally, you'll need to follow these steps:
- Start the development server:
npm run dev - Open your browser and visit: http://localhost:5173 (default Vite port)
- Make any necessary changes to your components, styles, or routes
- Save your changes and Vite will hot-reload the app automatically
To build the project for production:
- Run:
npm run build - Preview the production build locally:
npm run preview
Note
npm run preview simulates how your app will behave in production. It serves the contents of the dist/ folder.
If you'd like to update your dependencies or regenerate your lock file:
npm updatenpm audit fix(optional)npm install(to refresh node_modules)
Everything should now be ready for local development and testing!
Tip
You can customize your Vite config in vite.config.js and structure your app using folders like src/components, src/pages, and src/assets for better maintainability.
You can clone the repository by following these steps:
- Go to the GitHub repository.
- Locate and click on the green "Code" button at the very top, above the commits and files.
- Select whether you prefer to clone using "HTTPS", "SSH", or "GitHub CLI", and click the "copy" button to copy the URL to your clipboard.
- Open "Git Bash" or "Terminal".
- Change the current working directory to the location where you want the cloned directory.
- In your IDE Terminal, type the following command to clone the repository:
git clone https://www.github.com/apeskinian/project_lander.git
- Press "Enter" to create your local clone.
By forking the GitHub Repository, you make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:
- Log in to GitHub and locate the GitHub Repository.
- At the top of the Repository, just below the "Settings" button on the menu, locate and click the "Fork" Button.
- Once clicked, you should now have a copy of the original repository in your own GitHub account!
If you are using both Windows and macOS operating systems to develop on, you can use a .gitattributes file to help maintain consistent line endings and file handling across environments. This file should be saved in the root directory of your repository.
Below is a recommended .gitattributes configuration for a Vite-based React project:
# Normalise all text files to use LF line endings
* text=auto
# Explicitly set LF for common web files
*.js text eol=lf
*.jsx text eol=lf
*.ts text eol=lf
*.tsx text eol=lf
*.css text eol=lf
*.html text eol=lf
*.json text eol=lf
*.md text eol=lf
# Treat images and other binary assets correctly
*.png binary
*.jpg binary
*.jpeg binary
*.gif binary
*.svg binary
*.webp binary
*.ico binary
Note
This setup helps prevent unnecessary diffs and merge conflicts caused by inconsistent line endings, especially when collaborating across operating systems.
Once added, you can re-normalize your repository with:
git add --renormalize .git commit -m "Normalize line endings via .gitattributes"
This ensures all tracked files follow the new rules without altering their actual content.
There are no major differences between the local version and the deployed version online in terms of functionality or layout.
However, the deployed version is a production build of the React app, created using Vite’s build process. This means:
- The code is minified and optimized for performance.
- Static assets are bundled and served from the
dist/folder. - Environment variables are baked in at build time (only those prefixed with
VITE_). - Hot module reloading and development tools are disabled.
To generate the production build locally, use:
npm run build
To preview the production build before deploying:
npm run preview
Note
The build process ensures faster load times and better performance for end users, but it also means that runtime changes to environment variables or config files won’t affect the deployed app unless you rebuild and redeploy.
| Source | Notes |
|---|---|
| Markdown Builder | Tool used for templating the Markdown files |
| React Udemy Course | Course for learning React |
| Tailwind Documentation | Using Tailwind with Vite |
| Fortnite-API | Map image and POI data used in the app |
| Microsoft Copilot | Help with code logic and explanations |
| Source | Location | Type | Notes |
|---|---|---|---|
| SVGREPO | Entire site | Favicon | PNG used for favicon generation |
| Favicon Generator | Entire site | Favicon | Icon generated from parachute png downloaded from SVGREPO |
| Font Awesome | Icons used throughout the site | Icons | See typography full all icons used |
- I would like to thank my sister Natalie, and my good friend Tim Nelson for their feedback and testing throughout the development of this project.
- I would like to thank my daughter Niamh, my sisters Laura & Natalie, and my whole family for the continued moral support; it keeps me going during periods of self doubt and imposter syndrome.