kimanicharles911 / weather_citywatch Goto Github PK

View Code? Open in Web Editor NEW

#Capstone-Project | An application that provides weather data of the city/town a user enters. It uses a weather API. It is developed using Reactjs, deployed here 👉 https://weathercitywatch.netlify.app . It has tests done using jest and the react-testing library.

License: MIT License

HTML 13.36% JavaScript 84.36% CSS 2.28%

weather_citywatch's Introduction

Weather CityWatch (Reactjs, Bootstrap, Jest, react-testing-library)

Description

This is the repository that holds the source code of Weather CityWatch. It has been developed using Reactjs and bootstrap.

Deployed at

weathercitywatch.netlify.app

Setup/Installation Requirements

Install Dependencies

npm install

Run React Development Server

npm run start

To Build for Production

npm run build
Know how to host at heroku.com - https://dev.to/destrodevshow/how-to-deploy-react-app-to-heroku-in-5-minutes-3dni

⚠️ To deploy to heroku consider moving package-lock.json outside the project folder then you can perform this commands: git add . && git commit -m"deploy to heroku" && git push heroku master
⚠️ Then after the application has been published and the hosting link works RETURN THE package-lock.json to the project folder.
⚠️ Source: https://github.com/bazelbuild/rules_nodejs/issues/2452

Testing

npm run test

Unit Tests

src/
  components/
    __tests__/
      Async.test.js

Snapshot Tests

src/
  __tests__/
    ResultsCardComponent.test.js
    FormInputComponent.test.js

How It Was Built

Create React App

npx create-react-app
npm i --save bootstrap
npm i react-test-renderer
npm i --save-dev enzyme
npm i --save-dev @wojtekmaj/enzyme-adapter-react-17
npm i --save-dev jest-fetch-mock

Dependencies

Bootstrap
Enzyme
Enzyme Adapter React 17
React Test renderer
Jest Fetch Mock

src folder structure

src/
  components/
    FormInputComponent.jsx     
    ResultsCardComponent.jsx
    InstructionsComponent.jsx  
    WelcomeMessageComponent.jsx
    ResultsCardComponent.css
  __tests__/
    Async.test.js
    ResultsCardComponent.test.js
    FormInputComponent.test.js
    __snapshots__/
      FormInputComponent.test.js.snap
      ResultsCardComponent.test.js.snap
  App.css
  index.css
  logo.svg 
  setupTests.js
  App.jsx
  index.js 
  reportWebVitals.js