We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to continue.

Karibu, Let's talk about the Karibu Nami web app

screenshot of karibu nami web app

For our ‘final year’ project on ALX, we were asked to come up with a portfolio project. They felt that it was a good time to get our hands dirty (with code of course), as that would help us put into work what we’d already learned for over 9 months, as we awaited to join the three-month specialization phase.

After countless hours of brainstorming, Brandon (my project partner) and I came up with a brilliant idea. Karibu Nami. I think it’s brilliant, or okay. Karibu Nami are Kiswahili words that translate to Near Me.

Imagine you’ve visited an unfamiliar place and want to check out restaurants in that area, your two options would be to go to google and type in “restaurants near me”, or ask your friends if they can recommend any, that’s if they’ve ever been to that place. Which they often haven’t :'). That’s where Karibu Nami comes in.

Karibu Nami was conceived with a focused mission - to provide users with quick, adaptable, and user-friendly access to information about local establishments.

We aim to address the challenge of efficiently accessing and understanding information about local businesses and services when one visits an unfamiliar place. We wanted to build an app that makes it easier to do that and also provides a clean, free-of-clutter UI that users can easily browse through.

In developing the core algorithms for Karibu Nami, simplicity was the key. The foundation lies in a straightforward Flask application with defined routes. MySQL tables were created using SQLAlchemy for database interactions. The core functionality revolves around the utilization of a geolocation API and various Google APIs to seamlessly fetch the necessary data.

Steps

During our research phase, we’d agreed to use selenium ( a browser automation tool), but later switched to using Google’s API, which proved to save us tons of time. Other technologies we used include:

Python as our server-side language.

Flask - We settled on Flask since it’s really light-weight and we’d already used it to build previous apps.

MySQL was used as our database since we’re both comfortable with the database and the SQL language.

SQLAlchemy - We’d also been exposed to this ORM before so we decided it was best to use it. SQLAlchemy made it easy for us to interact with our MySQL database.

HTML, CSS, SCSS, JavaScript was used for our front-end. We had originally planned to use Nuxt.js/Vue.js but later dropped that thought after we realized we could use Jinja which comes coupled with Flask.

Gmail's SMTP was also integrated within our app since we needed to send verification links to users after they’d signed up.

GSAP was used in our front-end to add some smooth animations on our landing page.

Geolocation API was needed to get the user’s location, since our app depended on this to provide users with reliable information on what they wanted to explore.

The Unittest module was used to ensure our app behaved as intended.

Other libraries were also imported in our app, like dotenv which helped us to store crucial info needed by our app, such as API keys and our database credentials.

Some features of the app

Below are some features that we implemented:

1. Two days before presenting our app, we thought that since we only needed the user to sign up with their email and a password, someone could easily register with emails that weren't theirs or ones that didn’t even exist. That’s when we decided to make the app a lil more intricate.

After a user signs up with their email and password, we implemented a function to send a verification link to the user’s email just to be sure they owned the email. Users have to click on the link after which they can log in to their account. Users can always ask for a new verification link if need be.

2. We also allowed users to reset their passwords when they needed to. This wasn’t that difficult of a task but I felt I should include it in the list since it was an interesting one. At first we struggled but we managed to get around it. We wanted a way to know which user clicked which link and if they were the right user that the link was sent to, if the link was valid and if they even had an account that they wanted to reset a password for. I know, that’s a mouthful. After hours of coming up with different suggestions we settled on one that made that process less complicated.

3. Another feature we implemented is that signed in users can save places and easily access them later. It was here that we realized there aren’t any native boolean types in MySQL. We wanted each places table to have a column that either held the value True or False. True meaning that a user has saved the place and False meaning otherwise. We had to use 0(False) and 1(True) to add that feature to our app.

In developing the core algorithms for Karibu Nami, simplicity was the key. The foundation lies in a straightforward Flask application with defined routes. MySQL tables were created using SQLAlchemy for database interactions. The core functionality revolves around the utilization of a geolocation API and various Google APIs to seamlessly fetch the necessary data.

How the app works

Anyone can head to our app and type in whatever they want to explore (hotels, malls, salons, grocery stores, etc). Our app grabs the user’s location (after the user allows the app to do that) in order to provide bespoke results that are close to the user. There’s no need to sign up to use the app. Although some features like saving a place or viewing a user’s search history), require one to be signed in.

After you enter whatever it is you want to look for, say a mall, you’ll be provided with a clean list of places that are close to your location. The page will include the names of the places, images, and ratings, to help you easily filter out from the list. A user can click on any place to get more details, like contact information, directions, ratings and reviews, and they can also click on the save button if they want to access it another time. We decided not to bombard a user with tons of information, and rather just provide a minimalistic design with just enough details of each place.

As at the time of writing this blog, we’re thinking of allowing signed in users to rate and give reviews of a place..

Challenges

One noticeable challenge that kept surfacing was issues with collaborating. We occasionally run into version control hiccups when working simultaneously on the repository, the way around this was to ask each of us to work on different branches and make a pull request that was to be merged by the other person.

Retrieving data from our various APIs and storing them in our databases took too long and this meant a not-so-good experience for our users. This prompted a deeper exploration into how to get around this issue. Although we’ve made some considerable progress, as at the time of writing this, we feel it’s still not as good and we’re therefore still seeking a way to make that process more seamless and fast.

The foreign key challenges in MySQL table implementation provided valuable lessons in designing efficient and effective database schemas. Understanding the intricacies of relationships between tables has broadened our skills in database design.

You can click the following link to check out the Karibu Nami web app. Karibu Nami

Our application is open-source. We invite you to explore our repository on GitHub and contribute to enhance the app’s functionality and make it better. GitHub repository

Thanks for reading :)