/ReactNative_Portfolio

"Mobile applications built with React Native to showcase my skills. I hope you enjoy exploring each project."

React Native Portfolio πŸ“²

πŸ€

pick

Hello! πŸ‘‹πŸΎ Thank you for visiting my GitHub repository! Here, you will find my latest React Native projects. I am committed to continuously improving my development skills, with a strong focus on design. As a Mobile Developer, I am currently seeking remote or relocation opportunities. If you believe I could be a valuable addition to your team, please don't hesitate to get in touch! I would be delighted to connect with you.

Projects πŸ“²

Gota de Vida πŸ€

Gota de Vida is an application designed to efficiently connect people in need of blood donations with willing donors. Our goal is to facilitate this process by creating a network of support and generosity.

pick

Key Features πŸ’»

- User Registration: Users can create an account in the application by providing basic information such as name, email address, and password. Once registered, they will have the ability to add relevant information to their user profile.
  • Request Posts: Users can create posts requesting blood, specifying the required blood type, the quantity needed, and the location where the donation is needed.
  • User Interaction: Users can access a feed of posts where they will see blood requests made by other users, with the ability to interact with these posts by expressing their availability to donate or leaving their support.
  • Donation Information: The application provides access to relevant information about the importance of blood donation, the requirements to be a donor, and the benefits of doing it regularly.
  • Hospital Viewing: Users have access to a map with nearby hospitals where they can donate blood or receive medical attention related to donation.
  • Donor Registration: Users interested in becoming donors can register in the application, providing additional information such as blood type and availability to donate.

Technologies

  • React Native πŸ’»
  • Context πŸ”Œ
  • AWS πŸ€
  • Async Storage πŸ”‘
  • Clean Architecture πŸ”¨
  • Optimized for iOS and Android πŸ“± -Dark & Light Mode πŸ‘

Technical Test - Cocktails App πŸ“²

Key Features πŸ’»

Login: The application features a login simulation that allows you to access all its functionalities. You can use the following credentials to log in:

Username: juan.challenge@gmail.com

Password: juan123456!

This login simulation is provided solely for demonstration and testing purposes.

Recipe Exploration: You will be able to visualize a series of cocktail recipes available in the application.

Search Filters: You will have the option to select different filters to find specific recipes according to your preferences. You can search for recipes by name, ingredients, category, or even explore random recipes.

Recipe Search: The application includes a search function that allows you to find specific cocktail recipes using an integrated search bar. This feature enhances the user experience by enabling faster and more precise navigation.

Recent Searches Record: The application automatically saves the cocktail recipes you have recently searched for, allowing you to quickly access them from the search history.


pick pick

Technologies

  • React Native πŸ’»
  • Async Storage πŸ”‘
  • Clean Architecture πŸ”¨
  • Styled Components
  • Optimized for iOS and Android πŸ“± -Dark & Light Mode πŸ‘

Login - Logout

In this project, I developed a login system designed to ensure secure authentication of users and maintain their active sessions, even after logging out. This system provides each user with a unique token that is automatically generated and securely stored in AsyncStorage. If you are not a user, you can register and log in to use the application. Users are stored in a MongoDB-backed database, and the application runs online.

The application design is fully responsive, meaning it adapts to any mobile device size. Additionally, I incorporated LottieFiles animations to enhance the visual experience of the application.

I continue to work on optimizing the project, constantly seeking ways to improve its performance and functionality. πŸ’₯

pick

Technologies

  • React Native πŸ’»
  • Context πŸ”Œ
  • Mongo Db πŸ€
  • Async Storage πŸ”‘
  • Clean Architecture πŸ”¨
  • Optimized for iOS and Android πŸ“±

Movie App

🎬 I had a great time creating this application, and I also gained extensive knowledge about movies! Here, you can explore the latest cinema releases in real-time, as the information is sourced from an up-to-date API. Additionally, you can stay informed about the top-rated, most acclaimed, and popular movies. I have also included a detailed movie session where you can find all the relevant information you need. Feel free to check it out!

pick1

Technologies

  • React Native πŸ’»
  • Context πŸ”Œ
  • Clean Architecture πŸ”¨
  • Optimized for iOS and Android πŸ“±

Finance App

πŸ””

