Giter VIP home page Giter VIP logo

atomic's Introduction

Atomic

A content reader web application to aggregate all your blogs and news sources into one place.

Atomic demo

Todo

  1. Validación de un formulario en cliente. (1 punto) Formulario de registro

Esta validado en cliente y en servidor, por ejemplo en cliente no controlo que la contraseña tiene que ser mayor de 8 caracteres pero en el servidor si y esto aparece después de realizar la petición.

  1. Validación en servidor mediante ajax de un formulario de la aplicación.(1.5 puntos) Formulario de registro

Como he dicho anteriormente en servidor todos los datos son validados y si falla se devuelve una respuesta json con los mensajes de errores.

  1. CRUD mediante ajax en la aplicaición:

    1. Añadir(1 punto) Añadir una categoría
    2. Borrar(1.5 puntos) Borrar una categoría
    3. Editar(1 punto) Renombrar una categoría Añadir o eliminar fuentes de una categoría
    4. Mostrar(1 punto) Mostrar una categoría
  2. Realizar una búsqueda mediante ajax y que muestre los resultados. (1.5 puntos)

En mi caso hago un autocomplete al añadir una fuente de noticias, cuando abrimos el modal para añadir una fuente podemos escribir el nombre de la web y va a intentar encontrar una fuente ya añadida en la base de datos, si no hara una peticion a esa web. Por ejemplo podemos poner: thenextweb.com y si no existe dicha fuente en la base de datos recogerá la información y lo mostrará como único resultado. Para traer varios elementos podemos buscar con una "p" porque la p está en todas las urls, entonces nos traerá como máximo tres ocurrencias de la base de datos. Clickar en el resultado y añadir. Toda esta funcionalidad está contenida en el componente Source Add Modal

  1. Paginar los elementos mediante ajax.(1.5 puntos)

La paginación de servidor solo ocurre si estamos autenticados en la aplicación. El desarrollo de esta funcionalidad se encuentra en el archivo ajaxPaginator.js que se usa primariamente en la página home.js

Set up

  1. Descargar el proyecto
  2. npm install para instalar dependencias
  3. npm run dev para compilar los archivos
  4. npm run start para iniciar el servidor local
  5. Descargar el proyecto de servidor atomic-api (la url debe ser http://atomic-api.test, si no hay que cambiarlo en este proyecto en el archivo config.js líneas 20 y 21)
  6. Configurar las variables de entorno en .env
  7. composer install para instalar las dependencias del servidor (telescope necesita la extension php-bcmath)
  8. php artisan migrate para crear las tablas

Podría haber hecho un seeder pero en este contexto es un poco lioso, por tanto el proceso que yo sigo para testar la aplicación pasando por todos los puntos es:

Una vez haya cargado la aplicacion y sepas que el back funciona.

  1. Registrar un usuario en el boton de SignUp, una vez completado cerrar el modal y loguearse en el boton de Log In
  2. Añadir fuentes de noticias las que yo uso:
    1. thenextweb.com
    2. theverge.com
    3. omgubuntu.co.uk
    4. linuxhint.com
    5. wired.com
    6. engadget.com
  3. Momento perfecto para comprobar que el autocomplete funciona es volver haciendo click para añadir una fuente y escribir por ejemplo 'the' pues saldrian thenextweb y theverge
  4. Con esas fuentes tienes de sobra para realizar paginación (añadir las fuentes puede tardar hasta 30 segundos, paciencia, si dura mas de eso mira la consola y estaré suspenso XD)
  5. Recargar página y hacer scrolling para comprobar paginacion (puede tener abierta la pestaña de red para comprobarlo)
  6. CRUD
    1. Añadir una categoría en el sidebar (click en +, create)
    2. Entrar en la categoria (read)
    3. Renombrar la categoria haciendo click en el boton de la barra con tres puntos y boton 'Renombrar categoria'
    4. Lo mismo pero click en borrar

atomic's People

Contributors

luisadame avatar

atomic's Issues

Dont remove saved posts

When we remove a source the saved posts are also removed and it should not be like that.
Those posts that are saved should store the content of the post. And map its properties with the 'posts' table. Or just move the post to the saved table and merge them.
However you do, this behaviour should be fixed.

Style timestamp

When a post is opened the modal show its timestamp which is not styled accordingly to the rest of the modal.

Better html strip

We are simply retrieving the textContent from a node, using the browser builtin function. Although this removes all html entities and this is not correct. Lots of sites encode their description or content with meaningful html, we should only strip unsafe html and leave the rest in order to improve the user experience.

Better image retrieval

Right now we only pick the first element from the item's description. However, images are specified in other properties such as "enclosure" which is a way to link them.

Full support for rss

There are just a few properties used by Atomic to retrieve data from a source and article

Search on source

When we use the search feature we are searching over all posts. However, if we are in a source section we should only search on the posts from that source.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.