Skip to content

Udacity Project - React Framework, Class and Functional Components, State Management

Notifications You must be signed in to change notification settings

nidhigaday/My-Reads

Repository files navigation

MyReads Project

This is the final assessment project for Udacity's React Fundamentals course. A static example of the CSS and HTML markup was provided and was used to write React code that was needed to complete the project. Progressively, added interactivity to the app by refactoring the static code.

My reads App

Getting Started

  • Download this repo
  • Install all project dependencies with npm install
  • Start the development server with npm start

Folders details

├── CONTRIBUTING.md
├── README.md - This file.
├── SEARCH_TERMS.md # The whitelisted short collection of available search terms.
├── package.json # npm package manager file.
├── public # icons and images
└── src
    ├── App.css # Styles for the app.
    ├── App.js # Root of the app.
    ├── App.test.js # Used for testing.
    ├── BooksAPI.js # A JavaScript API for the provided Udacity backend.
    ├── Bookshelves.js # JS file for the component to render each shelf items.
    ├── ListBooks.js # JS file for the component to render all components on the page.
    ├── SearchBooks.js # JS file for the component to render Seacrh books page.
    ├── icons # Helpful images for the app.
    ├── index.css # Global styles.
    └── index.js # Used for DOM rendering.

Highlights:

  • Created a new JS file for each component; following DOT (Do One Thing).
  • Component state is passed down from parent to child component. SetState() is used to modify the state of the component.

Backend Server

The provided file BooksAPI.js contains following methods to perform necessary operations on the backend:

  • getAll To get all the books from the API
  • update Update shelf information of the book
  • search Search book in the database

Completed Tasks:

  • GetAll books from API
    ├── Leveraged (#getall) in the component lifecycle - componentDidMount()
    └── Used SetState() to render books in the UI
    
  • Able to move books between the shelves
    ├── Leveraged (#update) in the component to update shelf value of the book in the backend 
    ├── Re-rendered UI with updated state by using setState
    └── Component state is passed from Parent to Child component using Props
    
  • Keep UI and URL in sync
    └── Leveraged <BrowserRouter /> from react-router-dom to render the UI based on its URL instead of the state 
    
  • Able to Search and add books
    └── Leveraged top-bottom approach by passing updated state of the Parent to Child component
    
  • Book shelf or state should reflect on both Search and Main page
    └── Used ES6 concat function to sustain state of the existing books under Search page
    
  • Added a Error 404: Page not found for invalid URL
    └── Used Switch from react-router-dom to switch between the URLs and render No page found error if does not match with any valid URLs
    

Resources & Dependencies

About

Udacity Project - React Framework, Class and Functional Components, State Management

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published