https://github.com/thiagohrcosta/starwars-deck-api

This is a simple project to hold a API on backend and a frontend with React using Star Wars card game to display content to user.
https://github.com/thiagohrcosta/starwars-deck-api

bootstrap css html5 rails reactjs ruby

Last synced: 3 months ago
JSON representation

This is a simple project to hold a API on backend and a frontend with React using Star Wars card game to display content to user.

• Host: GitHub
• URL: https://github.com/thiagohrcosta/starwars-deck-api
• Owner: thiagohrcosta
• Created: 2021-06-21T21:30:02.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-07-31T15:21:18.000Z (almost 5 years ago)
• Last Synced: 2025-02-03T17:59:46.169Z (over 1 year ago)
• Topics: bootstrap, css, html5, rails, reactjs, ruby
• Language: Ruby
• Homepage:
• Size: 25.2 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

          

## Star Wars API

![Main](https://res.cloudinary.com/dloadb2bx/image/upload/v1627743154/starWarsAPI_qsngnd.png)

## Technologies

**Backend** 


  

**Frontend** 


    

### Gems used

- Devise;

- Pundit;

- Rack-cors

### React Features used

- useState;

- useEffect;

### React NPM packages

- Axios

### Versions

 - Ruby - 2.6.6

 - Rails - Rails 6.1.3.2

- PostgreSQL -  12.7

## Database

![UML](https://res.cloudinary.com/dloadb2bx/image/upload/v1627743876/starWarsbdwagon_xw8umn.png)

The final version on project was:

![enter image description here](https://res.cloudinary.com/dloadb2bx/image/upload/v1627743853/starWarsDB_srwkak.png)

## API endpoint

![API](https://res.cloudinary.com/dloadb2bx/image/upload/v1627743598/starWarsAPI_nc8i7a.gif)

The endpoint to get all cards from the API is `http:localhost:3000/api/v1/cards`.

## Getting data

![enter image description here](https://res.cloudinary.com/dloadb2bx/image/upload/v1627744447/swMain_xqnrkk.png)

To get data from the API was used a async function fetchData which code can be seen below:

    async function fetchData(){

      const response = await api.get("cards");

      setCards(response.data);

  }

## How to run this project?

First of all, you need to start de backend server that are running on Rails. To do that open the `backend-api` folder and type `rails s` on terminal. To start the frontend you need to open the starwars-client folder and type `yarn start`

**Backend**: running on port 3000 


**Frontend**: running on port 3001