https://github.com/cunhasbia/dragons-frontend

Dragons is a front end application developed with Reactjs that consumes data from Dragons API, and also consumes a login API for authentication to access the app.
https://github.com/cunhasbia/dragons-frontend

frontend javascript react redux sass

Last synced: 16 days ago
JSON representation

Dragons is a front end application developed with Reactjs that consumes data from Dragons API, and also consumes a login API for authentication to access the app.

• Host: GitHub
• URL: https://github.com/cunhasbia/dragons-frontend
• Owner: cunhasbia
• Created: 2021-05-13T17:28:52.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-05-19T23:04:31.000Z (over 3 years ago)
• Last Synced: 2024-07-31T19:39:49.224Z (3 months ago)
• Topics: frontend, javascript, react, redux, sass
• Language: JavaScript
• Homepage:
• Size: 820 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  
Dragons | Front end

  

  ![Javascript](https://img.shields.io/badge/-Javascript-black?style=flat-square&logo=javascript)

  ![React](https://img.shields.io/badge/-React-black?style=flat-square&logo=react)

  ![Redux](https://img.shields.io/badge/-Redux-black?style=flat-square&logo=redux)

  ![Sass](https://img.shields.io/badge/-Sass-black?style=flat-square&logo=sass)



**Dragons** is a front end application developed with Reactjs that consumes data from [Dragons API](http://5c4b2a47aa8ee500142b4887.mockapi.io/api/v1/dragon), and also consumes a [Login API](https://github.com/cunhasbia/dragons-login-auth-backend) (made by me with Nodejs) for authenticate a user registered in the database and then access the Dragons app.

Please, go to [dragons-login-auth-backend](https://github.com/cunhasbia/dragons-login-auth-backend), follow the steps and run both projects together.

## Credentials (email & password)

Use these credentials to log in the app:

- **Email**: [email protected]

- **Password**: admin123

## Application preview

### Login



### Homepage



 


## Functionalities

✔️ Login page with authentication


✔️ Homepage with the **dragons list** in alphabetic order


✔️ Page with **dragon details** (name, type, description, etc)


✔️ CRUD (create/read/update/delete a dragon)


✔️ Data validation


✔️ Responsiveness

## Technologies and tools used

- Javascript ES6+

- React

- Redux 

- SASS

- Sweet Alert

- React Icons

## How to run the project?

Before start, install [Git](https://git-scm.com), [Node.js](https://nodejs.org/en/) and [Yarn](https://classic.yarnpkg.com/en/docs/install/#windows-stable) on your machine. Moreover, recommend use the [VSCode](https://code.visualstudio.com/) terminal.

```bash

# Clone this repository

$ git clone https://github.com/cunhasbia/dragons-frontend.git

# Access the repository on your terminal

$ cd dragons-frontend

# Install dependencies

$ yarn

# Run the project

$ yarn start

# The app will be running on http://localhost:3000

```

Don't forget to use the [login API](https://github.com/cunhasbia/dragons-login-auth-backend) to be able to authenticate yourself in this app.

---

Made with :orange_heart: by Bianca Cunha | Find me on LinkedIn