Journal: My journey creating CitySpire App
About the Project
For the last eight weeks, I was part of a cross-functional team that included iOS, front and back end, and data science, to build an application called CitySpire. This was the culmination of all our training here at Lambda to put together what we’ve learned, so we could design, build, and deploy CitySpire.
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
On the first day, I was able to meet with the team of developers I was going to work with. I was a little timid at first, letting others converse with each other while I just observed. However, it wasn’t long before I hit the ground running to offer my experience and insight to come up with some ideas for this project. We started off with some wireframing over at whimsical.com. This helped our team visualize what the application might look like and fuel our ideas as we started to mold CitySpire to life.
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
I was nervous about using Mapbox at first but it turned out to be really easy to add to the project. They have very detailed documentation and training videos on a lot of the features they have. The map basically works right out of the box with not a whole lot of configuration setup needed to get it running. However, there are tons of custom options and different config setups that I did not have time to explore. Most of their documentation setup examples were in vanilla JavaScript so I had to do some minor tweaking to get it working with our React application.
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} />
</>
);
Okta
With Okta I created a navbar at the top of the application. The idea was to have the CitySpire logo to the left corner linking back to the landing page, and on the right, Login and Sign Up buttons. The concept is what you would expect. If the User is not logged in, click on the button to log in. If the User doesn’t have an account, then click on Sign Up. If the user does have an account and Okta authenticates the User, then they have access to the secured routes like the favorites page and dashboard.
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.
Challenges I faced
Throughout this project, obstacles presented themselves with challenges I needed to overcome. Not only learning new tech stacks but sorting out some barriers I faced while learning. One was learning Ant Design. I did my best to look up the documentation and searched YouTube videos for tutorials. For one reason or another, I was struggling still. And looking at the clock on my desk, I was watching the time pass me by. I would concede to learning Ant Design and decided to just use CSS style sheets. To me, this is an opportunity to explore and learn Ant Design on another day when I’m not meeting deadlines.
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…
This application is still in the early stages with only a few releases built out. There is still a ton of features we would like to add, bugs that need to be sorted out, and functionality that needs to still be worked on. Right now, the features we are shipping are the bare bones of a Landing Page and we have a fully functional Navbar complete with Okta authentication. We have a design in place for rendering city statistics and scores. This is just the beginning. This is my journal, documenting my journey with the contributions I’ve made thus far. There is so much left to do, with so many Trello cards of features untouched.
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.
