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.
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | Adopet |
| 🏷️ Tecnologias | React, TypeScript, React-Router-Dom, React-Query, React-Responsive, Axios, Testing-Library |
| 🚀 URL | https://ecureuill.github.io/adopet-app/ |
| 🔥 Desafio | Figma |
- About
- Project Details
- Technologies Used
- Layout and Responsiveness
- Live demo
- Feedback and Contribution
- Screenshots
Adopet App is the result of the Alura Front-end Challenge, developed based on the provided Figma design. The project showcases the skills and knowledge acquired during the challenge.
The server-side of the Adopet App is developed in Node.js and can be found in a separate repository at Adopet API .
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.
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 hooks to determine the condition.
For demo purpose, a version with mock data was published here.
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.
To run the Adopet App locally, follow these steps:
- Clone this repository:
git clone https://github.com/ecureuill/adopet-app.git - Install the dependencies:
npm install - Start the development server:
npm start - Follow instructions on how to run locally the server-side in the separete repository here
- Access the app in your web browser at: http://localhost:3000
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 have been provided to demonstrate functionalities and responsiveness of the layout.
