Journal: My journey creating CitySpire App

Shane Jeremich
Mar 4 · 7 min read

About the Project

The purpose of CitySpire is for users to search various cities in the United States and fetch statistics like weather, crime rate, population, economy, cultures, and so on. We had to cohesively work together to plan out features we wanted to implement, which releases we could finish by certain deadlines, what tech stacks we were going to use, and what statistics were important to the users.

Planning Phase

Small view of our whimsical board

I worked on the front end for CitySpire. In my planning phase, I decided to use some tech stacks I never worked with before. This is the fun and challenging part I love about the development process. I decided we were going to implement the Mapbox GL library. It made sense to me because it offered the perfect tools we needed using their search and geocoding that’s tied to all their maps. It’s similar to Google Maps and comes with tons of features and options.

With our application, we also needed a way for users to login, so they can reach the backend of our application for features like saving search profiles or bookmarking their favorite cities. One of the requirements from our stakeholder was that we use Okta. We use Okta to create a login experience that includes OAuth 2.0, OIDC implementations, the Authentication API, and Sign-in Widget.

The project setup with this application was going to be a React application. We were given a project with some starter files from the stakeholder on how he wanted the folder architecture to look like, including some helper functions, Ant Design for styling, and testing with Jest.

The next step was using Trello to communicate with our team every day. I would create a Trello card for every feature we wanted to implement, attached with a user story as the title which explained the experience we were aiming to achieve. I would divide these cards up by which team, front, back, data science, iOS would work on, what release the feature was part of, and attached the branch from Github that the Trello card was assigned to. This makes it easier to update what we are currently working on, our status, and what else the team is doing. We would have daily standups to update the team on the progress we’re making with each feature and what possible barriers we encountered.

Mapbox GL

function MapboxContainer() {
const [input, setInput] = useState('');
const { locations } = useContext(LocationContext)
const mapContainerRef = useRef(null);
useEffect(() => {
const map = new mapboxgl.Map({
container: mapContainerRef.current
style: 'mapbox://styles/mapbox/streets-v11',
center: [-99, 40],
zoom: 3.3,
});

Here I created a useEffect for Mapbox. I’m declaring a const variable assigned to the map that generates a new Mapbox map, using the basic style streets-v11, with the map zoomed out to 3.3 and centered -99, 40 which shows just United States country view by default. Using the mapContainerRef I then attach it to a div to render the map onto the screen.

    geocoder.on('result', function(result) {
setInput(result.result.text);
});

document.getElementById('geocoder')
.appendChild(geocoder.onAdd(map));
map.resize();
return () => map.remove();
}, []);
return (
<>
<
RenderMapbox mapContainerRef={mapContainerRef} />
<
CityScr input={input} locations={locations} />
</>
);
Searching for a city
Zooms to New York City

Okta

Navbar container component

Here I have a Navbar component container. Inside this container, I’m passing my checkAuthentication helper function I created to check if the user is signed in. Inside the helper function is my if/else logic. It returns setUserInfo(info) if user is authenticated or setUserInfo(Null) if user is not. I’m also grabbing their avatar because pictures makes everything better. I’m using the container/render pattern with my components. My container contains all the logic to pass onto the rendering component. So my render component is simply pure JSX.

The JSX that renders the Navbar component
User is not logged in yet
User is now logged in and has more options

Challenges I faced

Another challenge I encountered was testing Okta. I struggled a little when testing out if Okta renders the Sign-In widget successfully as my cleanup of my useEffect would return null before the test completed. I would later rewrite my test to make sure the div element that the sign-in-widget was attached to is rendered, so then container.querySelector(‘#sign-in-widget’)).toBeTruthy().

The city statistics and scores still need to be fleshed out. Right now there is a card that displays after you search for a city, however, at this time, it’s still in the development process and not fully functional yet. When the product is finished, it will display the stats like crime rate, average rent, rent, walkability score, crime score, air quality, etcetera. This data will support the majority of the cities in the United States.

Features I would like to see worked on in the future is a complete Landing page designed and built out to look professional. I would also like to incorporate when a user is looking up cities, that they are able to compare one city to another city. The profile dashboard needs to be fully functional as well as the favorites page. Our team has come far but there is still so much left to do!

The Future…

I’ve learned so much working on this application. I was challenged every day, from learning new things like Okta and Mapbox, to optimizing my code for efficiency, to collaborating with my team. One of the best things working on projects like these as a developer is working with different personalities and meeting new people.

How does this project further my career goals? This project has challenged me to learn new things. The ability to plan and execute and meet deadlines of shipped features. To overcome barriers and still complete my tasks. As I move forward, I’ll continue to push myself, to learn, to grow, to meet new challenges, and overcome them. I look forward to the future, as my journey has only begun.

Nerd For Tech

From Confusion to Clarification

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store