jmataya / devproject-findabusiness Goto Github PK

Overview

A staging server will make this application way easier to test and share. Since this is such a simple application, let's use a free Heroku instance.

Overview

The goal here is to build out the base styles and overall interaction design of the application. So, I'll ignore any of the work integrating with third-party APIs and will instead be focusing on building a simple representation of the application with mocked data.

Goals

1. Define pages and their navigation structure
2. Implement base styles
3. Mock the user interface with fake data

Non-Goals

1. Fetch data from APIs
2. Run a deep design exercise

Page Structure

Let's go with a really simple three-page design:

• Home: a clean and simple home page that only contains a search box. Once a search term is entered, the user is taken to the Search Results page.

• Search Results: A list of results that match the query results. For the initial build, let's show:

  1. The business name
  2. The business category
  3. The first image associated with the business

  Clicking any of the results will take the user to the Result Details page.

• Result Details: The full set of information that we expect to show for a result:

  1. The business name
  2. The business category
  3. The business address
  4. The tagged images

Design

Given the short timeframe of this work, the layout for the application will be designed in the browser, rather than with a wireframing tool. Additionally, I've been digging the current UI guidelines on iOS 11 applications, so the general feeling will be heavily inspired by those standards.

Overview

Replace the mocked out data in the application with real data from the Google Places API.

Tasks

• Connect search box to the API
• Display real search results
• Display real details
• Parameterize the search URL so that it can be linked
• Parameterize the details URL so that it can be linked

The entire application is designed on a grid, so complete the work to make the site mobile ready.

• Collapse the grid at different breakpoints
• Update grid on pages where mobile patterns don't work

create-react-app does have a production configuration, but blow it out (likely with Express or Koa) so that we can statically generate assets, minify JS, etc. Then most of the JS can live on a CDN.

Tighten and clean up the look and feel of the application. A couple of initial thoughts:

• Better zip code validation
• Loading animations
• Smoother loading of image tags on the details page
• Allow for more searching from the search results page

Overview

Set the project up and get it integrated with a really basic CI system. Rather than using the base system that was provided in the prompt, I'll be using create-react-app as it's lightweight and I know it well.

Since this is such a small application and there's so little state, the plan is to stay away from Redux and instead make a really simple, declarative structure that uses React state.

Tasks

• Generate the project structure using create-react-app
• Setup the basic page and component structure
• Add react-router for routing
• Create placeholder pages for home page, search results page, and details page