My Book Space

My Book Space is a React/Sinatra app that helps users log and track the books that they’ve been reading.

Our backend is a Sinatra API backend that uses Active Record to access and persist data in a database.

DEMO

Users will be able to:

• signup for a new account or login to an existing account
• see their dashboard once they are logged containing all their previous logs
• select a previous log to display more details and edit/update that log
• create a new log by adding title, author, star rating, and a comment
  • an image will automatically be fetched from the Google Book API for this book title
• delete a log
• log out when done

Technologies/Skills

• React.js
• Sinatra
• Active Record
• Object-Oriented Design
• Domain Modeling
• Material UI
• Debugging: Postman, binding.pry, Network Tab in the Dev Tools
• RESTful API endpoints
• Github
• 3rd Party API: Google Books

Goals

Our goal was to build a React/Sinatra application while simulating a professional work environment by:

• planning out our wireframes and features
• pitching our app in a project proposal
• using Git/Github for our source control system to track code changes and collaborate with team
• building a Sinatra API backend that uses Active Record to access and persist data in a database
• building a separate React frontend that interacts with the database via the API
• utilizing Material UI for our CSS styling

Accomplishments

• Use good OO design patterns (separate classes for each of our models & create instance and class methods as necessary)
• Use Active Record to interact with our database
• Have two models: User and Log
  • User can have many logs (“has_many” relationship)
  • A log belongs to a user (“belongs_to” relationship)
• Set up API routes in Sinatra that enabled us to:
  • create and read actions for both models
  • full CRUD capability for log model
• Build a separate React frontend application that interacts with the API to perform CRUD actions.
• Organized our code into purposeful components in order to keep it dry
• Incorporated a UI framework for our styling with Material UI
• Used Google Books API to make GET requests for a book's thumbnail URL (performed search by title)

Challenges/Future Improvements

• Validation/encryption for user signup/login:
  • challenge: checking new user’s inputs/keeping user’s data secure
  • future improvements: adding validations and encryptions to the signup/login components
    • using Rails for user validation: presence, uniqueness, format, length
    • using Rails for password validation: has_secure_password, minimum password standards
    • using bcrypt-ruby gem: allowing us to easily store a secure hash of your users' passwords
• Error handling for signup/login page:
  • challenge: empty fields for text inputs still allowed signup and login to proceed, incorrect password inputs
    • added “required” in all text fields (from MUI), added .error to fetch requests
• book image url from Google Books API:
  • future improvement: make requests more efficient
• A progress bar based on a goal set by user
• Using different route paths in Navigation:
  • challenge: deciding where to place each route in components
  • future improvement: utilizing each specific path and rendering with it’s given name

Avaliable Scripts

• Fork and clone our frontend repository onto your local environment:

  • In the project directory, install the dependencies by running: npm install
  • In the project directory, you can run: npm start
  • Runs the app in the development mode: open http://localhost:3000 to view it in your browser

• Fork and clone our backend repository onto your local environment:

  • Install the dependencies by running: bundle install
  • You can start your server with: bundle exec rake server
  • This will run your server on port http://localhost:9292. Check it out in the browser to make sure your server works!

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Creators

Connie Park Github Linkedin
Samantha Navarro Github Linkedin
Harrison Sabean Github Linkedin