Seattle Parks App
Introduction
I just completed my last module of my software engineering Bootcamp at Flatiron School! This module was by far my favorite. We were given three weeks to design and create our own application. This was the time to really shine and use everything we learned to produce something magnificent! I was very excited and eager to get started. Up until now, we were only given one week for our projects. Knowing I had more time, I set my expectations high. I researched new technologies and aimed for a more complicated design for the app and went to work!
My App: Seattle Parks App
Seattle Parks App- What does it do?
For my app, I derived inspiration from my own needs. During Covid-19 I have been exploring new parks in the Seattle area. It's a great way to go outside and explore but still maintain good social distancing. I thought it would be useful to have a directory for all the Seattle parks. This way I could look for a park, see what's nearby and discover something new. So, I created the Seattle Parks App.
This Seattle Parks Application offers information on parks in the city of Seattle. The application allows users to keep a record of all their trips, plan future trips, and read reviews from other users. Users can look up a park based on name, location, neighborhood, or specific features. It allows for parks to be rated and gives information on how busy a park is anticipated to be based on the number of users planning to use the park on a day.
Below I highlight some of the new technologies I learned to achieve this project:
Adding Google Maps
Adding in Google Maps was something I was very excited about. Most of my projects at Flatiron involved geocoded data or location information. I was eager to combine this with maps! Firstly, I had to first acquaint myself with theGoogle Developers Console to set up an account and access, research, and manage the API I needed. I learned how to efficiently incorporate google maps from watching tutorials. I followed multiple tutorials and implemented the steps while customizing what I learned from the tutorials for my own needs.
Here is the tutorial that was most helpful: https://github.com/fullstackreact/google-maps-react
Redux for State Management
One of the new technologies I learned for this project was Redux. While building out the react components and mapping out all the state and props managed by each, I realized state management was going to complex. That's where redux came in to save the day.
My logged-in user and functions related to logging in were passed to many components. Having them passed along was difficult to keep track of. I moved all this information into my Redux store and this allowed for much more simplified components that were easier to manage. I also stored my parks data (from a fetch call) in redux using the middleware thunk, to allow me to use redux with async operations.
Deploying the App: Heroku
One of my main goals for this project was to deploy the application. Afterall, I wanted people to be able to use this app! I chose to deploy the app using Heroku and it was surprisingly easy. I deployed the front-end (React) and the back-end (Rails) separately following a few tutorials online.
Here are some of the steps I took to prepare my app for deployment:
- Changing the database to PostgreSQL
- Once the back-end was deployed, changing the fetch calls on my front-end for the correct API endpoints
- Setting my environment variables on Heroku for JWT token secrets, API keys, and CORS
Here is the main tutorial I used: https://medium.com/@siobhanpmahoney/deploying-a-react-frontend-rails-backend-project-to-heroku-4b2c4f6f630c#38dc
npm Packages
Lastly, once I had all the basic functionality up and running on my application, I was interested in finding ways to improve my UI. I started researching npm packages to incorporate. To better display data to the user, I added react big calendar and chart.js. React big calendar allowed me to add in a calendar on the user’s homepage where they would be able to see and track all their visits to the parks. Chart.js allowed me to create a bar graph on a single park page that showed the planned visits by other users to this park. The user could then see which days were likely to be busy at the park. Both these packages had excellent documentation and tutorials available.
Documentation for react-big-calendar
Conclusion
At the end of the three weeks in Mod 5, we had our final showcase presentation. Displaying my work and seeing the projects of my classmates has always been my favorite part of this program. I proudly presented my application and though I've just reached the end of my software engineering Bootcamp, my journey into coding is just beginning!