Skip to content

πŸ–οΈ Weather App Demo - Next.js 11 + React 17 + Tailwind CSS + 100% Test Coverage βœ… Code Repaired to Work and Match Design by Dr. Derek Austin πŸ‘€ View Production Build at https://weather-app-demo-doctorderek.vercel.app I repaired this weather app to actually work and match the design document. Then, I implemented best practices & 100% test coverage.

Notifications You must be signed in to change notification settings

DoctorDerek/weather-app-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Vercel codecov Build Status

πŸ–οΈ Weather App Demo - Next.js 11 + React 17 + Tailwind CSS + 100% Test Coverage

βœ… Code Repaired to Work and Match Design by Dr. Derek Austin

πŸ‘€ View Production Build at https://weather-app-demo-doctorderek.vercel.app

I repaired this weather app to actually work and match the design document.

Additionally, I added 7 other major features, including best practices and extensive test coverage (100% of lines).

Below you will find a complete feature set, discussion section, and technical journal.

Required Features

  1. βœ… Fix the bug where the app crashes when trying to request the weather

  2. βœ… Refactor to a function component using React Hooks

  3. βœ… Match the design https://weather-app-demo-doctorderek.vercel.app/design.png

  4. βœ… Improve web accessibility

    • Ensure that clicking on the label "Weather Search" puts focus into the text-input.
      • solution: <label htmlFor="city">Weather Search <input type="text" id="city" /></label>
    • Make sure any loading states are correctly announced to a screen reader
      • solution: const Loading = () => (<div aria-live="polite">loading...</div>)
  5. βœ… Make the tests better

Additional Features

  1. βœ… Deployed production build of Next.js to Vercel with CI/CD
  2. βœ… Upgraded Next.js to @latest (v11.1.2) and all other dependencies
  3. βœ… Established engineering best practices:
    • Prettier, ESLint, Husky (Git Hooks), tsconfig.json, TypeScript Import Sorter, .gitattributes
  4. βœ… Crafted unit tests for new code features (TDD / Test Driven Development)
    • Jest + React Testing Library with React Test Renderer
  5. βœ… Wrote unit testing for existing code (16% ➑ 100% test coverage)
  6. βœ… Developed mobile-first, responsive UX design with Tailwind CSS
  7. βœ… Implemented Tailwind CSS dark mode for app with animated SVG toggle

Discussion Section

  1. βœ… Talk about your changes when fixing the "App crashes on submit" bug

    • The bug was caused by the classic JavaScript problem where trying to access properties of null or undefined throws an error.

    • Avoiding that type of error, especially in production, is one of the main advantages of using TypeScript for static code analysis.

    • In this case, the weatherResult was not properly typed, and there was no error handling for 404 errors ("city not found").

    • I prefer building robust components with a variety of guard clauses, so I made the city prop optional in <CityWeather>.

    • I also identified errors with ESLint, such as formdata.get("city").toString() being unsafe vs. String(formData.get("city")).

  2. βœ… Talk about your changes when refactoring the <CityWeather> component

    • Acting like this was a "real" work environment with an "urgent" bugfix, I fixed the bug before refactoring to a function component.

    • However, given that this was really a new feature, I would have preferred to refactor and make the code clearer before implementation.

    • I also refactored the structure of the app significantly, including absolute paths (@/src/**), eslint-plugin-tailwindcss, and more.

    • Even though I moved the API_KEY to .env.local, it is still exposed in .env.test and in query parameters via the use of a GET request.

    • Ideally, the API_KEY secret would be protected by using a dummy variable in .env.test and using POST instead of GET to hit the API.

Test Coverage Report - Jest & React Testing Library

npm run test

Launches the test runner and generates code coverage report.

npm test:watch

Launches the test runner in the interactive watch mode.

Technical Journal

  • 1.0.0 Existing codebase: Next.js 10 (TypeScript)
  • 1.0.1 First commit by Dr. Derek Austin: chore: delete yarn.lock
  • 1.1.0 Upgraded all dependencies and established best practices like Husky
  • 1.2.0 Bugfix / Developed first working development build in Next.js
  • 1.3.0 Refactored <CityWeather> to function component with useEffect
  • 1.4.0 Fixed tests, added loading message, and deployed to Vercel with CI/CD
  • 1.4.1 Reached 100% test coverage by adding next-page-tester to test /
  • 1.5.0 Implemented design document and developed UX for mobile experience
  • 1.6.0 Improved web accessibility using and aria-live="polite"
  • 1.7.0 Created dark mode for app using Tailwind CSS plus animated SVG toggle
  • 2.0.0 Reached 100% test coverage of lines by testing
  • 2.0.1 Hotfix to remove vertical scroll bars on mobile caused by h-screen

About

πŸ–οΈ Weather App Demo - Next.js 11 + React 17 + Tailwind CSS + 100% Test Coverage βœ… Code Repaired to Work and Match Design by Dr. Derek Austin πŸ‘€ View Production Build at https://weather-app-demo-doctorderek.vercel.app I repaired this weather app to actually work and match the design document. Then, I implemented best practices & 100% test coverage.

Resources

Stars

Watchers

Forks

Packages

No packages published