Rexona Products 🚀

🚀 Project created in carrying out a skill test with web development

English · Portuguese

• 📌 Table of Contents
  • Web Screenshot
  • Mobile Screenshot
• 👀 Demo Website
• 💻 Technologies
• 🚀 Features
• 👷 How to run
  • 📦 Run API
  • 💻 Run Web Project
• 🐛 Issues
• 🎉 Contributing
  • 🤝 Contributing
• 📕 License

Products are displayed on cards next to each other in a responsive way and can be filtered through their categories.

The error screen was created, so that the user can have a better experience if there is an error on the pages (such as a route that does not exist), a small animation was placed in the central icon.

A modal with more item details was created. Clicking on the item's thistle opens the modal and can be closed by clicking outside the modal, clicking on the "close" button ( X ) and also pressing esc on your keyboard

You can acess the website at:
👉 demo:

This project was made using the follow technologies:

• Typescript
• Axios
• Prettier
• React
• Styled-Components
• Json-server
• Reactstrap

• Product listing.
• Filtering products by their category.
• Responsive layout.

# Clone Repository
$ git clone https://github.com/Gilles30/products-rexona.git

# Go to server folder
$ cd products-rexona

# Install Dependencies
$ yarn install or $ yarn

# Run Server
$ yarn server

Access API at http://localhost:3000/data

# Go to web folder
$ cd products-rexona

# Install Dependencies (Only if you haven't installed the dependencies before)
$ yarn

# Run Aplication (If the access port is busy and the question appears if you want to change the port, type Y, so that it runs on a secondary port)
$ yarn start

Go to http://localhost:3001/ to see the result.

Feel free to file a new issue with a respective title and description on the the Proffy repository. If you already found a solution to your problem, i would love to review your pull request!

Check out the contributing page to see the best places to file issues, start discussions and begin contributing.

Follow the steps below to contribute:

1. fork the project (https://github.com/Gilles30/products-rexona)

2. Clone your fork to your machine (git clone https://github.com/Gilles30/products-rexona.git)

3. Create a branch to carry out your modification (git checkout -b feature/name_new_feature)

4. Add your modifications and do the commit (git commit -m "Descreva sua modificação")

5. Push (git push origin feature/name_new_feature)

6. Create a new Pull Request

7. Okay, now just wait for the analysis 🚀

Released in 2022 📕 License

Made with love by Lorison Gilles 🚀. This project is under the MIT license.

Give a ⭐️ if this project helped you!