The main emphasis of Read Aloud App Tracker is to help educators of lower elementry grades to create and save a list of books that are intended to be read aloud during the school year and/or quarter. The book list can be viewd by author and books can be added or deleted from the list.
Since this project focused mainly on creating a Ruby/Sinatra backend. I have included back-end validations from Active record.
The Entity Relationship Diagram (ERD) of the data base:
Authors Books
____________________________
id id
name title
summary
author_id
My ERD consist of two models (author and book) with the a has_ many relationship in the author model and a belong_to in the book model. The author_id serves as a foreign key that identifies the name of the author each book does belong to.
- Build a web basic API with Sinatra and Active Record to support a React frontend
Congrats on getting through all the material for Phase 3! Now's the time to put it all together and build something from scratch to reinforce what you know and expand your horizons.
The focus of this project is building a Sinatra API backend that uses Active Record to access and persist data in a database, which will be used by a separate React frontend that interacts with the database via the API.
For this project, you must:
- Use Active Record to interact with a database.
- Have a minimum of two models with a one-to-many relationship.
- Create API routes in Sinatra that handles at least three different CRUD actions for at least one of your Active Record models.
- Build a separate React frontend application that interacts with the API to perform CRUD actions.
- Use good OO design patterns. You should have separate classes for each of your models, and create instance and class methods as necessary.
For example, build a todo list application with a React frontend interface and a Sinatra backend API, where a user can:
- Create a new todo
- Read a list of all todos
- Update an individual todo
- Delete a todo
A Todo
can be tagged with a Category
, so that each todo belongs to a
category and each category has many todos.
This repository has all the starter code needed to get a Sinatra backend up and
running. Fork and clone this repository to get started. Then, run
bundle install
to install the gems.
The app/controllers/application_controller.rb
file has an example GET route
handler. Replace this route with routes for your project.
You can start your server with:
$ bundle exec rake server
This will run your server on port http://localhost:9292.
Your backend and your frontend should be in two different repositories.
Create a new repository in a separate folder with a React app for your
frontend. cd
out of the backend project directory, and use
create-react-app to generate the necessary code for your React frontend:
$ npx create-react-app my-app-frontend
After creating the project locally, you should also create a repository on GitHub to host your repo and help collaborate, if you're working with a partner.
Your React app should make fetch requests to your Sinatra backend! Here's an example:
fetch("http://localhost:9292/test")
.then((r) => r.json())
.then((data) => console.log(data));
- This project is intended to focus more on the backend than the frontend, so try and keep the React side of things relatively simple. Focus on working with Active Record and performing CRUD actions. What are some interesting queries you can write? What kinds of questions can you ask of your data?
- Once you have a project idea, come up with a domain model and decide what relationships exist between the models in your application. Use a tool like dbdiagram.io to help visualize your models.
- Decide on your API endpoints. What data should they return? What kind of CRUD action should they perform? What data do they need from the client?
- Use Postman to test your endpoints.
- Use
binding.pry
to debug your requests on the server. It's very helpful to use abinding.pry
in your controller within a route to see whatparams
are being sent. - Use the Network Tab in the Dev Tools in the frontend to debug your requests.