Challenge Charlie: Eduardo Pedrosa

.dockerignore

@@ -0,0 +1,15 @@
+# Arquivos de build
+build/
+coverage/
+
+# Dependências
+node_modules/
+
+# Arquivos de cache
+*.log
+*.swp
+.DS_Store
+
+# Outros arquivos
+*.md
+LICENSE

.env

@@ -0,0 +1,9 @@
+REACT_APP_CORS_PROXY=https://proxyservice-dudupedrosao.b4a.run
+REACT_APP_BING_URL=https://www.bing.com
+REACT_APP_OPEN_CAGE_API_KEY=d6280e04eeb2420f9bce0c6b3977a665
+REACT_APP_OPEN_CAGE_URL=https://api.opencagedata.com
+REACT_APP_OPEN_WEATHER_URL=http://api.openweathermap.org
+REACT_APP_OPEN_WEATHER_API_KEY=772920597e4ec8f00de8d376dfb3f094
+REACT_APP_POSITION_STACK_API_URL=http://api.positionstack.com
+REACT_APP_POSITION_STACK_API_KEY=81f6c0e7e132614619f1d635280cceca
+

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "singleQuote": true,
+    "semi": false
+}

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:16-alpine as builder
+WORKDIR /app
+COPY . .
+RUN yarn install 
+RUN yarn build
+
+FROM nginx:1.21.0-alpine as production
+ENV NODE_ENV production
+COPY --from=builder /app/build /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

Dockerfile.dev

@@ -0,0 +1,12 @@
+FROM node:16-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+COPY yarn.lock ./
+
+RUN yarn install
+
+EXPOSE 3000
+
+CMD ["yarn", "start"]

README.md

@@ -1,59 +1,79 @@
-# <img src="https://avatars1.githubusercontent.com/u/7063040?v=4&s=200.jpg" alt="HU" width="24" /> Charlie Challenge
 
-[[English](README.md) | [Portuguese](README.pt.md)]
 
