Clarusway


Project-002: NBA Legends App (RP-02)

Description

Project aims to create a Languages Cards App.

Problem Statement

  • We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.

Project Skeleton

002-NBA Legends(folder)
|
|----readme.md         # Given to the students (Definition of the project)
SOLUTION
├── public
│     └── index.html
├── src
│    ├── components
│    │       ├── Header.js
│    │       ├── CardContainer.js
│    │       └── PlayerCard.js
│    ├── helper
│    │       └── data.js
│    ├── assets.js
│    │       └── [images]
│    ├── App.js
│    ├── App.css
│    ├── index.js
│    └── index.css
├── package.json
└── yarn.lock

Expected Outcome

Project 002 Snapshot

Objective

Build a NBA Legends App using ReactJS.

At the end of the project, following topics are to be covered;

  • HTML

  • CSS

  • JS

  • ReactJS

At the end of the project, students will be able to;

  • improve coding skills within HTML & CSS & JS & ReactJS.

  • use git commands (push, pull, commit, add etc.) and Github as Version Control System.

Steps to Solution

  • Step 1: Create React App using npx create-react-app nba-legends

  • Step 2: Build NBA Legends app using data.js, images in assets folder.

  • Step 4: Push your application into your own public repo on Github

  • Step 5: Add project gif to your project and README.md file.

Deployment Notes

  1. There should be only one lock file package-lock.json or yarn.lock.
  2. There shouldn't be any warnings in your application.
  3. If you have deployed your app to github pages before, you should remove homepage property from package.json.

You can use any of these sites for deployment

☺ Happy Coding ✍