https://github.com/ecureuill/adopet-app
Project developed for Alura Forth Front-End Challenge
https://github.com/ecureuill/adopet-app
alura-challenge alura-challenges alurachallenge axios fluid-design react react-query react-responsive react-router-dom responsive-design testing-library typescript
Last synced: 10 days ago
JSON representation
Project developed for Alura Forth Front-End Challenge
- Host: GitHub
- URL: https://github.com/ecureuill/adopet-app
- Owner: ecureuill
- Created: 2023-06-08T02:39:04.000Z (almost 3 years ago)
- Default Branch: develop
- Last Pushed: 2023-08-30T06:53:38.000Z (almost 3 years ago)
- Last Synced: 2025-12-27T12:21:32.038Z (5 months ago)
- Topics: alura-challenge, alura-challenges, alurachallenge, axios, fluid-design, react, react-query, react-responsive, react-router-dom, responsive-design, testing-library, typescript
- Language: TypeScript
- Homepage: https://ecureuill.github.io/adopet-app/
- Size: 14.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
[](https://www.alura.com.br/challenges)
4-week challenge to develop the version of the adopter user's screens for the AdoPet website, which will have a login page, registration, list of pets and message form. This is a project focused on responsive layout, being recommended the mobile first approach.
-------------------------
| :placard: Vitrine.Dev | |
| ------------- | --- |
| :sparkles: Nome | **Adopet**
| :label: Tecnologias | React, TypeScript, React-Router-Dom, React-Query, React-Responsive, Axios, Testing-Library
| :rocket: URL | https://ecureuill.github.io/adopet-app/
| :fire: Desafio | [Figma](https://www.figma.com/file/TlfkDoIu8uyjZNla1T8TpH/Challenge---Adopet)
## Table of Content
- [About](#about)
- [Project Details](#project-details)
- [Technologies Used](#technologies-used)
- [Layout and Responsiveness](#layout-and-responsiveness)
- [Live demo](#live-demo)
- [Feedback and Contribution](#feedback-and-contributions)
- [Screenshots](#screenshots)
## About
Adopet App is the result of the Alura Front-end Challenge, developed based on the provided [Figma design](https://www.figma.com/file/TlfkDoIu8uyjZNla1T8TpH/Challenge---Adopet). The project showcases the skills and knowledge acquired during the challenge.
## Project Details
The server-side of the Adopet App is developed in Node.js and can be found in a separate repository at [Adopet API ](https://github.com/ecureuill/adopet).
## Technologies Used
The project is built using the following technologies:
- React
- TypeScript
- React-Router-Dom
- React-Query
- React-Responsive
- Axios
- Testing-Library
I tried to well-structured and organize the project. The css architecture was based on ITCSS.
The use of TypeScript enhances code readability and promotes type safety.
The adoption of React-Query helps optimize data fetching and management, resulting in faster loading times and improved performance. The use of Axios for API communication ensures efficient handling of asynchronous requests.
## Layout and Responsiveness
The Adopet App boasts a beautifully designed and responsive layout. It has been thoughtfully crafted with a mobile-first approach, ensuring seamless user experience across various devices, from desktops to tablets and smartphones.
The design is fluid, allowing it to adapt gracefully to different screen sizes and resolutions, providing an optimal viewing experience to users. The use of vanilla CSS ensures a lightweight and efficient rendering of styles, contributing to faster loading times and smoother interactions.
For the responsive layout, I decided to experiment with fluid design, instead of fixed breakpoints. And when a component should only render in specifics screen width, I used [react-responsive](https://github.com/yocontra/react-responsive) hooks to determine the condition.
## Live demo
For demo purpose, a version with mock data was published [here](https://ecureuill.github.io/adopet-app/).
You can log in with email `tutor@mail.com` and password `123aSd7`. It will automatically logout after 1 minute.
Is possible to edit user profile data, except for the photo (you can select one from your device, but it will not be rendered).
You can mimic create a new user and sent message to a shelter.
## Running Locally
To run the Adopet App locally, follow these steps:
1. Clone this repository: `git clone https://github.com/ecureuill/adopet-app.git`
1. Install the dependencies: `npm install`
1. Start the development server: `npm start`
1. Follow instructions on how to run locally the server-side in the separete repository [here](https://github.com/ecureuill/adopet)
1. Access the app in your web browser at: http://localhost:3000
## Feedback and Contributions
Feedback and contributions are always welcome! If you have any suggestions or find any issues in the project, feel free to create an issue or submit a pull request.
## Screenshots
Screenshots have been provided to demonstrate functionalities and responsiveness of the layout.
#### Mobile
##### Non authenticated user
##### Authenticated user
#### Tablet (width 768)
##### Non authenticated user
##### Authenticated user
#### Desktop (width 1440)
##### Non authenticated user
##### Authenticated user
