Gilles30/sure-rexona

App created for presentation and portfolio, consuming api-sure API.

Rexona Products 🚀

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

English · Portuguese

_{The Products Rexona. Built with ❤︎ by Lorison Gilles and contributors}

📌 Table of Contents

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

Web Screenshot

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

Mobile Screenshot

👀 Demo Website

You can acess the website at:
👉 demo:

💻 Technologies

This project was made using the follow technologies:

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

🚀 Features

• Product listing.
• Filtering products by their category.
• Responsive layout.
• API created and deployed

👷 How to run

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

📦 Run API

• API API consumed directly from the cloud!

# Routes and Endpoint
$ api-sure.herokuapp.com/data

# Object Typing
$ Data:{
  nodes
    {
      name: string,
      shortDescription: string
      id: string
      images:
        [
          {
            alt: string
            src: string
          }
        ]
      category:
        [
          name: string
          id: string
        ]
    }
  }

Access API at http://api-sure.herokuapp.com/data Link repo Github: https://github.com/Gilles30/api-sure

💻 Run Web Project

# Go to web folder
$ cd sure-rexona

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

# Run Aplication
$ yarn start

Go to http://localhost:3000

🐛 Issues

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!

🎉 Contributing

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

🤝 Contributing

Follow the steps below to contribute:

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

2. Clone your fork to your machine (git clone https://github.com/Gilles30/sure-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 🚀

📕 License

Released in 2022 📕 License

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

Give a ⭐️ if this project helped you!