PcX

<h2 align="center" dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-pcx-is-a-marketplace-for-buying-and-selling-used-hardware" class="anchor" aria-hidden="true" href="#pcx-is-a-marketplace-for-buying-and-selling-used-hardware"></a>Pcx is a marketplace for buying and selling used hardware!
</h2>

<h4 align="center" dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content---features---technologies--books-what-i-learn--how-to-run-the-project--️-authors" class="anchor" aria-hidden="true" href="#--features---technologies--books-what-i-learn--how-to-run-the-project--%EF%B8%8F-authors"></a><br /> <a rel="nofollow noopener" target="_blank" href="#-features">💻 Features</a> •<br /> <a rel="nofollow noopener" target="_blank" href="#-technologies-used">🛠 Technologies</a> •<br /> <a rel="nofollow noopener" target="_blank" href="#books-what-i-learn">📚 What I learn</a><br /> <a rel="nofollow noopener" target="_blank" href="#-how-to-run-the-project">🔨 How to run the project</a> •<br /> <a rel="nofollow noopener" target="_blank" href="#%EF%B8%8F-authors">✒️ Authors</a><br />
</h4>

<h2 align="center" dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-view-demo" class="anchor" aria-hidden="true" href="#view-demo"></a><br /> <a rel="nofollow noopener" target="_blank" href="https://pcx.lucasestevam.tech">View Demo</a><br />
</h2>

<h2 align="center" dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content--project-still-under-development" class="anchor" aria-hidden="true" href="#-project-still-under-development"></a>🚧 Project still under development
</h2>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content--features" class="anchor" aria-hidden="true" href="#-features"></a>💻 Features
</h2>

<p>
  Feature<br /> Coded?<br /> Description
</p>

<p>
  Home screen<br /> ❌<br /> &#8211;
</p>

<p>
  Header Component<br /> ✔<br /> Reusable header component.
</p>

<p>
  Sidebar Component<br /> ✔<br /> Reusable sidebar component.
</p>

<p>
  Input Component<br /> ✔<br /> Reusable input component with options for left and right icons, masks and custom labels.
</p>

<p>
  Signin screen<br /> ✔<br /> Signin screen with react hook form and yup for input validation.
</p>

<p>
  Recovery password screen<br /> ✔<br /> Recovery password screen with react hook form and yup for input validation.
</p>

<p>
  Signup screen<br /> ✔<br /> Signup screen with react hook form and yup for input validation.
</p>

<p>
  Modal Hook<br /> ✔<br /> Custom modal hook with &#8220;success&#8221; and &#8220;error&#8221; options.
</p>

<p>
  Middleware to private routes<br /> ✔<br /> Redirect to /login if logged out users try access private routes.
</p>

<p>
  Products list screen<br /> ❌<br /> &#8211;
</p>

<p>
  Filter Modal<br /> ❌<br /> &#8211;
</p>

<p>
  Product screen<br /> ❌<br /> &#8211;
</p>

<p>
  Favorites screen<br /> ❌<br /> &#8211;
</p>

<p>
  Checkout screen<br /> ❌<br /> &#8211;
</p>

<p>
  Create product screen<br /> ❌<br /> &#8211;
</p>

<p>
  Edit product screen<br /> ❌<br /> &#8211;
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content--technologies-used" class="anchor" aria-hidden="true" href="#-technologies-used"></a>🛠 Technologies Used
</h2>

<ul dir="auto">
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://reactjs.org/">React</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://www.typescriptlang.org/">TypeScript</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://nextjs.org">Next.js</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://chakra-ui.com">Chakra UI</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://react-icons.github.io/react-icons/">React Icons</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://react-hook-form.com">React Hook Form</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/yup">Yup</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://axios-http.com/docs/intro">Axios</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/nookies">Nookies</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://prettier.io">ESLint</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://eslint.org">Prettier</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://editorconfig.org">Editor Config</a>
  </li>
</ul>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-books-what-i-learn" class="anchor" aria-hidden="true" href="#books-what-i-learn"></a>📚 What I learn
</h2>

<ul class="contains-task-list">
  <li class="task-list-item">
    How validate and manipulate inputs with react hook form and yup.
  </li>
</ul>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content--how-to-run-the-project" class="anchor" aria-hidden="true" href="#-how-to-run-the-project"></a>🔨 How to run the project
</h2>

<p>
  For this project to work 100%, you will also need to run the back end, for that check this repository.<br /> In addition, you must configure the environment variables as described in the <code>.env.example</code> file.
</p>

<pre># Clone this repository

$ git clone https://github.com/tl-lucasestevam/pcx.git

Access the project folder #

$ cd pcx

Install the dependencies #

$ yarn

Run the application in development mode #

$ yarn dev

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-️-authors" class="anchor" aria-hidden="true" href="#%EF%B8%8F-authors"></a><strong>✒️ Authors</strong><br />
</h2>

<p>
  Lucas Estevam<br /> (Front-end)
</p>

<p>
  Heitor Franco<br /> (Back-end)
</p>