I created this website as a project for my Front-End Web Development Nanodegree from Udacity. This website allows the user to keep track of books that have been read, are currently being read, or that he or she would like to read.
These instructions will allow you to get a copy of the project that runs on your local machine.
Instructions to clone and run the project:
- In Terminal, clone the git project using
$ git clone https://github.com/kirollosatef/my-read-app. - Navigate to the root directory for the project.
- Run the command
npm installto install the necessary dependancies - Run the command
npm startto start the server. This will automatically open the website in your browser.
- React - Text Editor
- Create React App - React scaffolding package
- React Router - Declarative routing for React
- vscode - Text Editor
- JavaScript ES6 - Programming Language
- HTML5 - Markup Language
- CSS3 - Styling
- Google Chrome - Browser and Debugging Tool
I began by scaffolding out the app using Create React App. Then I downloaded Udacity's BooksAPI.js, which allows me to retrieve data from a mock server. I wrote the code that fetches the array of books from the Udacity server, then maps over the array to display each book on the appropriate shelf according to its 'shelf' key. Each book has a 'select' tag that allows for switching shelves, or removing the book altogether. Once I got this functionality working, I added a component to search for books to add to the shelf. This component dynamically searches the server for books whose titles match the inputted query as it is entered. I used React Router to sync the URL with the app's state so that the back button and bookmark browser features still work.