This project consists of a simple React app deployed to Netlify. It displays the current weather data and 5-day forecast data for Dallas at initial load. Users can then input different cities to fetch that city's current weather and 5-day-forecast.
The live application can be seen here.
The web application is fully responsive through the use of Bootstrap's grid system and CSS media queries. Testing was conducted with Jest and React Testing Library.
This project was bootstrapped with Create React App. In order to work with this web application locally, clone or fork this repository and then use the scripts detailed below.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
- @testing-library/react: 13.4.0
- bootstrap: 5.2.2
- dompurify: 2.4.0
- react: 18.2.0
- react-bootstrap: 2.5.0
- typescript: 4.8.4
- validator: 13.7.0
- msw: 0.47.4
Note: These are only the major packages and programs used. For a full list of packages and versions check the package.json file.
CRA was used.
This app matches the provided comp nearly identically. A user input bar was added and the location does not display the state abbreviation. These are the two major differences.
A combination of Bootstrap's grid system and CSS media-queries provides proper responsiveness. The primary content of the web application will scale with screen size. In addition, at 768px the primary content undergoes adjustments that better fit small screens such as phones and small tablets.
Major changes for screen sizes under 768px:
- Temp toggle button moves to top right corner
- Skyline picture is removed as it was distracting on small screens
- Weekly forecast transitions to a flex-column layout rather than a row
OpenWeather's APIs were used to request the weather data. Specifically their Current Weather Data API and 5 Day / 3 Hour Forecast API were used.
This API was used as it was free, had sufficient documentation, and allowed city names to be used directly in requests. Many open APIs required latitude and longitude.
Using the temp toggle button, temperatures for both the current weather and the weekly forecast can be adjusted between Fahrenheit and Celsius.
The icons were pulled directly from the Figma Sketch. Storms use the thunderstorms icon. Light rain uses the drizzle icon. Rain uses the rain icon. Cloudy and sunny uses the partly cloudy icon. As you change the city, you will see the weather icons change as well.
Two of the optional requirements were implemented as well as two additions of my own.
An input bar was added to allow users to select their specific city. Cities can consist of letters, periods, and dashes. If a city does not exist in the API the app will display error messages.
domPurify and validator were used to ensure safe and correct user input is passed to the rest of the application.
This web application is deployed to Netlify here.
Testing was not mentioned in the instructions document. However, tests for all components and functionality were implemented using Jest and React Testing Library.
Typescript was not mentioned in the instructions document. However, typescript was used to increase readability of code and catch any potential errors at compile time.
This web application meets all requirements requested. If I were to continue working on this web application here is a list of some features and improvements I would like to implement in order from most important to least important.
- Improve mobile UX. Instructions said to focus on desktop first as opposed to mobile-first design.
- Improve accessibility features (text contrast, temp toggle button)
- Improve user feedback on input bar (red outline for invalid input, error message if city does not exist, etc.)
- Add city dropdown to input bar to ensure only city names can be selected
- Style current weather error message
- Combine parseForecastData and parseWeatherData as they have very similar functionality
- Convert CSS to CSS modules (Eliminate risk of conflicting class names)
- Implement e2e testing with Cypress (Currently done with RTL but Cypress is a better tool for e2e)
- Cloud animations (Improve user experience)
- Implement ContextAPI to handle some of the prop drilling (fetchDataError and tempIsCelsius props) (Really not necessary at this point)
- Implement some SEO best practices (data schema, opengraph meta tags, keywords, etc)
- Review tests to check for duplicate coverage (Improves speed of running tests) (Not an issue right now)
- Convert icons to webp (Really not necessary at this point)