Motivation • Quick Start • Usage • Contributing
NavCraft APP is a web application for pilots to craft and showcase complete navigation VFR flight plans. It combines the functionality of NavCraft API and NavBrix API with a fast, simple and responsive user interface.
NavCraft APP was developed to achieve one goal:
Help someone with minimum navigation knowledge plan a flight.
Together, NavCraft API and NavBrix API automate the work involved in producing:
- navigation logs,
- weight and balance graphs,
- fuel requirement calculations,
- weather and NOTAM briefings,
- takeoff and landing distance calculations.
However, the amount of data required can be overwhelming for someone who doesn't have the appropriate knowledge.
NavCraft APP organizes all this data in a fast, simple and responsive user interface that even your hundred-year-old grandmother can navigate.
The app is live. Go to navcraftapp.com and start flight planning!
Using the app is very simple!
-
First, you can either Register with your email or create a trial account.
-
Next, navigate to the
Aircraft
section, and add a new aircraft.-
Open the sidebar and click on
Add Aircraft
, complete the form and save it. Once the new aircraft appears on your list of aircraft, click onDetails
to open it. -
Click on
Add Performance Profile
and complete the form by selecting a profile from the list and saving it. Alternatively, you can create a blank profile and complete it yourself, but that requires more work. Currently, the app has Model Profiles for Cessnas 152 and Cessnas 172, which are the most common training aircraft around the world. -
Once the new profile appears in your list, you can open it and edit it or you can leave it as it is. Please note that the profile must be marked as
Selected
if you want to use the aircraft on a flight. -
You can edit any of the sections of the performance profile using the sidebar or tables' buttons.
-
-
Finally, navigate to the
Flights
section, click onAdd new flight
, complete the form and save it. -
After completing these 3 steps you have successfully created your first flight, now you can open it and start adjusting your flight plan.
- You can open the map and add new legs to your flight.
- You can go to the
Flight Summary
section and edit any of the flight legs. - You can go to the
Weight & Balance
section and add passengers, baggage and fuel. - You can generate weather and NOTAMs Briefings.
- And much more...
Tip
- NavCraft APP is responsive, so you can use it on any device with a screen wider than just 375px.
- Google Chrome is recommended, but the app supports other browsers like Mozilla Firefox and Safari.
Currently looking for help to work on the following features/issues, in order of urgency:
If you find a bug or a feature you want to implement, please raise an issue and submit a pull request. Your contributions are greatly appreciated.
To organize large amounts of complex data, NavCraft APP relies on React styled-components like tables, modals, forms and sidebars. These components are being reused across most pages of the app.
Currently, the forms are all unique components, which leads to some code duplication. I am looking to refactor the code, following best practices to replace all forms with a reusable React component.
The first version of the NavCraft APP has tests in place for common reusable components. To minimize vulnerabilities, the app uses Typescript for type checking, and the Node.js library Zod for validating user inputs.
We are currently looking to Test the rendering, behavior and submission of forms.
NavCraft APP uses React Leaflet to render a map that allows the user to display and edit the flight path. The map currently displays aerodromes, waypoints and legs of the flight. To help the users plan their flights better, I want the map to show airspaces as well.
The long-term plan is to get airspace data from the NavCraft API, to display the airspace geometry using coordinates. However, NavCraft API
currently doesn't provide airspace coordinates. So, in the meantime, I want to place VFR Navigation Chart (VNC) on top of the map as .svg
, giving the user the option to display the VNC charts or the conventional map.
The API doesn't store these charts, so they'll need to be optimized and stored locally in a public directory. Also, VNC Charts are being updated about twice a year, so it would be great to give admin users the ability to update the charts from the application itself.
Please note that the VNC Charts need to be placed on the right coordinates. Thus, to work on this feature you need to have a good understanding of the React Leaflet library, geographical coordinates and navigation.
If you would like to work on any of the contributions mentioned above, follow the steps below.
Important
To run the code locally in development mode, you'll need to have installed on your machine.
This is an optional step, but a helpful one. If in doubt, follow the guidelines in the Open Source Guide.
Check if someone else is already working on a similar feature. If there is an open issue you want to work on, and it hasn't been claimed, tag me in a comment to let me know you want to claim it.
If there is not an open issue related to the feature you want to work on, open a new one. Leave a detailed description of what you want to implement, and tag me on it. Add descriptive labels if appropriate.
Once the issue has been assigned to you, set up the repository on your local machine.
-
Fork the repository into your GitHub account.
-
Clone the repo in your local machine.
git clone https://github.com/<your_github_username>/navcraft-web-app.git
-
Start a feature branch.
cd navcraft-web-app git switch -c <feature_or_bugfix>/<feature_name>
Once you've created a new feature branch, you can start working on the code. The repository has a Dockerfile.dev
and docker-compose.dev.yml
file to run in development mode:
-
First, you can adjust the default environment variables of the project in the
docker-compose.dev.yml
file. The app only has two adjustable environment variables, which are related to the Sentry.io project, so you can just leave them blank.ENV_VARIABLE COMMENT SENTRY_AUTH_TOKEN
Auth token used for the Sentry.io setup. VITE_REACT_APP_SENTRY_DSN
DSN used to track the project's issues on Sentry. -
Next, build the docker images and run the docker container:
docker-compose -f docker-compose.dev.yml build docker-compose -f docker-compose.dev.yml up -d
-
Finally, troubleshoot. If the docker container doesn't run properly on the first try, it's most likely because the port is occupied.
- The container's port is mapped by default to the machine's port
5173
. If this port is occupied, open thedocker-compose.dev.yml
file and adjust the mapped port. The default ports are.
- The container's port is mapped by default to the machine's port
-
The app will run on the localhost
127.0.0.1
and the mapped port. If you don't adjust the port, that would be:http://127.0.0.1:5173
Tip
The /src
directory in the host, is being mapped to the /src
directory in the container. Thus, any changes you save will be automatically shared to the container. However, the package.json
and package-lock.json
files are not being mapped. If you install a new library, you'll need to rebuild the image for it to show in the container.
After committing your code following commit best practices, you're ready to submit your changes.
-
First, push the changes to your forked repo.
git push origin <feature_or_bugfix>/<feature_name>
-
Then, open a pull request to the
main
branch.