Giter VIP home page Giter VIP logo

naanproject's Introduction

NAANProject: Complex App

A hi-fi prototype for a mobile app for Complex as a part of Cornell Tech's BigCo Studio course.

Researched and developed by:

Summary:

This is a hi-fi prototype for the Complex app, which would help Complex engage with their Generation Z audience, and enrich their community by bringing their fans together.

Complex Central is essentially a mobile version of their website, with some machine learning thrown in for effect. A Python script (scraper.py) scrapes Complex's RSS feed for their latest articles and compiles them on the front page. The user is recommended articles that appeal to their tastes, and the machine learning algorithm learns over time what articles they're most likely to click on (though, in this prototype, there is no such model).

Complex Links is a forum-based discussion service that enables Complex fans to come together and discuss their common interests: sneakers, style, sports, whatever they like. It's simple, doesn't take much effort to navigate, and brings people together (especially during these weird COVID times).

Required technologies:

  1. Python 3
  2. React Native (latest version) for Android
    • Please do yourself a favor and use the React Native CLI Quickstart instructions. Following the other set of instructions led to some inexplicable errors.
  3. Android Studio
    • You'll need this to set up an Android Emulator. I developed this prototype with a Pixel 5 running API 32, so you should set up the same device. Some UI elements might be contorted otherwise.

Required Python libraries:

pip install unidecode
pip install bs4
pip install requests
pip install lxml

To launch:

  1. Open the Pixel 5 emulator in the background.
  2. cd into this directory.
  3. Run ./launch.sh.

That's it. The app will install itself onto the emulator, and you can mess with it from there. If ./launch.sh lacks permissions to execute, run:

chmod u+x launch.sh

In your terminal.

Issues:

These are things that keep this hi-fi prototype from just being a fully-functional model for a Complex App.

  • Transitions all use the same animation.
  • The prototype's name, username and password are Agustin Forero, agforero and NAANForever respectively. Entry fields in second screen don't have onChangeText()s that save custom info.
  • The prototype assumes the user is interested in Complex Music, Sneakers and Style. The checkboxes at the beginning don't change this.
  • Props always pass as undefined when using react-navigation, which prevents the app from porting dynamic information into templates (e.g., passing an Object containing basic information on an article into a pretty-looking article page). To display what the page would look like despite this, the featured article on both FOR YOU and EXPLORE has its own page, generated from .json data received from scraper.py.
  • Images look a little goofy when stretched sometimes.
  • Not sure if this will be the case for every Android emulator, but Google Chrome on an emulator running a Pixel 5 (API 32) is pretty janky looking. See here for an example. This isn't necessarily a problem with the app, it just makes testing a little tougher.
  • Sometimes, images don't load quickly enough for the app to display them. (Might be fixed? We added resizeMethod='resize' as an attribute of the <Image>s and it seems to work).
  • Hamburger always returns back to Home instead of Explore for both Central and Links.
  • Articles displayed in the app are not scraped from React itself (by running requests on the RSS feed of Complex or something). Rather, they're scraped by a Python script (scraper.py) and stored as .json data in /react_env/assets/articles/.

naanproject's People

Contributors

agforero avatar

Watchers

 avatar

Forkers

dwome

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.