Aspire to Inspire: Designing the CitySpire App
We never know where this crazy journey of life is going to take us. Sometimes it takes us a few miles down the street, other times it takes us across the country or even across the world. When you’re faced with making the decision of where to move to, CitySpire is here to help!
Development Team
For this project I worked with an amazing team at my school, Lambda. This team was made up of Data Scientists and Web Developers who came together to create something that would reach a common goal. Keep reading to learn more.
The Issue
Sometimes it can be difficult to know if a city is good to live is. You wonder things like:
- What’s the crime rate like?
- What’s there to do?
- Is there a good education system?
Your head floods with all these questions and you need somewhere to find the answers! That is where CitySpire comes in!
CitySpire
With CitySpire, users are able to:
- view information about the cities of their choice
- pin their favorites to their user dashboard
- get answers to important questions about each city
This makes it much easier research where you want to call home and gives the user peace of mind in knowing they did their due diligence.
Design!
Designing the look of the product was my part! I love adding pops of colors and styles to make things attractive to the eye. My favorite tech skills include the simple basics:
- HTML
- CSS
- LESS.
However, for this project, I had to learn a whole new design language called Ant Design! This was a challenge!
Team challenges!
With every project there are challenges that raise fear or concern. For our team, there wasn’t much fear, we just had to be sure everyone was able to get their parts completed and avoiding merge conflicts. Of course, we did have bugs and hang-ups, but we worked together to solve them all in the nick of time!
Some of the challenges we faced as an overall team was learning so many new things. We had to learn new ways of writing design code, new skills such as wireframing and user flow charts, and even a new deployment program called Amazon Web Services (AWS). These challenges, on top of everything else life threw our way, sometimes made things difficult.
Personal challenges!
For myself, learning Ant Design was a major challenge! When I first started, I got a MAJOR case of imposter syndrome and was near ready to just give up and quit Lambda altogether! I just couldn’t figure out how to make things work and became frustrated very quickly. I knew that wasn’t an option though, I’d come to far to give up now! I decided to take a break for a couple nights until it was time to really get into the project. After a few breaths, more research, and deciding to stick it out, I got the hang of it!
The first issue…
My first issue with Ant Design was figuring out how it differed from the basic CSS/LESS that I was use to. I couldn’t separate my design code into separate, neatly organized files anymore. Instead I needed to import the styles into the page files I wanted to design and then place the style code I wanted to use into the right sections.
I continued researching the Ant Design Docs and Design pages, along with other pages on the site and some YouTube videos, until I found the code that worked for what I needed to do. Once I started to see my designs manifesting on the page, my imposter syndrome started to fade away. I even learned something that became my favorite part of the design: carousel! It’s where you can add images to a revolving slideshow that works similar to a carousel.
How to do the carousel!
Creating the carousel was fairly easy once I got the hang of it! You can find the documentation here!
Ant Design says you should use carousels when:
- When there is a group of content on the same level.
- When there is insufficient content space, it can be used to save space in the form of a revolving door.
- Commonly used for a group of pictures/cards.
The site shows 4 different examples of carousels:
- Basic
- Position
- Scroll automatically
- Fade in
I chose to use the scroll automatically option because I felt it was the coolest! If you go to the documentation there is actually a way to copy the basic code straight from the page or view it in CodeSandbox, CodePen, or even Stackbiltz so you can choose the options that’s best for you!
This is how one of my carousels turned out!
Teamwork makes the dream work!
Early on I mentioned the development team that I worked with on this project. Our Data Science team did an impeccable job creating the database APIs. Our backend was remarkable in making sure we implemented the proper authentication. Then there’s the frontend, who did a fantastic job building the layouts and creating a great User Interface! Together we all made sure that the project was properly deployed on Amazon Web Services (AWS).
It takes more than just some talented coders to make a great team. You have to add in:
- A dash of communication
- a pinch of understanding
- and a heaping helping of compassion and empathy
along with the usual talent and passion it takes to be a developer. This team was loaded with it all! A total package!
Sometimes teams fail because they lack caring and everyone is more concerned about completing their part while others may be struggling. Our entire team has faced times where we struggled to make it through. During this project many of us were hit hard by life’s curveballs.
- some were impacted by the winter storms that hit Texas
- some impacted by the Covid-19 pandemic
- some by normal family hardships
No matter what we faced, out team came together to create an amazing product! When one person was down, the others picked up the slack, and that is what makes a great team! That is the true meaning or “teamwork makes the dream work.”
In the end…
Our time on the CitySpire has come to an end. We must pass the buck to the next group of amazing developers who will continue to build and make CitySpire better than ever. There isn’t much to say from my end for what could be added because it’s about taking your vision and adding your spin to the design.
Maybe you would like to add a timeline? Or even an option to post discussion comments or to send a feedback message? The possibilities are endless! I encourage you to study the Ant Design and find what suits you best!
Hope you enjoyed learning about this awesome project and soon you’ll be able to Aspire to your dream home! Happy coding!