Update to version 1.2.0 Readme files with UI screens

README.md

@@ -7,12 +7,12 @@
 
 # Development challenge
 
-This project was designed to strengthen the studies of professionals working in web, mobile, and back-end development, offering a range of practical challenges.
+This project aims to enrich the studies of professionals working in web, mobile, and back-end development by offering a series of practical challenges.
 
-For front-end developers, we provide a ready-to-use API set up to run in a Docker environment. This API includes routes for listings, authentication, user creation, login, among other features. This allows the developer to focus primarily on the design and implementation of interfaces.
-
-The challenge set for back-end developers is to replicate the already developed routes in their preferred programming language and then produce relevant documentation.
+For **Front-End Web** and **Mobile** developers, we provide [Figma](https://www.figma.com/file/Q44nlEVrODE7W6iBFRVPZL/Desafio-para-devs---App-%2F-Dashboard-%7C-UX%2FUI?type=design&node-id=1%3A4&mode=design&t=1oLA9vtlXknWRtig-1) with screen flows, components, and a ready-to-use style guide to streamline the construction process and provide a development experience closer to reality. 
+Additionally, the project includes an **API** ready for use, configured to run in a Docker environment or online, published by us. This API includes routes for listings, authentication, user creation, login, among other functionalities, allowing developers to focus primarily on design and interface implementation.
 
+For **back-end** developers, the challenge is to replicate the already developed routes in their preferred programming language and then produce relevant documentation.
 
 ### This **README** is currently divided into two parts:
 
@@ -21,3 +21,13 @@ In Instructions for challengers you will find instructions for completing the ch
 
 In Instructions for contributors you will find instructions to contribute to the project, whether to correct bugs or add new features.
 - [Instructions for contributors](readme_files/contributors.md)
+
+
+## Acknowledgments:
+
+I would like to express my sincere gratitude to my friend and colleague [Aline Moraes](https://www.linkedin.com/in/alinegermanodemoraes/) for the excellent UI and UX work done for these challenges.
+
+
+## Non-profit project:
+
+The entire development of this project was done voluntarily, with the purpose of supporting professionals interested in enhancing their skills. At no time should this project be used for commercial purposes. Use it to support your team, mentoring, and students, and if possible, make the proper references.

app/.env

@@ -9,4 +9,4 @@ DATABASE_URL=sqlite:///./dev-challenge.db
 TEST_DATABASE_URL=sqlite:///./dev-challenge-test.db
 WORKERS_PER_CORE=1 # config for uvicorn
 MAX_WORKERS=1 # config for uvicorn
-VERSION=1.1.2
+VERSION=1.2.0

readme_files/challenge_frontend1.md

@@ -1,6 +1,7 @@
 # Front-end Developer Technical Challenge 1
 
 ## Objective:
+
 Implement a graphical user interface that allows users to submit contact information through a form. The interface should be developed in your preferred language/framework and will be used to communicate with a REST API.
 
 ## Specifications:
@@ -13,6 +14,7 @@ Implement a graphical user interface that allows users to submit contact informa
     - Interest (text field)
   The form should have a submit button to send the information.
 
+
 ### 2. API Communication:
 
 - Upon form submission, make a POST request to the API at the following endpoint: /contact/.

readme_files/challenge_frontend2.md

@@ -5,6 +5,12 @@ Your primary mission is to design and implement a user-friendly interface that i
 
 ## Specifications:
 
+### Figma
+
+Access the [Figma link](https://www.figma.com/file/Q44nlEVrODE7W6iBFRVPZL/Desafio-para-devs---App-%2F-Dashboard-%7C-UX%2FUI?type=design&node-id=1%3A655&mode=design&t=aSjbTNYsb0UGO0yp-1) to follow the style guide and components in your interfaces.
+
+![Create Account Form](images/Create account-web.png)
+
 ### 1. User Registration Form:
 
 - Your interface should provide a registration form containing the following fields:

readme_files/challenge_frontend3.md

@@ -7,6 +7,12 @@ Your primary mission is to design and implement a user-friendly interface form t
 
 ## Specifications:
 
+### Figma
+
+Access the [Figma link](https://www.figma.com/file/Q44nlEVrODE7W6iBFRVPZL/Desafio-para-devs---App-%2F-Dashboard-%7C-UX%2FUI?type=design&node-id=1-655&mode=design&t=1oLA9vtlXknWRtig-4) to follow the style guide and components in your interfaces.
+
+![Login Form](images/Login-Web.png)
+
 ### 1. User Login Form:
 
 - Your interface should provide a login form containing the following fields:

readme_files/challenge_frontend4.md

@@ -8,13 +8,20 @@ Creation of a dashboard with a side menu with the following items:
 - Statements
 - Profile
 
-Like This (home):
+*Optionals (Api under development for the items below)*
 
-
-![Schema Example](images/HomeWIRE.png "Wireframe Dashboard")
+- Setting
+- Notification
+- Logout
 
 ## Specifications:
 
+### Figma
+
+Access the [Figma link](https://www.figma.com/file/Q44nlEVrODE7W6iBFRVPZL/Desafio-para-devs---App-%2F-Dashboard-%7C-UX%2FUI?type=design&node-id=13-3891&mode=design&t=1oLA9vtlXknWRtig-4) to follow the style guide and components in your interfaces.
+
+![Dashboard](images/Home-Web.png)
+
 ### 1. Home
 
 - The home page should contain a welcome message 

readme_files/challenge_frontend5.md

@@ -4,9 +4,11 @@ Its main mission is to design and implement a screen that displays the user's ba
 
 You are expected to create this interface in your preferred language/framework.
 
-# Example:
+### Figma
 
-![Example](images/STATEMENT_WIRE.png "Example")
+Access the [Figma link](https://www.figma.com/file/Q44nlEVrODE7W6iBFRVPZL/Desafio-para-devs---App-%2F-Dashboard-%7C-UX%2FUI?type=design&node-id=13-5855&mode=design&t=1oLA9vtlXknWRtig-4) to follow the style guide and components in your interfaces.
+
+![Statement](images/Statement-Web.png)
 
 ### Pagination:
 

readme_files/challenge_frontend6.md

@@ -4,9 +4,11 @@ Its main mission is to design and implement a screen that displays user registra
 
 You are expected to create this interface in your preferred language/framework.
 
-# Example:
+### Figma
 
-![Example](images/user_details.png "Example")
+Access the [Figma link](https://www.figma.com/file/Q44nlEVrODE7W6iBFRVPZL/Desafio-para-devs---App-%2F-Dashboard-%7C-UX%2FUI?type=design&node-id=19-3597&mode=design&t=1oLA9vtlXknWRtig-4) to follow the style guide and components in your interfaces.
+
+![Profile](images/Profile-Web.png)
 
 ## Specifications:
 
@@ -24,6 +26,9 @@ You are expected to create this interface in your preferred language/framework.
 }
 ```
 
+> At this moment, the api does not yet support other image fields and image uploading. We will soon be evolving it. Feel free to contribute.
+
+
 ## Validations:
 
 - The Route is authenticated, so it is necessary to send the token, otherwise the user will receive a 401 unauthorized status code, with the following message:

readme_files/challenge_frontend_mobile1.md

@@ -0,0 +1,49 @@
+## Objective:
+
+Your primary mission is to design and implement a user-friendly interface that interacts with the `users` route for user registration. You are expected to craft this interface in your preferred language/framework.
+
+## Specifications:
+
+### Figma
+
+Access the [Figma link](https://www.figma.com/file/Q44nlEVrODE7W6iBFRVPZL/Desafio-para-devs---App-%2F-Dashboard-%7C-UX%2FUI?type=design&node-id=1%3A655&mode=design&t=aSjbTNYsb0UGO0yp-1) to follow the style guide and components in your interfaces.
+
+![Create Account Form](images/Create account-Mobile.png)
+
+### 1. User Registration Form:
+
+- Your interface should provide a registration form containing the following fields:
+  - User ID (to be filled with an email): userid
+  - Password: password
+  - Full Name: fullname
+  - Birthdate: birthdate
+
+The form structure should closely align with this JSON model:
+
+```json
+{
+    "userid": "user@example.com",
+    "password": "string",
+    "fullname": "string",
+    "birthdate": "2023-09-22"
+}
+```
+
+### 2. API Communication:
+
+- To gain a better understanding of the request details and expected API responses, you are encouraged to refer to the comprehensive API documentation available at: [http://localhost:8000/docs#/users/create_user_users__post](http://localhost:8000/docs#/users/create_user_users__post).
+
+[Online API Doc](https://dev-challenge.micheltlutz.me/docs)
+
+
+### Bonus:
+
+- Unit Testing: As an added advantage, we'd be highly impressed if you can integrate unit tests for the designed interface. It will provide us with a clear understanding of your proficiency in ensuring the robustness and reliability of your implementations.
+
+## Final Considerations:
+
+- Your user interface should not only be functional but also intuitive and user-friendly.
+- The design should take into account both aesthetics and usability.
+- Be sure to write a good README guiding how to run your project, dependencies and what you think is necessary to install and run the project.
+
+Challenges like this offer a unique opportunity to showcase your skills. We wish you the best and eagerly await your innovative solution!

readme_files/challenge_frontend_mobile2.md

@@ -0,0 +1,57 @@
+# Mobile Developer Technical Challenge 2
+
+
+## Objective:
+
+Your primary mission is to design and implement a user-friendly interface form to user login interface that interacts with the `auth` route for user login. You are expected to craft this interface in your preferred language/framework.
+
+## Specifications:
+
+### Figma
+
+Access the [Figma link](https://www.figma.com/file/Q44nlEVrODE7W6iBFRVPZL/Desafio-para-devs---App-%2F-Dashboard-%7C-UX%2FUI?type=design&node-id=1-731&mode=design&t=1oLA9vtlXknWRtig-4) to follow the style guide and components in your interfaces.
+
+![Login Form](images/Login-Mobile.png)
+
+### 1. User Login Form:
+
+- Your interface should provide a login form containing the following fields:
+  - User ID (to be filled with an email): userid
+  - Password: password
+
+The form structure should closely align with this JSON model:
+
+```json
+{
+    "userid": "john.doe@email.com",
+    "password": "string"
+}
+```
+
+### 2. API Communication:
+
+- To gain a better understanding of the request details and expected API responses, you are encouraged to refer to the comprehensive API documentation available at: [http://localhost/docs#/auth/login_auth__post](http://localhost/docs#/auth/login_auth__post).
+- The API will return a JSON object containing the access token and token type. You should store the access token in the browser's local storage for future requests.
+- The access token should be sent in the `Authorization` header of all future requests to the API.
+- The access token should be prefixed with the token type and a space, like this: `Bearer <access_token>`
+
+**Response example**:
+
+```json
+{
+    "access_token": "access_token", 
+    "token_type": "bearer"
+}
+```
+
+### Bonus:
+
+- Unit Testing: As an added advantage, we'd be highly impressed if you can integrate unit tests for the designed interface. It will provide us with a clear understanding of your proficiency in ensuring the robustness and reliability of your implementations.
+
+## Final Considerations:
+
+- Your user interface should not only be functional but also intuitive and user-friendly.
+- The design should take into account both aesthetics and usability.
+- Be sure to write a good README guiding how to run your project, dependencies and what you think is necessary to install and run the project.
+
+Challenges like this offer a unique opportunity to showcase your skills. We wish you the best and eagerly await your innovative solution!

readme_files/challenge_frontend_mobile3.md

@@ -0,0 +1,47 @@
+# Mobile Developer Technical Challenge 3 - Dashboard and Side Menu
+
+## Objective:
+
+Creation of a dashboard with a side menu with the following items:
+
+- Home
+- Statements
+- Profile
+
+*Optionals (Api under development for the items below)*
+
+- Setting
+- Notification
+- Logout
+
+## Specifications:
+
+### Figma
+
+Access the [Figma link](https://www.figma.com/file/Q44nlEVrODE7W6iBFRVPZL/Desafio-para-devs---App-%2F-Dashboard-%7C-UX%2FUI?type=design&node-id=13-4267&mode=design&t=1oLA9vtlXknWRtig-4) to follow the style guide and components in your interfaces.
+
+
+| Home                  | Side Menu               |
+|-----------------------|-------------------------|
+| ![Home](images/Home-Mobile.png) | ![Side Menu](images/Menu-Mobile.png) |
+
+
+### 1. Home
+
+- The home page should contain a welcome message 
+
+### 2. Statements
+
+Now this page is a blank page in next challenge you will create a list of statements.
+
+### 3. Profile
+
+Now this page is a blank page in next challenge you will create a profile page for edit user information.
+
+### Bonus:
+
+- Unit Testing: As an added advantage, we'd be highly impressed if you can integrate unit tests for the designed interface. It will provide us with a clear understanding of your proficiency in ensuring the robustness and reliability of your implementations.
+
+## Final Considerations:
+
+- Your user interface should not only be functional but also intuitive and user-friendly.

readme_files/challenge_frontend_mobile4.md

@@ -0,0 +1,83 @@
+# Mobile Developer Technical Challenge 4 - Statement List and Amount
+
+Its main mission is to design and implement a screen that displays the user's balance and their list of bank transactions with pagination, hiding the display of values.
+
+You are expected to create this interface in your preferred language/framework.
+
+### Figma
+
+Access the [Figma link](https://www.figma.com/file/Q44nlEVrODE7W6iBFRVPZL/Desafio-para-devs---App-%2F-Dashboard-%7C-UX%2FUI?type=design&node-id=19-1283&mode=design&t=1oLA9vtlXknWRtig-4) to follow the style guide and components in your interfaces.
+
+![Statement](images/Statement-Mobile.png)
+
+### Pagination:
+
+The route should receive two parameters, `limit` and `offset`, the `limit` parameter will be the number of statements to be returned and the `offset` parameter will be the number of statements to be skipped. 
+
+**GET:** `/statements/{limit}/{offset}`
+
+### Response:
+
+- After successfully processing the input data and CHECK the auth information, the endpoint should return a status code of 200 OK. With JSON Statement list:
+
+```json
+[
+  {
+    "type": "Deposit",
+    "amount": "15000.00",
+    "description": "Payment from Freela",
+    "from_user": "John Doe",
+    "authentication": "45d064afbd6cf24613daed52133320b84ece0e2cc751995a4d0b94fca84823dd",
+    "id": 1,
+    "created_at": "2023-09-21T18:46:45.478966",
+    "to_user": "John Doe",
+    "bank_name": "Adams LLC"
+  },
+  {
+    "type": "Deposit",
+    "amount": "88.81",
+    "description": "Trip authority window myself hour.",
+    "from_user": "Holly Bailey",
+    "authentication": "0ef6dc8284c7908ce7af354b10b6f354ff355a201f8f54e22bd60d928a6670c8",
+    "id": 2,
+    "created_at": "2020-09-07T00:00:00",
+    "to_user": "Caitlin Bennett",
+    "bank_name": "Williams-Norris"
+  }, ....
+]
+```
+
+## Validations:
+
+- The Route is authenticated, so it is necessary to send the token, otherwise the user will receive a 401 unauthorized status code, with the following message:
+
+```json
+{
+  "detail": "Not authenticated"
+}
+```
+
+### Bonus:
+
+- Unit Testing: As an added advantage, we'd be highly impressed if you can integrate unit tests for the designed interface. It will provide us with a clear understanding of your proficiency in ensuring the robustness and reliability of your implementations.
+
+## Final Considerations:
+
+- Your user interface should not only be functional but also intuitive and user-friendly.
+- The design should take into account both aesthetics and usability.
+- Be sure to write a good README guiding how to run your project, dependencies and what you think is necessary to install and run the project.
+
+Challenges like this offer a unique opportunity to showcase your skills. We wish you the best and eagerly await your innovative solution!
+
+
+### Bonus:
+
+- Unit Testing: As an added advantage, we'd be highly impressed if you can integrate unit tests for the designed interface. It will provide us with a clear understanding of your proficiency in ensuring the robustness and reliability of your implementations.
+
+## Final Considerations:
+
+- Your user interface should not only be functional but also intuitive and user-friendly.
+- The design should take into account both aesthetics and usability.
+- Be sure to write a good README guiding how to run your project, dependencies and what you think is necessary to install and run the project.
+
+Challenges like this offer a unique opportunity to showcase your skills. We wish you the best and eagerly await your innovative solution!