Skip to content
This repository has been archived by the owner on Jul 5, 2019. It is now read-only.

Latest commit

 

History

History
74 lines (41 loc) · 2.3 KB

README.md

File metadata and controls

74 lines (41 loc) · 2.3 KB

Code Challenge

Live link: https://react-tab-challenge.netlify.com/

Github: https://github.com/bovas85/react-tabs-challenge

Summary of the test

For this code challenge, I will create a section of a landing page that displays the offerings from . It will include 3 tabbed sections that automatically switches tabs until the user navigates to a tab on their own. On mobile, it simply provides 3 sections with horizontal scrolling.

Requirements

  • Matches Design
  • Responsive
  • Automatically swaps tabs
    • Progress bar shows time until swap
    • Pauses when the links are not in the viewport
  • Clicking a tab link swaps to the tab
    • This also stops the auto swapping
  • Mobile shows all 3 sections with horizontal scrolling

Tech Stack

This project was bootstrapped with Create React App.

You can find the most recent version of this guide here.

Installation

  • Change directory into the directory of the project and install the node modules with

    npm i or yarn

  • To run the project locally with react-scritps type:

    npm run start or yarn start

    The dev webpage will open automatically or otherwise can be found at localhost:3000

  • To serve the built folder type:

    npm i -g serve (if not installed)

    serve -s build

    You will then be able to visit it on localhost:5000

The Process

Sketching the app

I always try to visualize where the components will be in the Design, and make sure they make sense for the app and logic.

App Skeleton

I always have a starter template which I created and updated every time I found some new and better ways to do things in code.

It contains improvements, performance tweaks and several components that I might need.

In this case I used some of those improvements (ie. .env file for styles alias) that I found.

Refining

Once that's in place, I make sure I only keep what's really needed and try to scrap the rest (console logs, useless comments and TODOs that I have completed).

It won't be compiled, but it would pollute the repository.

Git init

From here on, you can see the commits in the repo I will share via e-mail (or pull request).

Thanks for reading.

Alex