Simple web application that shows a phone catalog with the information about different phones . User can view more deatailed info about the phone.
- Node Api Route
- React
- Redux (managing fetch data from api)
- Styled Components
- Npm
- Web server with Node (Express)
- Node js
- Webpack
I decided to use create-react-app js application using a simple configuration.
I separate in single components to achieve the main purpose of the web.There is a main component which manages the communication with the api data model using Reudx.
I included more visual elements than the basic interface to make it similar to a real app, even not being functional any button or link apart from catalog(button and link).
For styling I used styled components to style the web.
I set a proxy field to in package.json to tell the development server to proxy any unknown requests to the API server in development.
This project was bootstrapped with Create React App.
Web is divided in two main parts (each of them is a link in the header navbar):
- Home
- Phones
- In the project root directory, run:
- In the project root directory, run:
- In the project root directory, run:
Runs the app in the development mode.
In the project root directory, you can run:
This will run both server and client:
- Open http://localhost:3000 to view the client app in the browser.
- Open http://localhost:5000/phones to view the node api route
The page will reload if you make edits.
You will also see any lint errors in the console.
- docker and docker-compose are necesary. https://docs.docker.com/install/
- node and npm are not necessary.
In the project directory, you can run:
- Open http://localhost:3000 to view the client app in the browser.
- Open http://localhost:5000/phones to view the node api route
Some simple unit test can be tested with jest and enzyme.
In the project root directory, you can run: