Weather | Example Web App

A simple applications which make requests to a Weather Service and displays into the screen.

Inspired on App "Weather" for iOS.
(But much more simple, of course)

By @udimberto.

Objective

This is a special project to demonstrate my skills as front-end web developer, for technical evaluations on job interviews.

I'm have been working as front-end web developer for 6 years, but never dedicated my self a lot to go more deeply and learn more things than ReactJS, CSS, HTTP Requests, Serverless and Performance.

So, I'm trying to apply the best practices, which my knowledge allows, into this simple project just to try keep mine technical skills updated as possible.

Technologies

Or should I say "frameworks"?

• TypeScript
• Prisma DB
• NextJS
• NextAuth
• TailwindCSS
• Headless UI
• Hero Icons

Weather Service

• weatherapi.com

Features Road Map

• Search locations

• Option to detect weather using Browser Geo Location API

• Route Loading visual feedback

• Database with Prisma

  • Authentication with NextAuth
    • Facebook
    • Google
    • Twitter

• Detailed location page

  • As component, to be displayed inside a modal too
  • "Add" button, for save locally as user saved locations
  • Temperature
  • Condition
  • Latitude & Longitude
  • Last Updated
  • Desktop: Google Maps iframe
  • Study for "schema.org" properties

• User Preferences

  • Temperature Unit

• User Saved Locations

  • Easily removal
  • Edit List Order

• User Recent Viewed Locations

  • Easily removal
  • Limit up to 3

• SEO

  • Apply settings to improve Search Engine Optimization
  • "noindex" because it's just an demonstration app 😅

• Analytics

  • Dialog "allow or deny"

• Styles

  • Search Input
  • Buttons
  • Smart Background
    • Home: Day & Night
    • Meta "theme"
    • Location: Current Condition

• PWA

• Unit Tests

• Tests End to End