Assignment 2B: PizzaTweeter4000

Due: Monday February 25th 2019 @ 11:59pm

Introduction

Congratulations on completing Assignments 1 and 2A! In the second part of this you will be using a lot of the code you have written to create a React or Vue application that will provide additional structure to your code and enhance the functionality of your twitter feed!

Setup

If you are using a department machine, run cs132_install assignment2B to get started.

The script will create a assignment2B directory in /gpfs/data/course/cs1320/your_cs_login/

If you are using your own computer, download the zip of the stencil here to get started

Then, create a new React or Vue project in the provided directory by following the instructions in the relevant pre-lab.

Overview

Your task is the use the code you've written from Assignment 2A to inform the implementation of this assignment. You will be creating essentially the same application with some feature enhancements that would be very difficult to do without React or Vue.

You may also use your HTML and CSS from your Twitter mockup in Assignment 1 but this is not required.

You will once again be creating a feed of tweets that gets pulled in every 3 seconds and can be toggled on and off by a checkbox or whatever method you choose. In addition, you will be required to create a color toggle button on each tweet that will change the color of the tweet every time it is clicked (e.g. White to Blue, then back to White is fine)

Your job is to use your newfound React or Vue skills to implement this project. All code should be written in React or Vue.

Requirements

A complete PizzaTweeter4000 Project will be a website that:


Extra Credit

Important Note

Currently, if you navigate to someone's profile, your React app will still be fetching tweets in the background. This is because your "App" component (the component responsible for fetching tweets) never clear the fetch tweet interval upon exiting.

To fix this, in React, clear your fetch tweet interval in your component's componentWillUnmount() method; in Vue, clear your fetch tweet interval in your component's beforeDestroy function.

React Router

Routing enables websites to have multiple urls. React Router is a tool that allows you to handle routing with SPA.

Technically, you could have a React application with no Router but have, for routing, a humongous if clause in your App.js that determines which component should be rendered based on url. However, this approach makes your app difficult to maintain and update. So, many people turn to React Router to enable routing on their React website.

You are not required to do routing in this assignment, but getting familiar with routing will help you in upcoming assignments and final project.

Get Started

Install React Router using npm install react-router-dom

Usage

This is some example code of how to use React Router

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import Navbar from './Navbar'
import Home from './Home'
import Profile from './Profile'
import './App.css';

export default class App extends Component {
  constructor(props)  {
    super(props)

    this.state = {
    }
  }

  render() {
    return (
      <BrowserRouter>
        <div>
          <Navbar />
          <Switch>
            <Route exact path='/' component={Home} />
            <Route exact path='/:profile' component={Profile} />
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}
          
        

In this code, we first import BrowserRouter, Switch, Route from the react-router-dom package. We then import our custom components for Navbar, Home, Profile. You may not have these exact components in your own code, but in this example those are the custom components we have.

In our return, we first have a BrowserRouter that should encapsulate everything. Then, we have a div wrapper right below it because BrowserRouter is only allowed to have 1 child element. Doing this allows us to have the Navbar at the top of the page at all times without having to copy and paste it into each component.

We then have a Switch component that picks a Route component based on where you navigate to.

And lastly we have a Route component that specifies which React component should be rendered based on the route.

The colon in :profile represents a wildcard so that any route with a word after a slash like /foo will go to the Profile component

Within a child React component, you can navigate to routes using the Link component which is imported from react-router-dom (They are essentially a replacement for HTML a tags)

Note

React Router can be very confusing at first so I highly recommend googling 'react router how to do x' whenever you run into a problem. Stack Overflow is your best friend here. You could also try looking at the React Router official documentation website here, though it might be a little confusing itself. Also don't be afraid to post on Piazza about React Router! We're happy to answer any questions you have on it.

Vue Router

Routing enables websites to use multiple urls. If you are making a Vue web app, you will need a router.

You are not required to do routing in this assignment, but familiarizing yourself with Vue Router might be handy should you choose to use Vue in your final project.

Get Started

Install Vue Router using npm install vue-router

Usage

Checkout this video tutorial for a step-by-step guide on adding router to your app.

Profile Page

If you choose to do extra credit, you will be required to implement navigation to a user's profile by clicking on their username or profile picture from a tweet. When navigating to a person's profile, your url must reflect their username just like how Twitter does it (e.g http://localhost:3000/my_username).

React

To navigate to someone's profile, you must pass the user object in the tweet data as a prop through a React-Router Link. You would have this functionality in your Tweet component. It would look something like this: (Source: here)

<Link to={{ pathname: '/some-person-username', state: { user: 'stuff'} }}>Username</Link>

Then in your profile component, you can access the user object with this: (Source: here)

this.props.location.state.user

Vue

To navigate to someone's profile, you must pass the user object in the tweet data as a param through a Vue Router router-link. You would have this functionality in your Tweet component. It would look something like this:

<router-link :to="{ name: 'nameofroute', params: {user: 'stuff'}}">Username</router-link>

Then in your profile component, you can access the user object like this (source):

this.$route.params.user

Profile Page Example

The profile page should display the user's name, location, created date, and a tweet button whose fill color is determined by the user's profile_link_color. This is what our profile page looks like:

You are not required to follow this format but you are required to display all the necessary information mentioned above.

You should also be able to navigate back to the home page of fetching tweets from the profile page without hitting the back button.

Accessibility

As we've seen in class, it is very important to keep in mind accessibility when designing and developing web applications. So, as you complete your project, please also think about the following and include your answers in your README:

  1. Is the page accessible? Why or Why not?
  2. What are some possible ways (implementations) to improve accessibility?

Handing In

Before handing in your project, make sure you’ve filled in your README.md file (you can use any format you like for your README, but Markdown is highly recommended) documenting any known bugs and important design decisions. Also include your answers to the accessibility questions above.

If you used a department machine, run the handin script cs132_handin assignment2B to submit your code.

If you used your own computer, transfer your files to a department machine and submit there. Refer to our remote setup instructions under the Docs page.

Extra React Resources

We will not be using React in upcoming assignments but there's still a ton of great stuff to learn about the fastest-growing front-end framework. Below is some information to further improve your React knowledge:

General tips:

Recommended NPM packages:

Here are some npm packages that I've used in almost every single one of my React projects

iOS and Android Development

That's right, you can actually develop iOS and Android apps using React with React-Native! Used by Instagram, Facebook, Tesla, Uber, Walmart, Skype, Pinterest, and many more, React-Native is an incredible way to develop mobile applications without having to learn Xcode and Android Studio. In fact, your React-Native code can work on both platforms with just a couple extra lines of code in your project. If you need help getting it setup, please come to Alex Yu's hours :)

Extra Vue Resources

General Tips:

Recommended NPM packages:

Here are some packages I saw a lot when I interned at a company that uses Vue.

iOS and Android Development

As of summer 2018, you can use Vue Native to build iOS and Android apps. Since it's pretty new and Vue has a smaller fanbase, there aren't many resources available right now.