wtakayama-chwy / beyoung-react

A simple responsive application created using React and Styled Components, consuming a simple API

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Beyoung Challenge

Logo

Beyoung - React

Made with React License

🚩 What is it?

Create a responsive single page application using React (library), consuming webservices (GET) provided on a simple API using HTTP-SERVER and filtering data for each user. It was developed using React Hooks to create components, Styled Components on styles, API services using Fetch method, React icons for icons, React switch and ThemeProvider for theming dark and light mode, React spinners to create a loader and React INTL to display currency data correctly.

πŸ“± Demo on Mobile:

demo-mobile

πŸ’» Demo on Desktop:

demo-desktop

πŸŽ† Developing Tools:

  • React v.16.13.1 with React Hooks (Frontend)
  • Lint
  • Styled Components for styling and Create Global Style, Theme Provider and Styled Theming
  • React Icons for icons
  • React INTL for currency data
  • React switch to toggle dark and light mode
  • React routes to manage routes
  • VSCode (Editor)
  • HTTP-SERVER to fetch data
  • Insonmia to test get requests
  • Firefox Devtools

πŸš€ Goal:

Create a responsive single page application using React (library), consuming webservices (GET) that are available in API folder

πŸ“ˆ What I've learned or improved on my knowledge:

  • Handle Error using .then and .catch and ternary operators to render components condiotinally
  • Using React hooks with callbacks to avoid lint warnings
  • Styled Components with Theme Provider and react-switch to manage dark and light mode in a simple way
  • INTL to manage currency data and display it correctly
  • Manage props in a better way without using REDUX
  • useContext to create a personal Theme Provider

🐾 How to clone or run?

  • Download the zip or clone using github
  • There's a API folder and a frontend folder
  • In the main folder run in your command line npm run dev

🀘 Contributions

Pull requests are always welcomed. For major alterations please think about openning an issue first. Any improvments advices would be great, don't hesitate on contacting me πŸ˜„

License

  • Project 100% solo - concluded in 3 days.
  • MIT License - Copyright (c) 2020 william-takayama

About

A simple responsive application created using React and Styled Components, consuming a simple API

License:MIT License


Languages

Language:JavaScript 97.9%Language:HTML 2.1%