Little Shop FE Starter

Credits

Delete icons created by Ilham Fitrotul Hayat - Flaticon

Edit icons created by alkhalifi design - Flaticon

The details of this project are outline in this project spec.

Setup

1. Within your group, decide on one person to have the project repository (repo) on their GitHub account. Then, that person should fork this repo - on the top right corner of this page, click the Fork button.
2. Both memebers of the group should clone down the forked repo. Since you don't want to name your project "activity-tracker-starter", you can use an optional argument when you run git clone (you replace the [...] with the terminal command arguments): git clone [remote-address] [what you want to name the repo]
3. Once you have cloned the repo, change into the directory and install the project dependencies. Run npm install to install project dependencies.
4. Run npm start in the terminal to see the HTML page (you should see some boilerplate HTML displayed on the page). Control + C is the command to stop running the local server. Closing the terminal without stopping the server first could allow the server to continue to run in the background and cause problems. This command is not specific to Webpack; make note of it for future use.
5. Make sure both members of your team are collaborators on the forked repo.
6. Do not run npm audit fix --force. This will update to the latest version of packages. We need to be using webpack-dev-server@3.11.2 which is not the latest version. If you start to run into Webpack errors, first check that all group members are using the correct version.

Testing

Mocha and chai are already set up, with a boilerplate test for you..

Data Model

Users

[
  {
    "id": [number],
    "name": [string],
    "address": [string],
    "email": [string],
    "strideLength": [number - feet],
    "dailyStepGoal": [number - steps],
    "friends": [array - one-way connection to other user(s)]
  },
  ...more user data
]

Activity

[
  {
    "userID": [number],
    "date": [string YYYY/MM/DD],
    "numSteps": [number - steps],
    "minutesActive": [number - minutes],
    "flightsOfStairs": [number - flights]
  },
  ...more activity data
]

Hydration

[
  {
    "userID": [number],
    "date": [string YYYY/MM/DD],
    "numOunces": [number - ounces]
  },
  ...more hydration data
]

Sleep

[
  {
    "userID": [number],
    "date": [string YYYY/MM/DD],
    "hoursSlept": [number - hours],
    "sleepQuality": [number - unitless]
  },
  ...more sleep data
]

---

Installing Typescript (Part 2 Only)

1. Install typescript and ts-loader:

npm i -D typescript ts-loader

2. Create a tsconfig.json file in the root directory

touch tsconfig.json

3. Add the following to the tsconfig.json file:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}

4. In your webpack.config.js file, update it to be:

const path = require('path');
module.exports = {
  "mode": "none",
  "entry": "./src/scripts.ts",
  "output": {
    "path": __dirname + '/dist',
    "filename": "bundle.js",
    sourceMapFilename: "bundle.js.map"
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    }
  },
  "devtool": "source-map",
  // CSS and file (image) loaders
  "module": {
    "rules": [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
              publicPath: 'images/'
            }
          }
        ]
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

5. Update all .js files to be .ts including scripts.ts.

6. From here, you should now get some TypeScript errors when running npm start that you can begin working through.