This project was very significant to me as it was part of my experience during an internship organized by the leading developers at Mercury LLC. The application focuses on the finance domain and was developed using the Ignite development template. The application features a series of cards that compose a carousel and display detailed information as required. Each time a scroll is made, an expense related to that card is shown with a custom style. One of the main challenges of this project was implementing a smooth and fluid carousel with seamless transitions. Additionally, custom components were developed to display the expenses associated with each card, utilizing unique styles that seamlessly integrate with the overall design of the application. Furthermore, a functionality was implemented to visualize all expenses made across all cards, providing users with an overview of their finances.

This project allowed me to acquire fundamental skills in mobile application development and enhance my knowledge of React Native. Additionally, I learned to work as part of a team, collaborating with other developers and following industry best practices. πŸ’°

pick1

Technologies

  • React Native πŸ’»
  • Ignite πŸ”Œ
  • Dark & Light Mode πŸ‘
  • Clean Architecture πŸ”¨
  • Navigation πŸ—ΊοΈ
  • Optimized for iOS and Android πŸ“±

Country Design 🌍


pick

On this occasion, I developed a simple screen using React Native and integrated several functionalities to enhance practices. πŸ’» I focused on incorporating the following features: 🎠 Image Carousel with pagination. πŸ“œ Flatlist. ⚑️ Alert Component. 🎨 Icons and Typography Changes: To add a visual and stylish touch to my screen. ⚑️ LottieFiles Animations. πŸŒ— Dark and Light Mode: I implemented a system to switch between dark and light modes using React Native hooks such as useContext and useReducer. This allows users to personalize their experience based on their viewing preferences. πŸ—Ί Map Integration: I also worked on integrating a map that displays the general location. Although I am still working on its functionalities, I am excited about its potential to enhance the interactivity of the screen.

Technologies

  • React Native πŸ’»
  • ExpoπŸ”Œ
  • Clean Architecture πŸ”¨
  • Navigation πŸ—ΊοΈ
  • Optimized for iOS and Android πŸ“±

Product Category Management and Image Upload - Interactive BackEnd πŸ“±


pick

⚑️ In my latest project, I focused on honing my skills in interactions with the BackEnd. Building upon the success of my previous login project, where I achieved user creation and active session management, I've taken a leap forward by developing a comprehensive system. This system enables not only the viewing of all existing product categories but also the direct creation of new categories within the application, along with the ability to modify the ones already present.

Highlighted Features:

-Category Exploration. -Creation of New Categories. -Modification of Existing Categories. -Image Upload. -Image Viewing.

Technologies

  • React Native πŸ’»
  • Context πŸ”Œ
  • Mongo Db πŸ€
  • Async Storage πŸ”‘
  • Clean Architecture πŸ”¨
  • Optimized for iOS and Android πŸ“±

Navigation and State Management in React Native πŸ“±


pick

⚑️ This is a simple React Native application project that integrates different types of navigation, including tab navigation, bar navigation, and stack navigation. Additionally, Redux Toolkit is used for managing the global state of the application.

Features

  • Tab Navigation: Allows users to switch between different sections of the application easily.
  • Bar Navigation: Provides a navigation bar at the top of the application to access different sections.
  • Stack Navigation: Allows users to navigate between screens sequentially, maintaining a navigation history.
  • State Management with Redux Toolkit: Utilizes Redux Toolkit to efficiently and scalably manage the global state of the application.

Technologies

  • React Native πŸ’»
  • Redux Toolkit
  • Clean Architecture πŸ”¨
  • Optimized for iOS and Android πŸ“±

Navigation and Authentication


pick

⚑️ Strengthening my skills in navigation with Stack, Tab, and Drawer in React Native. I implemented a robust authentication flow, utilizing AsyncStorage to securely store tokens. Additionally, I integrated Redux Toolkit for efficient state management.

Highlighted Features:

Advanced navigation using Stack, Tab, and Drawer Navigator. Robust and secure authentication flow. Efficient use of AsyncStorage for token persistence. Implementation of Redux Toolkit for efficient state management.

Technologies

  • React Native πŸ’»
  • Redux Toolkit
  • Async Storage πŸ”‘
  • Clean Architecture πŸ”¨
  • Optimized for iOS and Android πŸ“±