Hotspots: The Coolest FreeCodeCamp Nightlife App
Hotspots is a web app that discovers the best nightclubs around you or in any location in the world and allows you RSVP ahead of time.
At the click of a button, Hotspots retrieves the best nightclubs in your location; No stress.
You can enter any city in the world into the search bar and Hotspots would retrieve the nightclubs in that city.
You are also able to indicate that you are going to a particular club tonight. With many people using this feature, you and your friends can tell what clubs are bubbling tonight.
Super cool right!
Hotspots is powered by Google Places API.
It is a full-stack Javascript application built with: Node, Express, Pug and MongoDB.
Source code of Hotspots is available on Github.
The Process
How did Bolu build this sexy app?
I’m about to take you behind the scenes. VIP Access. Get ready!
Hotspots is my version of the FreeCodeCamp (FCC) Nightlife app.
User Requirements:
- User Story: As an unauthenticated user, I can view all bars in my area.
- User Story: As an authenticated user, I can add myself to a bar to indicate I am going there tonight.
- User Story: As an authenticated user, I can remove myself from a bar if I no longer want to go there.
- User Story: As an unauthenticated user, when I login I should not have to search again.
In addition to FCC’s user requirements, I had the personal requirement of building Hotspots to production ready status. Thus I had to pay a lot of attention to setting up the app and ensuring the security of the application. I also played around with Webpack and Babel.
My ToDo List
Based on my personal requirements and the user requirements of FCC, I divided the implementation of the app into 3 stages:
Stage 1: Functionality
- Setup
- Database and Server
- Routes and MVC architecture
- Security of the app (research security vulnerabilities and best practices)
- General setup (error handling, helpers file, npm packages like passport and sessions for Authentication) - Implement Functionality:
- Search for Clubs in an Area (Google TypeAhead and Places API)
- Add myself as going
- Remove myself from Going - Authentication
- Local Signup/Login
- Social Signup/Login
- Protected Routes - On login; automatically search for clubs nearby
Stage 2: Polishing
- Style App
- Documentation
- Refactor and Comment code
- Deploy
Stage 3: Feedback
- Test online version of App
- Get feedback from users and integrate
- Write about my process
Stage 1 was the most time consuming stage as it encompassed all major functionality of the app. Preparing an app for production makes you think about things differently, you put in much more effort and thought into your code and how it would work. I recommend this state of mind to everyone: build production ready apps. Even if your project is a side-project or you think no one would ever use your app. The lessons you learn will stick with you forever.
I learnt a lot of new things. For instance: in ensuring the security of the app, I came across security vulnerabilities like Cross Site Request Forgery (CSRF), Cross Site Scripting (XSS), and SQL Injection. I had heard about this concepts before but never quite understood them. I had to prepare my site against those vulnerabilities using csurf, helmet, client-side and server-side validation. I feel like a better developer.
I encountered the Cross Origin Resource Sharing (CORS) issue when making AJAX requests to the Google Places API. I solved this problem by building my personal CORS proxy off an open source one.
I generally solved problems by thinking about the problem, breaking the problem into smaller chunks, trying to solve each chunk and a ton of Googling. Stackoverflow, Github issues, and reading the documentation of tools and libraries were of immense help.
reviewed part of my code and helped implement the automatic search for clubs on login feature. Great guy.New Tooling
I used Webpack as my build tool to bundle my modules, along sides minifying CSS and JavaScript files. Babel to transpile my ES6+ code to ES5 which ensures my code works on most browsers. ESLint with airbnb style guide as my linting tool to ensure consistent styling. Axios for making AJAX requests. There are so many cool tools in tech.
For a full list of the tools I used, please visit my repo on Github.
Git Workflow
Git was my versioning system for Hotspots and Github for the online code repository. My work was divided into branches; with each new feature, style, bug or refactor in its own branch. My workflow is a variation on the Git Feature Branch Workflow which makes for a much cleaner and simpler workflow especially when you collaborate with other developers. I followed this workflow to practice working with others.
Stage 2 was about making the app look good. It had to look beautiful to users (the user interface) and developers (the codebase). The design of the app was heavily inspired by Jordan Sobovitch’s nightlife app.
I wrote documentation for the app on Github, so that other developers can contribute to my work. I also added an MIT License to make it free to reuse my code. Refactoring involved removing parts of my code that were not necessary, or converting if-else statements to ternary operators amongst other minor changes. I also tried to write comments in my code where necessary.
I deployed the app to Heroku and used mLab for database hosting.
Stage 3 involved getting my friends to test out the app, observing pain-points, collecting feedback on what to improve and implementing said feedback. I also reflected on what I had learnt on the project and shared with others (hence this article).
Lessons Learned
I used a bunch of new tech: Pug, Webpack and Babel to name a few. The biggest lessons were not about a particular tool or software, but learning the art of building quality software and solving problems.
Going from not knowing how to solve a problem, to learning the tools needed and solving the problem. Navigating Google and finding the resources necessary for solving said problem.
Breaking down problems into smaller chunks, solving each chunk and putting it all together.
Keeping at a problem even when it seems like you are not making any progress. Persistence pays.
Software is never finished. Hotspots works right now, but it can always be improved. There are many new features and bug fixes that I can implement.
The confidence that I can create cool stuff that other people can use, and I can learn new tools and implement difficult concepts.
I look forward to hearing your story.
