TailoMateus/coding_challenge_search_ui

Search UI coding challenge

Summary

• About
• Technologies used
• Folder structure
• Architecture
• Installation for development
• UI
• General information

---

🔖 About

Search UI coding challenge. Small application demonstrating my abilities in React and TypeScript. This challenge is targeted towards mid to senior level engineers.

Challenge repository is on GitHub

---

🛠 Technologies used

The project was developed using the following technologies

• React
• TypeScript
• React Testing Library
• Styled Components
• Storybook
• Axios

---

🗂 Folder structure

src
  components/*
  constants/*
  helpers/*
  hooks/*
  screens/*
  services/*
  styles/*
  types/*

---

🏢 Architecture

Click here for more information about the flowchart

---

🗂 Installation for development

• Install package.json dependencies using npm: npm install

• Run server at url: http://localhost:3000 npm start

• Run project tests: npm test

• Run storybook documentation: npm storybook

---

🚀 UI

---

❗ General information

• No 'Access-Control-Allow-Origin' header is present on the requested resource error to access the API locally

Solved it adding headers in the server file:

app.use(function(_, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); });