-Build a responsive microsite to display the weather forecast at the locations given in the white text box (in the [example](./exemplo.jpg) image is where "Rio de Janeiro, Rio de Janeiro" appears. This text box should be an `input`, where the user can change the location. With the change of location, the weather forecast information for the new location must be loaded.
+# Project Name
 
-Once the page is opened, the user's geographic coordinates must be collected by the browser API to discover the city name via _reverse geocode_.
+This project is a technical challenge. It is basically a page where it is possible to search for the weather of any city entered by the user.
 
-The Bing highlight image should be used as the background. Forecasts for: today, tomorrow and the day after tomorrow should be shown.
+The decisions taken for the construction of the project took into account the growth of the project. This means that the simplest was not always done, but that in the long run it would be better for the maintenance and growth of the application. In addition, it was taken into account not to add too much complexity to the project.
 
-Note that there is a gradient superimposed on the original image, in fact this color reflects the current temperature of the place searched for the three dates. For temperatures below 15ºC, shades of blue should be used, for temperatures above 35ºC, shades of red should be used and shades of yellow should be used for other temperatures. When there is no chosen location, shades of gray should be used as the basis for the gradient. If the user clicks on any temperature, the temperatures should be changed from Celsius to Fahrenheit or from Fahrenheit to Celsius.
+## Technologies Used
 
-The background image URL should be extracted from the [Bing API](https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=pt-US).
+- Typescript
+- React
+- Styled Components
 
-To consult the weather forecast, use the one from [OpenWeather](http://api.openweathermap.org/data/2.5/weather?q={{location_name}}&APPID=772920597e4ec8f00de8d376dfb3f094) informing the name of the location instead of ` {{location_name}}` using app id `772920597e4ec8f00de8d376dfb3f094`. If necessary, create a new account.
+## Folder Structure
 
-To convert latitude and longitude to a location use [OpenCage](https://api.opencagedata.com/geocode/v1/json?q={{latitude}},{{longitude}}&key=c63386b4f77e46de817bdf94f552cddf&language=en) using the API key `c63386b4f77e46de817bdf94f552cddf`. If necessary, create a new account.
+```
+├── src/
+│   ├── assets/
+│   │   └── icons/
+│   ├── components/
+│   │   └── ui/
+│   ├── config/
+│   │   ├── i18n/
+│   │   └── tests/
+│   ├── hooks/
+│   ├── pages/
+│   ├── services/
+│   ├── styles/
+│   │   └── themes/
+│   └── utils/
+└── public/
+```
 
-Icons can be found at http://www.alessioatzeni.com/meteocons/.
+## Extra Features
 
-The layout must be followed, but you can suggest improvements. Describe these improvements in the README and why. You get extra points if these improvements are positive, or lose points otherwise.
+In addition to the core features of the application, the following extra features were implemented:
 
-## Requirements
+### Internationalization using i18n
 
--   Preferably do it in React, but you can use other libraries or frameworks (Angular, Vue.js, etc) or pure JavaScript (Vanilla JS).
--   For the style sheet, you can use whatever you prefer (CSS, SASS, LESS, CSS Modules, CSS-in-JS, etc).
--   Preferably use Webpack. If you prefer, you can use [create-react-app](https://github.com/facebook/create-react-app) or similar. Doing your own Webpack setup gives you extra points.
--   It is interesting that your application is ready for production. Create in Docker a `stage` for production and one for development of extra points.
--   Fork this challenge and create your project (or workspace) using your version of that repository, as soon as you finish the challenge, submit a _pull request_.
-    -   If you have any reason not to submit a _pull request_, create a private repository on Github, do every challenge on the **master** branch and don't forget to fill in the `pull-request.txt` file. As soon as you finish your development, add the user [`automator-hurb`](https://github.com/automator-hurb) to your repository as a contributor and make it available for at least 30 days. **Do not add the `automator-hurb` until development is complete.**
-    -   If you have any problem creating the private repository, at the end of the challenge fill in the file called `pull-request.txt`, compress the project folder - including the `.git` folder - and send it to us by email.
--   The code needs to run inside a Docker container.
--   To run your code, all you need to do is run the following commands:
-    -   git clone \$your-fork
-    -   cd \$your-fork
-    -   command to install dependencies
-    -   command to run the application
+The application was implemented with internationalization support, using the i18n library. This allows users to view the application in their preferred language. The i18n configuration files are located in the `config/i18n` directory.
 
-## Evaluation criteria
+### Themes using Styled Components
 
--   **Organization of code**: Separation of modules, view and model, back-end and front-end
--   **Clarity**: Does the README explain briefly what the problem is and how can I run the application?
--   **Assertiveness**: Is the application doing what is expected? If something is missing, does the README explain why?
--   **Code readability** (including comments)
--   **Security**: Are there any clear vulnerabilities?
--   **Test coverage** (We don't expect full coverage)
--   **History of commits** (structure and quality)
--   **UX**: Is the interface user-friendly and self-explanatory? Is the API intuitive?
--   **Technical choices**: Is the choice of libraries, database, architecture, etc. the best choice for the application?
+The application also includes support for theming using the Styled Components library. This allows the user to switch between light and dark themes, providing a more customizable experience. The theme files are located in the `src/styles/themes` directory.
 
-## Doubts
+### Autocomplete in city search
 
-Any questions you may have, check the [_issues_](https://github.com/HurbCom/challenge-charlie/issues) to see if someone hasn't already and if you can't find your answer, open one yourself. new issue!
+The city search input in the application features an autocomplete function, which suggests cities based on the user's input. This feature improves the user experience by making it easier and faster to find the desired city.
 
-Godspeed! ;)
+### Proxy Service
 
-<p align="center">
-  <img src="ca.jpg" alt="Challange accepted" />
-</p>
+I created a simple proxy service to enable calls that are not allowed from localhost. The project can be found in this GitHub repository: https://github.com/EduardoPedrosa/proxy-service. It's important to note that in this project, my main focus was on functionality rather than code organization.
+
+
+## How to Run the Project
+
+### Without Docker
+
+1. `yarn`
+1. `yarn start`
+
+### With Docker
+
+#### Development
+1. `docker-compose up`
+
+#### Production
+The port 80 of the container is being mapped to 8080. It can be changed to your choice.
+
+It's using nginx to serve the react. Depending on the infrastructure another docker file model could be made.
+1. `docker build . -t challenge-charlie`
+1. `docker run -p 8080:80 challenge-charlie`
+
+## Disclaimer
+
+Please note that this project includes storing environment variables in Git, which is not considered a best practice. Saving environment variables in version control systems can pose security risks, as sensitive information such as API keys and passwords may be exposed to unauthorized users.
+
+However, for the purposes of making it easier to run this project, the decision was made to include the environment variables in Git.

craco.config.js

@@ -0,0 +1,16 @@
+const path = require('path')
+
+module.exports = {
+    webpack: {
+        alias: {
+            '@components': path.resolve(__dirname, 'src/components'),
+            '@pages': path.resolve(__dirname, 'src/pages'),
+            '@services': path.resolve(__dirname, 'src/services'),
+            '@styles': path.resolve(__dirname, 'src/styles'),
+            '@config': path.resolve(__dirname, 'src/config'),
+            '@assets': path.resolve(__dirname, 'src/assets'),
+            '@hooks': path.resolve(__dirname, 'src/hooks'),
+            '@utils': path.resolve(__dirname, 'src/utils'),
+        },
+    },
+}

docker-compose.yml

@@ -0,0 +1,12 @@
+version: '3.8'
+
+services:
+    app:
+        build:
+            context: .
+            dockerfile: Dockerfile.dev
+        ports:
+            - '3000:3000'
+        volumes:
+            - '.:/app'
+            - '/app/node_modules'

jest.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+    transform: {
+        '^.+\\.tsx?$': 'ts-jest',
+    },
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: [
+        '@testing-library/jest-dom/extend-expect',
+        './src/config/tests/setup.js',
+    ],
+    moduleNameMapper: {
+        '\\.(svg)$': '<rootDir>/src/__mocks__/file-mock.ts',
+        '^@config/(.*)$': '<rootDir>/src/config/$1',
+        '^@assets/(.*)$': '<rootDir>/src/assets/$1',
+        '^@components/(.*)$': '<rootDir>/src/components/$1',
+        '^@styles/(.*)$': '<rootDir>/src/styles/$1',
+        '^@services$': '<rootDir>/src/services',
+        '^@services/(.*)$': '<rootDir>/src/services/$1',
+        '^@pages/(.*)$': '<rootDir>/src/pages/$1',
+        '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
+        '^@utils/(.*)$': '<rootDir>/src/utils/$1',
+    },
+}

nginx.conf

@@ -0,0 +1,9 @@
+server {
+  listen 80;
+
+  location / {
+    root /usr/share/nginx/html/;
+    include /etc/nginx/mime.types;
+    try_files $uri $uri/ /index.html;
+  }
+}