{"id":23655801,"url":"https://github.com/codelur/se_project_react","last_synced_at":"2025-11-23T03:30:16.905Z","repository":{"id":267727859,"uuid":"899310549","full_name":"codelur/se_project_react","owner":"codelur","description":"React front-end application WTWR","archived":false,"fork":false,"pushed_at":"2025-02-16T20:29:31.000Z","size":827,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-16T21:26:21.899Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codelur.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-06T02:27:36.000Z","updated_at":"2025-02-16T20:29:35.000Z","dependencies_parsed_at":"2025-02-16T21:32:33.110Z","dependency_job_id":null,"html_url":"https://github.com/codelur/se_project_react","commit_stats":null,"previous_names":["codelur/se_project_react"],"tags_count":0,"template":false,"template_full_name":"tripleten-com/se_project_react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelur%2Fse_project_react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelur%2Fse_project_react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelur%2Fse_project_react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelur%2Fse_project_react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codelur","download_url":"https://codeload.github.com/codelur/se_project_react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239627244,"owners_count":19670844,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-28T20:16:04.171Z","updated_at":"2025-11-23T03:30:16.834Z","avatar_url":"https://github.com/codelur.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WTWR (What to Wear?)\n\n## About the project\n\nThe idea of the application is pretty simple - we make a call to an API, which then responds with the daily weather forecast. We collect the weather data, process it, and then based on the forecast, we recommend suitable clothing to the user.\n\n## Title\n\nResponsive Weather App with Clothing Recommendations (ReactJS)\n\n## Description:\n\nThis responsive web application, built with ReactJS, offers a user-friendly interface for displaying the current weather and location, along with a dynamic weather bar and a list of recommended clothing items based on the weather conditions. Users can also add custom clothing elements through a validated form. An image loader component ensures that alternative images are displayed for unavailable image URLs.\n\n## Features:\n\nReal-time Weather Display: Shows the current weather and location data in a clear and informative manner.\nDynamic Weather Bar: The weather bar adapts its appearance based on the current weather (e.g., sunny, cloudy, rainy).\nWeather-Based Clothing Recommendations: Generates a list of appropriate clothing suggestions for the user's location, dynamically adjusting based on the weather. Image URLs are used to visually represent each item.\nCustomizable Clothing List: Users can add new clothing elements using a validated form that requires a name, image URL, and the weather type (Cold, Warm, or Hot) it corresponds to.\nDetailed Clothing Information: Clicking on a clothing item reveals an informative pop-up window with the item's image, description, and associated weather type.\nResponsive Design: Ensures a seamless user experience mobile devices.\n\n## Figma Design:\n\nThe design of this app is available on Figma for visual reference: Figma Design\n\nhttps://www.figma.com/file/DTojSwldenF9UPKQZd6RRb/Sprint-10%3A-WTWR\n\n## Weather API:\n\nThis application integrates with the OpenWeatherMap API (https://api.openweathermap.org) to retrieve real-time weather data. You'll need to create an account and obtain an API key to use the API in your project.\n\n## Image Handling and Image Loader Component:\n\nThis application utilizes an image loader component to handle unavailable image URLs. When an image URL in the clothing data is unavailable, the component displays an alternative image. This ensures a smooth user experience by preventing broken image links.\n\n## Usage:\n\nClone the repository: Use git clone https://github.com/codelur/se_project_react.git to clone this repository locally.\n\nInstall dependencies: Navigate to the cloned directory and run npm install or yarn install to install the required project dependencies.\n\nSet up OpenWeatherMap API: Obtain an API key from https://api.openweathermap.org and create a .env file (if not already present) in your project root directory to store the API key securely. Add the following line to your .env file, replacing \u003cYOUR_API_KEY\u003e with your actual key:\nREACT_APP_OPENWEATHERMAP_API_KEY=\u003cYOUR_API_KEY\u003e(as explained in Weather API section)\n\nStart the development server: Run npm start or yarn start to initiate the development server. Your application should be accessible at http://localhost:3000 (or the port specified in your package.json).\nDevelopment:\n\nCodebase structure is organized for maintainability and collaboration.\nHot reloading allows for immediate visual feedback during development.\nFeel free to customize the styling, weather API integration, and clothing recommendation logic to fit your preferences.\n\nTechnologies:\n\n## Links\n\nProject URL: https://codelur.github.io/se_project_react/\nReactJS - JavaScript library for building user interfaces\nOpenWeatherMap API (https://api.openweathermap.org) - Weather data provider\n\n## License\n\nMIT License\n\n## Contributing\n\nHere are some ways you can contribute:\n\nBug reports: If you find a bug, please create a new issue on GitHub with a clear description of the problem.\n\nFeature requests: If you have an idea for a new feature, please create a new issue on GitHub.\n\nPull requests: We encourage you to fork the repository, make changes, and submit a pull request. Please ensure your pull request follows our coding conventions (if any) and includes clear documentation for any new features.\n\nCode reviews: Help us improve the code quality by reviewing pull requests from others.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelur%2Fse_project_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodelur%2Fse_project_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelur%2Fse_project_react/lists"}