Coder Social home page Coder Social logo

tanbinh123 / nike-react Goto Github PK

View Code? Open in Web Editor NEW

This project forked from robbiekruszynski/nike-react

1.0 0.0 0.0 36.62 MB

Nike clone using REACT.js / React Routing / styled.components / integrated media-queries / focusing on stateful vs stateless practice

HTML 6.70% CSS 3.65% JavaScript 89.65%

nike-react's Introduction

Nike Clone // React

{04/19/19} initial start // {04/26/19} continuation

This project was bootstrapped with Create React App.

Description

https://www.nike.com/ clone using React

  • npx create-react-app webpack creation

  • https://www.styled-components.com/ used for styling

  • Styled Components creates the largest separation of working environment between React and Angular.

  • React .js files allows for all information (HTML / CSS / JS) to rest on a single file (unless global rules are created on a separate file and called in APP) opposed to Angular which has a similar separation of information, but to a more specific degree that can become cumbersome.

Specs

  • User will enter "sale" for the password which prompts a field for your name. After entering the name clicking on NikePlus / Jordan / Hurley / Converse will trigger an extra % of sale with your name. Else it would show 30%
  • User will be able to manipulate the screen size and the information provided will render to that viewport accordingly
  • User will be able to click on buttons in the top left of the Navbar to receive and extra bonus when shopping!
  • User will be able to click on links in the navigation bar and be directed to the corresponding area on nike
  • User will be able to click on Admin and add names in the field to see them diplay on admin.js.
  • User will also be able to delete names appearing in the field in whatever order they prefer

Original Website

  • application example

Screenshot // Sketch

  • application example
  • application example

Screenshot // Sketch with State

  • application example

Setup/Installation Requirements

  • As of 04/26/19:
  • Open your preferred browser
  • copy / paste
  • https://github.com/Robbiekruszynski/Nike-React
  • Make sure you're in your Desktop directory
  • clone or download the following https://github.com/Robbiekruszynski/Nike-React.git
  • Open your terminal and navigate to the react-nike directory (cd desktop --cd react-nike)
  • Once in your terminal and proper directory run the command yarn install (provided you are free of errors continue and run the next command)
  • In the project directory, you can run: yarn start
  • Runs the app in the development mode.
  • Open http://localhost:3000 to view it in the browser.
  • The page will reload if you make edits.
  • You will also see any lint errors in the console.
  • yarn test
  • Launches the test runner in the interactive watch mode.
    See the section about running tests for more information.
  • yarn run build
  • Builds the app for production to the build folder.
  • It correctly bundles React in production mode and optimizes the build for the best performance.
  • The build is minified and the filenames include the hashes.

Known Bugs

As of April 26th 2019 there are no known bugs

List of Technologies Resources

Learn More

You can learn more in the Create React App documentation. To learn React, check out the React documentation.

Notes

  • Successfully implemented Routing along with state vs stateless within corresponding paths.
  • Included several media queries based on viewport

Developmental Roadmap

  • Continue to build out styled features

License

{This software is licensed under the MIT license} Copyright (c) 2019 {Robbie Kruszynski}

Copyright (c) 2019 Robbie Kruszynski

nike-react's People

Contributors

example123 avatar robbiekruszynski avatar

Stargazers

 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.