This is a Complete Front-End Web Development Project that combines the best mainstream technologies used in Web Development at the moment.
- JavaScript
- HTML
- CSS
- Node.js
- Node Packet Manager (npm)
- React
- React-Router
- Responsive Web Design
- Use of Javascript API
The App is Responsive and looks great in mobile devices such as tablets and telephones.
CHARACTERISTICS OF THE APPLICATION
The application consists of an interactive Bookshelf in which the user can interact with the app and classify their books according to three categories:
- Currently reading.
- Want to read.
- Read.
The user can interact with the app, using the Move to ... button which allows the user to send the books to different shelves.
When the user selects the None option, the selected book disappears from all the shelves.
On the initial screen, the initial state of the Shelf can be seen.
When the user presses the button with the + symbol, he is sent to the search page which has a box with the message "Search by Subject". In this box the user can search for books, using the key words shown on the screen.
The system recognizes the initial letter of each keyword and begins to show results when the initial letter is typed.
The system is configured to give 20 search results each time a search is performed.
Each book on this search page is equipped with a button, which when pressed shows the current status of the book, i.e. the shelf it is on.
From this screen you can add books to the shelf page.
BACKEND:
The application uses a Server API and a Client LIbrary, used to search information as the user interacts with the appl. The name of this JavaScript API is BookAPI. js
The backend server contains the necessary methods to perform operations on the backend.
METHODS:
#getAll. #update. #search.
INSTRUCTIONS
-
Clone de respository folder.
-
Unzip the repository folder with the option "Extract here" in the directory of your choice. (Unzip with the option "Extract here" will prevent the creation of a double directory that prevents the application from launching when using the runtime environment Node.js.
-
Inside of the unziped directory with the repository, you will find two ziped folders called public.rar and src.rar. Unzip the both directories with the option "Extract here".
-
Open cmd and navigate using the command cd to the directory with the repository.
- type the following commands to install and start the app: - npm install - npm start
After this step you are going to see a screen like this on cmd:
- Open your web browser and type the next address to see the App: http://localhost:3000/
