Code Monkey home page Code Monkey logo

week2's Introduction

Assignment 2

Getting Started

  1. Fork this repository and clone the code to your machine.
  2. Setup your application
    # Make sure you run this command inside the week2 folder. Check via `pwd`
    # Not doing so may cause the create-react-app command to fail
    pwd
    # /path/to/week2
    create-react-app social-network
  3. Ensure you can run your dev server
    cd social-network
    npm start
    
    # or if you're using yarn
    cd social-network
    yarn start

Overview

For this assignment, you'll be creating a social network UI using React. We're going to focus on creating the UI elements for now, but the "Extras" section has additional tasks you can try out to add some interactive elements.

Requirements

Recreate the provided screenshot from https://medium.com/topic/creativity.

Medium screenshot

Ensure that your UI meets the following criteria:

  • Renders the provided data using React components.
  • Uses React components that are modular and reusable.
  • Uses React components that...
    • Are modular/reusable. For example, an author's bio could be considered a modular and reusable component on this page.
    • Are tested with at least one test per component (You can use the default test in App.test.js as an example.
    • Use the appropriate loops/conditionals to map and display components.
    • Use propTypes to define props.
  • Looks fairly close to the original screenshot.
    • Focus more on the React components first, then follow up with styling.

Submission

  1. In order for a valid submission, your app should run and display a UI when running npm start.
  2. Create a pull request to this repository. There will be no CI.

Extras

  • Make each card clickable. Upon clicking a card, the browser should open up the link for the article.
  • Make each bookmark component clickable. Upon clicking a bookmark, the bookmark icon should turn green. Clicking the bookmark again will reset to the original state (no color).

week2's People

Contributors

bhague1281 avatar

Watchers

James Cloos avatar Allisa LeBeuf 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.