Light

narendrashetty / uber-mobile-web Goto Github PK

View Code? Open in Web Editor NEW

247.0 15.0 107.0 2.07 MB

This is an attempt to mock the new uber app into mobile web to learn how react can be used to optimize for mobile web.

Home Page: https://uberweb.herokuapp.com

HTML 4.33% JavaScript 71.31% CSS 24.36%

uber pwa mobile-web performance react

uber-mobile-web's Introduction

Uber clone for mobile web

Live Demo: https://uberweb.herokuapp.com

Blog: [https://medium.com/@narendrashetty/how-i-built-a-super-fast-uber-clone-for-mobile-web-863680d2100f]

This is about my learning on performance techniques used to make Uber mobile web which I built using React as fast as possible.

Motivation It’s been 1 year since Flipkart Lite was launched and few months since Housing Go was launched and I was always fascinated with the idea of how mobile web is a future and I wanted to give a try.

First I needed an app on which I can implement the perf techniques, and Uber had just recently launched their app with new design and it looked promising so I decided to clone the app using React.

It took me a some time to build the basic implementation of the app, I have used https://github.com/uber/react-map-gl

Below is the gif of the app with basic interaction.

Please give a visit to the demo on your mobile browser and share your inputs with me. (Since I hosted it on heroku, it’s goes down when it has no visits. Don’t lose patience if it doesn’t load at first :P).

Maintaining Performance is like a chess, one wrong move and it undos lot of hardwork done.

uber-mobile-web's People

Contributors

Stargazers

Watchers

Forkers

khadorkin ganapativs gittmaan kbuhiire international dileephell dmoralestech carloscuatin fesp21 goldylucks ifreddyrondon kuldeepkeshwar christiananese zanshinpost mahendrasv davidhenia sepiropht kr-react ahmedkato nitrek houce sundarcodes moubaid gyaneshgouraw tenshun curranabell tymiles003 hotpoor marcelopspereira bouda darr1s fellipeesteves witium githubgobi jaantohver flyforfreedom nhat-tong adnanu cryptominiun vkrit ubercab achenxu hyperonic shakthi1109 gourav-singhal athiwatp orinamio obyslink egaruba luansforks wpconsulate ebarahona rahulraghavankklm prelt65 ankit-mnnit cheemahamza123 bmtechno mediamatrix leeleekaen pankeshgupta nabil6391 leetcodesllc joeynimu abdullahceylan ramanasha rjmj skywalker427 drouillard davies-k rlambrecht nitsram lossoh lumenpink the-interverse madatonline bonomali alpenzoo christ0089 steve-gowildly braymarco adkstar dshekhar28 njokuscript lostonyx neurobug floodyboy berniceyao roywakumelojr dagasonhackason nanbaxian saworieza jhonnygoncalves zero-code cryptolisboa fernando100692 tridungle sumitsenbd tjbricktooth mohamed-nouh zyongbo

uber-mobile-web's Issues

npm install breaks

Fresh clone:

$ npm install
npm WARN deprecated [email protected]: This module is now under the @mapbox namespace: install @mapbox/geojson-normalize instead
npm ERR! tar.unpack unzip error /tmp/npm-30328-a3af35fb/registry.npmjs.org/gl/-/gl-4.0.2.tgz

r u getting this?

Uber logo

only uber logo is displaying nothing else happening on demo page

Move demo to surge

I'm using surge in most of my projects and it works beautifully.

I can prepare a PR with a single deploy script in package.json so you could just do npm run deploy and it will be done.

Let me know :)

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.