lyanna666 / proyecto-final-ga

Tea Ayudo

Final Project General Assembly

For this project, we have drawn on our own personal experience. We have developed a website in which a user can use pictograms to communicate with other users.

We also give you the option to register and have more advanced functions or, alternatively, to log in as a guest and use your local machine.

Live Demo

• teayuda.netlify.app

UI Wireframe Design

For the design we have based ourselves on a template from the site Sketch app Sources, specifically Online Tutoring Website Concept.

• Home
• Login
• Dashboard
• Details

Deployment with Netlify

For deployment we use Netlify, offering hosting and serverless backend services for web applications and static websites.

To get started with manual deploys

  netlify deploy

To do a production deploy

  netlify deploy --prod

Run Locally

Clone the project

  git clone https://github.com/Lyanna666/proyecto-final-GA

Go to the project directory

  cd Pictogramas

Install dependencies

  npm install

Start the server

  npm run start

Tree Directory

    ├───api
    ├───components
    │   ├───aside
    │   ├───elements
    │   ├───Error
    │   ├───Favorites
    │   ├───Footer
    │   ├───Header
    │   ├───HeaderMenu
    │   ├───Home
    │   ├───loading
    │   ├───pagination
    │   ├───Pictograms
    │   └───table
    ├───Constants
    ├───pages
    ├───styles
    └───Utils

API Reference

Get all items

  GET /api/items

  https://api.arasaac.org/api/pictograms

Parameter	Type
api_key	string

Code

• Constants with the different URL we are going to use.

const urlGlobal = 'https://api.arasaac.org/api/pictograms';
const urlAll = '/all/';
const urlBest = '/bestsearch/';
const urlSearch = '/search/';

• Request with asynchronous function and fetch.

export async function fetchAllPictograms(language) {
  try {
    const response = await fetch(urlGlobal + urlAll + language, {
      method: 'GET',
    });
    const pictograms = await response.json();
    return pictograms;
  } catch (error) {
    console.error({ error });
    return error;
    // alert('Ha ocurrido un error:', error);
  }
}

• Example of error when request fails

  

Framework

• react-router-dom
• styled-components
• react-test-renderer

Authors

• @jacobo87
• @Lyanna666