'Accessible Parks' is a web application enabling users to search for US national parks based on the accessibility-related amenities available.
Any user can search for parks by accessibility-related amenities, view additional details about each park and the accessibility features available, and see park reviews. Users who sign up for an account can save parks to explore later and leave reviews about their park experiences.
Right now, the National Parks Service website and mobile app lack search filters for accessibility features, making it challenging for users with disabilities to find parks with their needs in mind. While there is an NPS Park Accessibility Map Tool, there is no hassle-free way to find parks with a specific accessibility feature (e.g. wheelchair accessible trails); users have to navigate to each park's accessibility page for a description of the amenities it has.
By providing these search filters and the option to search for multiple amenities at once, Accessible Parks streamlines users' experience so they can spend less time researching whether a park will be feasible for them to visit and more time planning a memorable trip.
Navigate to the Accessible Parks website to start exploring.
Users can search for parks by checking the box next to each amenity they would like included and clicking 'Search'. The search results will include parks having all the selected amenities.
If a user's search does not return any parks with all selected amentities, they will receive an error message instructing them to remove some of their criteria and try again. The search form will be reset for the user to modify and resubmit.
Users have the option to filter their search results by state and park designation (such as park, monument, recreation area, etc.). The options available in each filter's dropdown menu will update based on which parks are currently displayed. Once a filter has been added, that input field will become inactive until clicking the 'Reset Filters' button.
Clicking on one of the park cards in the search results page brings the user to a page that provides additional details about the park, including:
- Description of the park.
- General information, such as links to the official National Parks pages for park information and accessibility, contact information, and weather.
- Accessibility-related amenities available at the park.
- User reviews of park accessibility.
.gif)
Users must be logged in to access the review submission form.
Users who are signed in to the app have the option to add parks to their 'Saved Parks' page by clicking the 'Save' button that appears in the upper-righthand corner of the park's page.
If a user has already saved a particular park, an 'Unsave' button will appear in the same place. Clicking this button removes the park from the user's 'Saved Parks' page.
Users who are signed in to the app have the option to submit a review and rating (out of 5 stars) of a park's accessibility within the 'Reviews' panel on the park's page.
Users can modify any review or rating they have previously submitted by clicking the 'Edit' button on the review.
Users can also remove any review they have previously submitted by clicking the 'Delete' button on the review.
Users can sign up for a new account by entering their first name, last name, and email address, as well as a password (which they'll need to confirm in a separate field) for their account, and then clicking the 'Sign Up' button.
When entering/confirming their password, users can toggle the 'Show Password' button on and off, which will update both fields for easy comparison.
An error will render at the top of the form upon submission if the user attempts to log in with a duplicate email address, indicating they already have an account.
If the user attempts to sign up with an invalid email address, or the 'Password' and 'Confirm Password' fields do not match, the form field will be highlighted and an error message displayed below it.
If the user attempts to submit the form with any required fields left blank, a prompt to 'Please Fill Out This Field' will appear below the field.
Users can log in to an existing account by entering the email address and password they submitted when signing up and clicking the 'Log In' button.
When entering a password, users can toggle the 'Show Password' button on and off.
Errors will render at the top of the form upon submission if the user attempts to log in with an email address that does not exist in the system or an invalid password.
If the user attempts to log in with an invalid email address, the form field will be highlighted and an error message displayed below it.
If the user attempts to submit the form with any required fields left blank, a prompt to 'Please Fill Out This Field' will appear below the field.
Fork and clone this repository into your local environment and open within your IDE of choice.
Navigate to the /client directory in your terminal and run the following command:
$ npm install
Navigate back to the root directory and run the following command:
$ npm start --prefix client
If the app doesn't automatically launch in your browser, navigate to localhost:4000.
Open a new terminal, as the frontend server will continue to run in the current terminal.
Create a .env file in the root directory of the repository:
$ touch .env
Within that .env file, you'll need to add three pieces of information:
- NPS_API_KEY: In order to populate your own local copy of the database, you will need to obtain an API key from the National Park Service by registering on their website. An API key will be emailed to you shortly after registering.
- APP_SECRET_KEY: For user sessions to work correctly, you will need to configure a secret key for your app. You can generate one in your terminal by entering the following command:
python -c 'import os; print(os.urandom(16))' - DATABASE_URI: This is where your local database can be accessed.
Now, the file should look something like this:
NPS_API_KEY = <YOUR API KEY HERE (no quotation marks needed)>
APP_SECRET_KEY = <YOUR SECRET KEY HERE (no quotation marks needed)>
DATABASE_URI = 'sqlite:///app.db'
Next, in your terminal, run the following command to install dependencies:
$ pipenv install -r requirements.txt
Run the following command to launch your virtual environment and load the .env environment variables:
$ pipenv shell
Within that subshell, navigate to the /server directory. From there, delete any existing instance and migrations directories and run the following command to initialize your database with Flask and SQLAlchemy:
$ flask db init
$ flask db revision --autogenerate -m "Create tables."
$ flask db upgrade
First, populate the 'Amenities' table by running the following command from the /server directory:
$ python amenity-seed.py
Next, populate the 'Parks' table by running the following command from the /server directory:
$ python park-seed.py
Lastly, populate the 'Park Amenities' table by running the following command from the /server directory:
$ python park-amenity-seed.py
Now that you have data seeded, you can go ahead and run the following command to start the server:
$ python app.py
After starting/restarting the server, you'll need to refresh the app in your browser to fetch data from the backend.
Future additions will include:
- Additional information on the 'park details' page related to accessible parking, visitor centers, and accessible places within each park.
- Ability for users to upload photos with reviews.
- Ability for users to view the location of each park on a map.
- Enhanced user profiles with the option to view others' profiles and favorite parks.
- A mobile application for iOS and Android.
- This application was developed by Bianca Aspin as my capstone project for Flatiron School's Software Engineering Immersive Bootcamp, which I graduated from in April 2023.
- The national parks data was furnished by the National Parks Service via the National Park Service API.
- The user interface utilizes Chakra UI, a UI library which emphasizes web accessibility – each of their components comes with WAI-ARIA roles and attributes already baked in.