Table of Contents
- My first independent project, not tied to assignments or exercises
- To prioritise implementation over product intricacies and thus deepen my knowledge, I decided to go for a common web app idea, rather than diving into a more unique project right away
- The creative side of things is still important for me, so I thought to customise my app by offering clothing and accessory recommendations based on weather parameters, which can be customised in the user preferences
-
npm install npm@latest -g
-
git clone https://github.com/nikogenix/weather_app.git
-
npm install
-
npm run dev
...or to access the project on mobile
-
npm run dev -- --host
...or build and preview the project
-
npm run build npm run preview
- app bar
- nav buttons / menu for mobile
- search
- autocomplete location with API data
- debounce requests
- suggestions when input has typos
- option to select location on map
- option to search based on user's location
- date & time selection
- choose current time by default
- integrate date into API request
- limit date range based on API availability
- display country flags
- search history
- bookmarked locations - save & remove
- improve UX
- allow search when user presses enter
- disable search when there is no location selected/no input
- autocomplete location with API data
- dark/light mode
- unit preference (metric/imperial)
- refetch API data upon changing the preference
- user menu
- menu UI
- login/signup UI
- auth functionality
- settings UI
- dark/light mode
- unit preference
- slider based options for clothing/accessory
- customise the c/a items
- reset settings
- set more parameters - e.g. minimum amount of precipitation chance needed for recommendations
- persist settings data
- guest mode (local storage)
- user settings (DB)
- carry over guest settings upon account creation
- weather content & clothing/accessory recommendation
- home page
- trip page
- others
- tooltips
- aqi ranges
- uv
- tooltips
- footer
- scroll animation
- others
- improve style and responsiveness
- verify accessibility
- icon descriptions
- error handling
- displaying "n/a" when no data is available
- testing
- performance
- bugs & possible improvements
- "Maximum update depth exceeded" warning [1] in the clock from the date picker, when holding down the mouse and dragging for an extended amount of time and [2] in the weather graphs, when hovering
- continuously pressing up/down arrow keys while focused on a numerical input from the settings will freeze the app momentarily and update the values with a delay; only affects the keyboard, while on-screen arrows from the input work normally
- rounding up the temperature settings upon unit conversion will lead to imprecision upon converting the values repeatedly back and forth; can be resolved by only rounding up the values visually, but that might lead to other complications
- Error:
<path>attribute d: Expected number, "MNaN,150CNaN,149.…" ocurrs when clicking the last element in the daily weather timeline- [ fixed ] was actually related to the charts, not the timeline, due to the end time being 1 hour earlier on the last day
- the tooltips for UV and AQI info sometimes highlight the wrong category, or highlight a category while no data is available
- weather icons load a couple seconds late on the first search after a refresh
- keep page scrollbar visible when opening a modal (i.e. preferences)
Distributed under the GNU AGPLv3 License. See LICENSE.txt for more information.