Giter Club home page Giter Club logo

asos's Introduction

Banner image

Show Case

*** This is work in progress ****

A React Native Clone of the popular ASOS App, this project was done over one weekend for learning purposes and is theremore not being maintained. Feel free to fork and use as you please.

It is platform agnostic although nearly all work done so far has been written and tested on iOS.

React-Native is a powerful tool for creating UI, and therefore i've focussed only on the UI. The business logic including data retrieval is ommitted from this project.

FEATURES

  • Dynamic Home Page
  • Category Listing
  • Product List
  • Product Info (limited functionality
  • Basket
  • Favourites
  • Account

LEFT OUT

If you fork this project, feel free to extend the following features.

  • API Services
  • Basket management
  • Recently Viewed Objects
  • Account information
  • No Tests! I like living dangerously

3rd Party Libraries used

Getting Started

  • Clone the app

    git clone https://github.com/edwinbosire/ASOS.git

  • run npm in the project root folder

    npm install

  • run on simulator

    react-native run-ios --simulator "iPhone 5s"

    Avoid this by opening the project in xcode and chosing run, this is also a better environment to read & fix build time errors.

If you encounter any problem, refer to the React Native Documentation.

Prerequisites

To run the project, you will need Node, Watchman, React-Native CLI and Xcode or Android SDK depending on your chosen platform, you can install these using Homebrew

brew install node

brew install watchman

Node comes with npm, you can use Yarn if you prefer or any other package manager.

npm install -g react-native-cli

  • Android SDK or Xcode

Get Xcode from the Mac App Store

Structure

.
├── tests
├── Android
├── ios
├── node_modules
├── src
    ├── components  <== All the "dumb" ui widgets go here**
    ├── containers <=== top level views akin to viewcontrollers**
    ├── img   <== should be renamed to assets, might copy videos here
    ├── services  <== dummy data classes, to be expanded in the future
    └── store <== Data dump from ASOS API
    

All the interesting things are within the components and containers group.

The iOS app utilises the AppRouter.js file for ALL navigation, we implement the tabbar from here and use React Native Router Flux to get shit done. This library saved a tonne of work usually associated with rolling out your own Navigator + Redux setup.

Deployment

TODO:

Contributing

Just fork the repo and do your thing.

Authors

Shameless Plug

In my past life, I used to write apps for other high street brands including Topshop, Topman, Burton, JackWills (offline), Harrods and others I can't recall. So I've got vast experience in building withing the "app commerce" domain and it's truely unbelievable how quick developing with React-Native is.

So here's the deal, I am available for freelance work (as in after work & weekends kinda work) if you are in need of quick dev work in React-Native, Swift or Objective-C let's talk 📧

License

This project is licensed under the MIT License - see the LICENSE.md file for details

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.