Coder Social home page Coder Social logo

mod3-final's Introduction

URL Shortener UI

Our company is building a knock off of the site bitly to shorten long links. The site will take in a long link and give the user a shortened link that they can put in their browser and be taken to the original long link.

For example, this app will be able to:

  • Take in a long link like https://images.unsplash.com/photo-1470114716159-e389f8712fda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80
  • Submit the long link to a server
  • The server will give back a short link like http://localhost:3001/useshorturl/1
  • The short link will send the user to the same link as the long link! (some server magic that you don't need to worry about)

Note: the example above will not readily work in the browser

Wow, that saves a lot of space by making the URL shorter! The back-end API will save all of the URLs that have been submitted to be shortened so the user can come back and use them later.

The back-end server is already setup and ready to go from the back-end team. The back-end server is located here.

We need to build a front-end for users to interact with.

Setup

  • Clone down this repo and change into the cloned down directory
  • Setup your own GitHub repo so you can push changes to your own profile
  • Run npm install to install dependencies
  • Run npm start to start your development server

Be sure to setup the back-end repo for URL Shortener to be able to retrieve and save shortened URLs.

Iterations

Iteration 1

A developer just left the company, and they started this front-end. Unfortunately, they didn't document their process or where they left off. It seems like there are two bugs to fix before we get rolling with new features:

Fix the bugs:

  • In the redux flow to get the URLs into the redux store and then onto the page
  • In the form to be able to enter in a title and URL to be shortened (a long URL)

Iteration 2

Right now the App component is connected to the store. While sometime it can be good to have App know about everything, in this case the developer team said that it's not necessary. (This is a common refactor!)

Remove Redux from the App component and move that functionality to the UrlContainer component. Make App into a functional component, and bring in the saved urls directly into the UrlContainer component instead.

Iteration 3

Test the following in the UrlContainer component:

  • actions
  • reducers
  • mapStateToProps
  • mapDispatchToProps

Iteration 4

Complete the UrlForm component functionality so that when a URL is submitted, it is sent to the backend, and if the response back from the server is successful, then the shortened URL is displayed on the page.

The new shortened URL information should be added to the Redux store following a successful POST request. On refresh, the new shortened URL should persist on the page.

Iteration 5

Test the UrlForm component at a unit level. Do not test the apiCalls.

Iteration 6

Add delete functionality for a URL (the server-side endpoint exists already).


This project was bootstrapped with Create React App.

mod3-final's People

Contributors

vladd-png avatar ericweissman avatar robbiejaeger avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.